Retrieve JSON ListView Clicked Item on New Screen React Native Tutorial

Through this tutorial, I am going to explain and show you how we can retrieve JSON  ListView  clicked item and show clicked item’s value on new screen from scratch.

In brief, what I am doing in Retrieve JSON ListView Clicked Item on New Screen tutorial?

  • How we can create simple react native ListView  component and render data from JSON in ListView.
  • Fetch clicked item from ListView component and show in new Activity/Screen using StackNavigator.

So let’s begin…

Step – 1: Install react-navigation  library in your react native project. If you have already installed react-navigation  library then you can simply skip this step.

Step – 2: Import all required components from react , react-native , react-navigation  packages.

Step – 3: Create first custom component, which simply renders a ListView. In my case, first view component’s name is RenderList . You can use any name whatever you want.

Explanation:

  • this.props.navigation.navigate('Item', { item: clickedItem });  statement is used to navigate to second screen (Item) from current screen with clickedItem .

Step – 4: Implement constructor  method of our first custom component RenderList .

Explanation:

  • fetch statement is used to fetch data from server, response.json() method is used to parse fetched json and then set your dataSource  with parsed json and after setting dataSource  state variable we must hide loading indicator(ActivityIndicator) to show ListView component with items.

Step – 5: Implement  render  method of RenderList  custom component.

Step – 6: Create second custom component, which is responsible to shows the selected item of ListView component. In my case, second view component’s name is ClickedItem . You can use any name according to your requirement.

Explanation:

  • this.props.navigation.state.params.item.name.toUpperCase() is used to access the clicked item’s value and then change it to upper case by using the javascript  toUpperCase()  function.

Step – 7: Register both screens/custom components into StackNavigator  to enable navigation.

Step – 8: Implement styles for all required components.

Complete Source Code:

Step – 9: As usual use react-native run-android  to run app in Android devices and use react-native run-ios  to run app in iOS devices.

  • iOS Screenshots:

  • Android Screenshots:

 

2 Comments

  1. Everything is very open with a precise clarification of the challenges.
    It was definitely informative. Your site is very useful.

    Thank you for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *