React Native Show JSON ListView click item value on another Activity Screen iOS Android Example

Passing data from one activity to another is very important in react native. The React Navigation library gives us a method named as this.props.navigation.navigate(Your_Activity_Name, Value_You_Want_To_Send). So in this tutorial we would going to Show JSON ListView click item value on another Activity Screen in iOS Android react native application. We would retrieve the JSON ListView FlatList Item on onPress={} event and send the Item to next activity. This type of functionality is mostly used in dynamic react native applications where developer needs to transfer some value to next activity where it can be used to a certain task.

Contents in this project Show JSON ListView click item value on another Activity Screen iOS Android Example in React Native:

1. First of all we need to add React Navigation library in our React Native project, because to add the Activity structure in our project it is compulsory to import React Navigation library. So open your project’s folder in CMD(Command Prompt) and execute the npm install --save react-navigation command like i did in below screenshot. One more thing please start the CMD in Administrator Mode.

2. Screenshot of CMD after successfully installed the library.

3. I have already created JSON ListView and JSON FlatList in our previous tutorials. So read them to know more about converting MySQL Data to JSON form, because in this tutorial i am directly using the JSON form old tutorial. Below is the screenshot of JSON i am using in this project.

4. Import StyleSheet, Text, View, ListView and ActivityIndicator in your project.

5. Import StackNavigator from React Navigation library.

6. Create a Class named as MainActivity. This would be our First View class.

7. Create constructor() in MainActivity class. Inside the constructor() we would create a State named as Loading_Activity_Indicator and set its default value as True. This state is used to Show and Hide the activity loading indicator while we parse JSON in our project.

8. Create componentDidMount() method in MainActivity class. This method would automatically called on application start time. We are using the Fetch() API to parse JSON in our project.

9. Create ListViewItemSeparator() function in MainActivity Class. This function would render a Horizontal line between each ListView item.

10. Create Navigate_To_Second_Activity() function in MainActivity Class. We would call this function on ListView item onPress={} event. This function would navigate us to Next activity with JSON ListView selected item value.

11. Create static navigationOptions in MainActivity Class. This is used to set MainActivity Class Title which would show inside the Title Action Bar.

12. Put a IF condition inside render’s block to Show the Activity Loading Indicator while JSON is parsing in MainActivity Class. After that we would make the ListView in render’s return block.

13. Complete source code of MainActivity Class.

Screenshot of MainActivity Class:

14. Crate another class named as SecondActivity in your project. This would be our Next class in which we would show the Selected Item value. We are using the this.props.navigation.state.params() method to retrieve the sent value.

Screenshot of SecondActivity class :

15. Create StackNavigator() method. This method is very important and we would define all the activity classes inside it.

16. Create Style for your project.

17. Complete source code for App.js File :

Screenshots in Android device :

Screenshots in iOS device: