React Native Pass TextInput Entered Value From One Activity Screen to Another

Transforming data between activities is one of the most useful task in react native applications because using them we can communicate between activities by passing values to one another. The React Navigation library has its own method known as this.props.navigation.navigate{} which is used to navigate to next activity and with that it can also pass value from one activity screen to  another.  So in this tutorial we would going to Pass TextInput Entered Value From One Activity Screen to Another Activity using this.props.navigation.navigate{} method of React Navigation. So let’s get started 🙂 .

Contents in this project Pass TextInput Entered Value From One Activity Screen to Another Activity in Android iOS React Native App Example Tutorial:

1. Before getting started with coding part we need to install the React Navigation library in our current react native project in order to use the Activity structure in our react native app. So to install the react navigation library open your project’s folder in CMD (Terminal) and run the below command .

Screenshot of CMD:

Screenshot after successfully install the React Navigation library:

2. Import StyleSheet, TextInput, View, TouchableOpacity and Text component in your project.

3. Import StackNavigator module from react navigation library in your project. This is used to add multiple activities in your project.

4. Create a Class named as MainActivity, this would be our first home screen of application.

5. Create static navigationOptions in your Activity to set Activity screen Title.

6. Creating Constructor() in your MainActivity class and inside the constructor we would make 2 States named as TextInput_Name and TextInput_Number . These states would used to hold the Text Input entered values.

7. Create a function named as Send_Data_Function() in MainActivity class. Inside this function we would use the this.props.navigation.navigate() method to navigate to next activity class and with that we are also sending the Values of States.

Second : Here the second means the SecondActivity. This will redirect us the second activity.

NameOBJ : Used as a Key object that holds the value of Name state . We would use this object into next activity for receiving name.

NumberOBJ : Used as key object that holds the value of Number state. We would use this object into another activity to receive the sent value of number.

8. Creating 2 Text Input and 1 button component in MainActivity class inside render’s return block. We are using the TouchableOpacity component to make the button.

onChangeText : Used when user starts typing inside Text Input component and save the typed data into State.

9. Complete code of MainActivity class.

10. Creating another class named as SecondActivity. Inside this class we would receive the transfer value from previous activity and show inside the Text component. You can do whatever you want to using this value.

this.props.navigation.state.params.NameOBJ : As you can see the NameOBJ is the key which we have created in our previous MainActivity. So we would use this method to receive the value .

this.props.navigation.state.params.NumberOBJ : Used to receive the value of number object.

Complete source code of SecondActivity :

11. Creating the StackNavigator activity navigator block. Inside this block we would define our all the activities and give them a unique identifier name which is used on navigation time.

12. Creating Style.

13. Complete source code for App.js File :

Screenshots:

Pass TextInput Entered Value From One Activity Screen to Another

16 Comments

  1. You’re doing great work.
    Your tutorials really helped me in my running project.

    May i mail some queries ? Not logical but what should be right/wrong approach in some parts.
    It would be great if you allow!

  2. Your tutorials really helped me.
    May i ask some queries regarding react-native ? Not logical, but some approaches whether right or wrong !
    Hope you allow me to ask.

    • Yes even you can mail us your queries .

      • tutorial , Parallax ScrollView

      • I’m trying to modify this code so that it works the other way.
        I need to display the input text on the first screen from the second screen.
        Any help would be greatly appreciated.
        https://snack.expo.io/B12nsV7PX

        • Eric i have explained all the code in tutorial then what problem you are actually facing ?

          • You did and it is greatly appreciated, it works perfect in your example, however I’m trying to make it work differently.

            Your example:
            First Screen = Enter text. Save button takes you to second screen.
            Second Screen = Display text

            What I’m trying to do:
            First Screen = Click to go to the second screen where text is entered.
            Second Screen = Enter text. Save button takes you back to the first screen and displays the text there.

            My problem with my example is that {this.props.navigation.state.params.NoteOBJ} needs to be on the first screen because that’s where i want to eventually display it but it gives me an undefined error because it is not defined until the second screen

            I have it all set up in this snack. It would be great if you could take a look at it.
            (There are additional comments inside the snack)
            https://snack.expo.io/SJTuqLEPQ

        • Found a solution in case anybody else is interested.
          https://snack.expo.io/SJ2OYgDDQ

  3. parallax scrollview tutorial

  4. Dear Admin,

    I have followed every step of above example, but I don’t why I’m not getting the test values from first activity to another activity, how to debug the application?

  5. wait can i pass images?

    • No you cannot pass image from one activity to another but you can pass the image URL then show image on next activity using URL.

  6. this is fine if i want to pass the value from first screen to 3rd screen what should i do?the same method is not working

  7. Hello admin, I have an issue can you help me with this ??

    I created navigation drawer and stack navigation in App.js and create a class named Profile.js where I am getting data from API.

    So I want to pass the name and email from the profile page to App js and want to place in drawer header so how can I transfer data there?
    While I m using props to pass data it gives me an error
    ” undefined is not an object (evaluating ‘this.props’) “

Leave a Reply

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