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.
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.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, ListView, ActivityIndicator } from 'react-native'; |
5. Import StackNavigator from React Navigation library.
1 |
import { StackNavigator } from 'react-navigation'; |
6. Create a Class named as MainActivity. This would be our First View class.
1 2 3 4 |
class MainActivity extends Component { } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MainActivity extends Component { constructor(props) { super(props); this.state = { // Default Value of this State. Loading_Activity_Indicator: true } } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php') .then((response) => response.json()) .then((responseJson) => { let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState({ Loading_Activity_Indicator: false, dataSource: ds.cloneWithRows(responseJson), }, function() { // In this block you can do something with new state. }); }) .catch((errorMsg) => { console.error(errorMsg); }); } |
9. Create ListViewItemSeparator() function in MainActivity Class. This function would render a Horizontal line between each ListView item.
1 2 3 4 5 6 7 8 9 10 11 |
ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } |
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.
1 2 3 4 5 6 |
Navigate_To_Second_Activity=(fruit_name)=> { //Sending the JSON ListView Selected Item Value On Next Activity. this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name }); } |
11. Create static navigationOptions in MainActivity Class. This is used to set MainActivity Class Title which would show inside the Title Action Bar.
1 2 3 4 5 6 |
static navigationOptions = { title: 'MainActivity', }; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
render() { if (this.state.Loading_Activity_Indicator) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size = "large" color="#009688"/> </View> ); } return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderSeparator= {this.ListViewItemSeparator} renderRow={(rowData) => <Text style={styles.rowViewContainer} onPress={this.Navigate_To_Second_Activity.bind(this, rowData.fruit_name)} >{rowData.fruit_name}</Text>} /> </View> ); } |
13. Complete source code of MainActivity Class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
class MainActivity extends Component { constructor(props) { super(props); this.state = { // Default Value of this State. Loading_Activity_Indicator: true } } componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php') .then((response) => response.json()) .then((responseJson) => { let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState({ Loading_Activity_Indicator: false, dataSource: ds.cloneWithRows(responseJson), }, function() { // In this block you can do something with new state. }); }) .catch((errorMsg) => { console.error(errorMsg); }); } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } Navigate_To_Second_Activity=(fruit_name)=> { //Sending the JSON ListView Selected Item Value On Next Activity. this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name }); } static navigationOptions = { title: 'MainActivity', }; render() { if (this.state.Loading_Activity_Indicator) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size = "large" color="#009688"/> </View> ); } return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderSeparator= {this.ListViewItemSeparator} renderRow={(rowData) => <Text style={styles.rowViewContainer} onPress={this.Navigate_To_Second_Activity.bind(this, rowData.fruit_name)} >{rowData.fruit_name}</Text>} /> </View> ); } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class SecondActivity extends Component { static navigationOptions = { title: 'SecondActivity', }; render() { return( <View style = { styles.MainContainer }> <Text style = { styles.TextStyle }> { this.props.navigation.state.params.JSON_ListView_Clicked_Item } </Text> </View> ); } } |
Screenshot of SecondActivity class :
15. Create StackNavigator() method. This method is very important and we would define all the activity classes inside it.
1 2 3 4 5 6 |
export default MyNewProject = StackNavigator( { First: { screen: MainActivity }, Second: { screen: SecondActivity } }); |
16. Create Style for your project.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
const styles = StyleSheet.create( { MainContainer: { justifyContent: 'center', flex:1, margin: 10 }, TextStyle: { fontSize: 23, textAlign: 'center', color: '#000', }, rowViewContainer: { fontSize: 17, paddingRight: 10, paddingTop: 10, paddingBottom: 10, }, ActivityIndicator_Style: { flex: 1, alignItems: 'center', justifyContent: 'center', left: 0, right: 0, top: 0, bottom: 0, } }); |
17. Complete source code for App.js File :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, ListView, ActivityIndicator } from 'react-native'; import { StackNavigator } from 'react-navigation'; class MainActivity extends Component { constructor(props) { super(props); this.state = { // Default Value of this State. Loading_Activity_Indicator: true } } componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php') .then((response) => response.json()) .then((responseJson) => { let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState({ Loading_Activity_Indicator: false, dataSource: ds.cloneWithRows(responseJson), }, function() { // In this block you can do something with new state. }); }) .catch((errorMsg) => { console.error(errorMsg); }); } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } Navigate_To_Second_Activity=(fruit_name)=> { //Sending the JSON ListView Selected Item Value On Next Activity. this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name }); } static navigationOptions = { title: 'MainActivity', }; render() { if (this.state.Loading_Activity_Indicator) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size = "large" color="#009688"/> </View> ); } return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderSeparator= {this.ListViewItemSeparator} renderRow={(rowData) => <Text style={styles.rowViewContainer} onPress={this.Navigate_To_Second_Activity.bind(this, rowData.fruit_name)} >{rowData.fruit_name}</Text>} /> </View> ); } } class SecondActivity extends Component { static navigationOptions = { title: 'SecondActivity', }; render() { return( <View style = { styles.MainContainer }> <Text style = { styles.TextStyle }> { this.props.navigation.state.params.JSON_ListView_Clicked_Item } </Text> </View> ); } } export default MyNewProject = StackNavigator( { First: { screen: MainActivity }, Second: { screen: SecondActivity } }); const styles = StyleSheet.create( { MainContainer: { justifyContent: 'center', flex:1, margin: 10 }, TextStyle: { fontSize: 23, textAlign: 'center', color: '#000', }, rowViewContainer: { fontSize: 17, paddingRight: 10, paddingTop: 10, paddingBottom: 10, }, ActivityIndicator_Style: { flex: 1, alignItems: 'center', justifyContent: 'center', left: 0, right: 0, top: 0, bottom: 0, } }); |
Screenshots in Android device :
Hello Admin !
I want to push data into webview but error, syntax:
error: this is a reserved word
Please help me
You want to push data from react native webview to opened website inside it ? am i correct ?
Hey Admin. this link is no longer available:
https://reactnativecode.000webhostapp.com/FruitsList.php
Thanks!
It is available but because of its on 000WebHost which is a free hosting so they turned off the server some times for free users. You can check it now .
Hi,
Is it possible to show other details of the clicked item? for example; blackberry is clicked and it give some details in the second activity.
So fruit_name and fruit_detail ?
Also can you share source code?
Alex i have already created tutorial on this topic here is the link : https://reactnativecode.com/click-filter-json-selected-listview-data-android-ios/
Realy useful. thanks a lot.
Welcome Ramesh 🙂 .
Thank you, I appreciate this!
Welcome Alvaro 🙂 .
how to add this fetched data to an another table in database..
Ranjith please explain your question more briefly ?