How to Send ListView Item Click Value to Another Activity in React Native

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.

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.

5. Import StackNavigator module from react-navigation library in your project.

6. Make a new Class named as FirstActivity and extends component to it. This should be our First Activity Class Screen.

7. Create constructor in MainActivity class with super method. Now define ListView data source using State. This should be our all ListView items.

8. Create ListViewItemSeparatorLine function . This function would create a line between each ListView item.

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.

10. create static navigationOptions to set the Main Activity title.

11. Finally create a Parent View in render’s return block and into the parent view creating the ListView component.

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.

Screenshot of SecondActivity :

Send ListView Item Click Value13. Create StackNavigator method to navigate activities . This step is very important.

14. Create style sheet classes .

15. Complete source code for App.js File :

Screenshots in Android mobile phone application :

Send ListView Item Click Value

Screenshot in iOS mobile phone application :

24 Comments

  1. “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

  2. 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

  3. 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

  4. Thanx bro u really make my day

  5. i have an error message “undefined is not an object this.OpenSecondActivity.bind”. How to I resolve this error?
    thanks

  6. 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.

  7. 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.

  8. 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 use this.props.navigation.state.params.value . In first line the second means the next activity on which we want to send the value.

  9. Can you make a tutorial that passes text input from one screen to another screen?

  10. 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 }
    });

Leave a Reply

Your email address will not be published. Required fields are marked *