React Navigation library gives us a simple method to transfer the values between multiple activities on Activity open time. So in this tutorial we would going to create an react native application which could Send ListView Item Click Value to Another Activity. When app user click on any ListView item first it would retrieve that item and then transfer selected item to next activity.
Note : You need to install the React Navigation library in your project because without this library you cannot add Activities in Both Android and iOS applications.
Contents in this project Send ListView Item Click Value to Another Activity tutorial :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Read our Previous tutorial to Open New Activity on Button Click in React Native.
3. Download and Install the react-navigation library in your project using using NPM server. So open your project’s folder in Command Prompt / Terminal and Type below command to install react-navigation library and make sure that you run the Command Prompt in Administrator mode.
|
1
|
npm install —save react–navigation
|
Screenshot of CMD after done installing :
4. Open your project’s index.android.js / index.ios.js file and Import AppRegistry, StyleSheet, Text, View and ListView component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, ListView} from ‘react-native’;
|
5. Import StackNavigator module from react-navigation library in your project.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
6. Make a new Class named as FirstActivity and extends component to it. This should be our First Activity Class Screen.
|
1
2
3
|
class MainActivity extends Component {
}
|
7. Create constructor in MainActivity class with super method. Now define ListView data source using State. This should be our all ListView items.
|
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
|
class MainActivity extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
‘Item 1’,
‘Item 2’,
‘Item 3’,
‘Item 4’,
‘Item 5’,
‘Item 6’,
‘Item 7’,
‘Item 8’,
‘Item 9’,
‘Item 10’,
‘Item 11’,
‘Item 12’,
‘Item 13’,
‘Item 14’,
‘Item 15’,
‘Item 16’,
‘Item 17’,
‘Item 18’,
‘Item 19’,
‘Item 20’,
]),
};
}
}
|
8. Create ListViewItemSeparatorLine function . This function would create a line between each ListView item.
|
1
2
3
4
5
6
7
8
9
10
11
|
ListViewItemSeparatorLine = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
9. Create OpenSecondActivity function and pass the rowData inside it. Here rowData would be send by ListView when user clicks on any ListView item. Now navigate to second activity and using the ListViewClickItemHolder variable we would send the selected rowData value to second activity. Here ListViewClickItemHolder is the identifier to send and receive the transfer value.
|
1
2
3
4
5
6
|
OpenSecondActivity (rowData)
{
this.props.navigation.navigate(‘Second’, { ListViewClickItemHolder: rowData });
}
|
10. create static navigationOptions to set the Main Activity title.
|
1
2
3
4
|
static navigationOptions =
{
title: ‘FirstActivity’,
};
|
11. Finally create a Parent View in render’s return block and into the parent view creating the ListView component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render()
{
return(
<View style = { styles.MainContainer }>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparatorLine}
renderRow={
(rowData) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, rowData)}>{rowData}</Text>
}
/>
</View>
);
}
|
Screenshot of FirstActivity :
12. Create another class named as SecondActivity .
Here this.props.navigation.state.params.ListViewClickItemHolder is used to receive the sent value from FirstActivity.
|
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.ListViewClickItemHolder } </Text>
</View>
);
}
}
|
Screenshot of SecondActivity :
13. Create StackNavigator method to navigate activities . This step is very important.
|
1
2
3
4
5
6
|
export default Project = StackNavigator(
{
First: { screen: FirstActivity },
Second: { screen: SecondActivity }
});
|
14. Create style sheet classes .
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: ‘center’,
color: ‘#000’,
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}
});
|
15. 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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, ListView} from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class FirstActivity extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
‘Item 1’,
‘Item 2’,
‘Item 3’,
‘Item 4’,
‘Item 5’,
‘Item 6’,
‘Item 7’,
‘Item 8’,
‘Item 9’,
‘Item 10’,
‘Item 11’,
‘Item 12’,
‘Item 13’,
‘Item 14’,
‘Item 15’,
‘Item 16’,
‘Item 17’,
‘Item 18’,
‘Item 19’,
‘Item 20’,
]),
};
}
ListViewItemSeparatorLine = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
OpenSecondActivity (rowData)
{
this.props.navigation.navigate(‘Second’, { ListViewClickItemHolder: rowData });
}
static navigationOptions =
{
title: ‘FirstActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparatorLine}
renderRow={
(rowData) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, rowData)}>{rowData}</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.ListViewClickItemHolder } </Text>
</View>
);
}
}
export default Project = StackNavigator(
{
First: { screen: FirstActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: ‘center’,
color: ‘#000’,
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}
});
|
Screenshots in Android mobile phone application :
Screenshot in iOS mobile phone application :
Also Read :
Add Custom External Text Fonts in React Native App Android iOS Tutorial
React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial
React Native Fetch API Tutorial to Insert Into MySQL Database Using PHP iOS Android Example
React Native Take Screenshot of App Programmatically in iOS Android
Android project not found Are you sure this is a React Native project? Error Solution
