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.
|
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 :
Screenshots in iOS device:
Also Read :
React Native Hide Dismiss Keyboard on Touch Outside Example
React Native Dynamically Hide Soft Keyboard on Button Click iOS Android
Change Text Font Size on Button Click in React Native Programmatically
View All Data From SQLite Database in React Native FlatList Example
React Native Create JSON Parsing GridView iOS Android Tutorial
