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 :
|
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 :
React Native Custom Checkbox Component iOS Android Example
React Native Paper Badge Example with Vector Icons
React Native Common DatePicker for Android and iOS Example Tutorial
React Native Show Error Message if Image load failed Not Found on Server
React Native Rotate Image View Using Animation Android iOS Tutorial
“dependencies”: {
“react”: “16.0.0-beta.5”,
“react-native”: “0.49.3”,
“react-navigation”: “^1.0.0-beta.13”
i am getting an error like this
Navigator is deprecated and has been removed from this package. It can now be installed and imported from react-native-deprecated-custom-components instead of react-native.
kindly provide a solution for this
Jithin what actually you want to do in this tutorial ?
i am trying to build an ecommerce app which is like amazon app (top portion with menu and text field below list view of items with image . i got a full tutorial from youtube (https://www.youtube.com/watch?v=QU6S8fQmNLI) (day 6 to 14 tutorials is from viatnam) . for building menu and text field as like in the amazon app . on the tutorial they are using import { Text, View, StatusBar, Navigator } from ‘react-native’;
on that i am getting error
you can find all source code from this link (https://github.com/vanpho93/LiveCodeReactNative)
thank you
Jithin you should read this post on Github this will surely help you : https://github.com/react-community/react-navigation/issues/1328
thank s
Welcome Jithin 🙂 .
hello, i have come across your code and i found it very useful for me, thank you very much. Currently I am planning to do a sales project but I do not know how to start because I only know about “react native”. I look forward to your help in creating this project.
Thanks a lot. Wish you success in life and at work
Thanks Kudo 🙂 .
Thanx bro u really make my day
Welcome Kunal 🙂 .
i have an error message “undefined is not an object this.OpenSecondActivity.bind”. How to I resolve this error?
thanks
I have just run this code after your comment bro and it is working fine without any error .
Thanks! Great tutorial!
However, I have an issue. I keep this part in different file:
{rowData}
And, I want to update or delete one row from the list if I click the row item. How could I do that? How can I trigger updateList from main class from different class (that contains my component?
Thanks!
Daniel just send the selected item to next activity and there you can update the value, read my CRUD operations tutorial : https://reactnativecode.com/insert-update-display-delete-crud-operations/
Hi, thanks so much for your reply. I have read that tutorial from your link. However, my case is a bit different. Here is part of code for your link:
renderRow={ (rowData) =>
{rowData.student_name}
}
In my case, I put this , etc component into new file (Because it is quite complicated) and import it into my main class, like this:
……
…..
So, I just sent all row data as props to this MyItem component (which is located in different file), then once I click the button, I want to update my listview (for example, I want to delete this row/item), and my problem is I cannot trigger my “updateList” function in my Main class from, this “MyItem” component file (since the constructor (state) is in the main class).
Hope you can give any idea.
Thanks so much for the help.
Sorry, the code not shown there:
renderRow={ (rowData) =>
{rowData.student_name}
}
My code is:
Sorry cannot put html tag here:
renderRow={ (rowData) =>
Text style={styles.rowViewContainer}
onPress={this.GetStudentIDFunction.bind(
this, rowData.student_id,
rowData.student_name,
rowData.student_class,
rowData.student_phone_number,
rowData.student_email
)}
{rowData.student_name}
/Text }
My code is like this:
MyItem
Text /Text
Button /Button
/MyItem
Hope you understand.
How can i get value in other screen/next Page? Enter a Value in one page and get this value in next page. Actually, I am from non-coding Background and this website/blog is very helpful to me.
I tried Passing parameters to routes but did not work on my code.. unable to get value from one page to another.
Pooja to send value from one activity to another we need to use
this.props.navigation.navigate('Second', { value: "SampleValue"})and to receive the value to next activity we need to usethis.props.navigation.state.params.value. In first line the second means the next activity on which we want to send the value.Can you make a tutorial that passes text input from one screen to another screen?
Matt i have posted the tutorial 🙂 .
Hi Am trying same thing but getting error..
“undefined is not a function (evaluating ‘(o,reactNavigation.StackNavigator)
export default Project = StackNavigator(
{
First: { screen: FirstActivity },
Second: { screen: SecondActivity }
});
Abhigyan StackNavigator is deprecated now you have to use createStackNavigator .