How to Pass Data from One Screen to Another while Navigating in React Native

Update: This is an old post. I have created a new tutorial with typescript. Check out the blog post given here.

Navigation is an important aspect of any react native mobile application. While navigating from screen to screen, you may also want to pass data. In this blog post, you can learn how to pass data from one screen to another in react native.

React navigation is the most popular react native library for navigation. I am also using the same library in this react native example. With react navigation library, you can pass data as given below:

this.props.navigation.navigate('Sample', {
              data: this.state.data
            });

You can retrieve the passed data as given below:

const data = this.props.navigation.getParam('data', 'some default value');

In the following react native example, I pass data entered in TextInput component from ‘Home’ screen to ‘Sample’ screen and show as Text. First of all, install react native library in your react native project using instructions given here.

App.js

import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from './src/Home';
import Sample from './src/Sample';

const AppNavigator = createStackNavigator({
  Home: {
    screen: Home
  },
  Sample: {
    screen: Sample
  }
});

export default createAppContainer(AppNavigator);

Home.js

import React, { Component } from 'react';
import { View, Button, TextInput, StyleSheet } from 'react-native';

class Home extends Component {

    constructor(props){
        super(props);
        this.state = {
            text:''
        }
    }

    render() {
        return (
        <View style={styles.container}>
        <TextInput
        style={{height: 40, width: 160, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
      <Button
        onPress={()=>{this.props.navigation.navigate('Sample', {
            data: this.state.text
          });}}
        title="Press to Navigate"
        color="#841584"
      />
         </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    image: {
        height: 180,
        width: 200,
        transform: [{ rotate: '90deg' }]
    }
});


export default Home;

Sample.js

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';


// create a component
class Sample extends Component {

    constructor(props){
        super(props);
        this.state = {
            data:''
        }
    }

    componentDidMount(){
    const data = this.props.navigation.getParam('data', 'some default value');
    this.setState({
    data
    });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>{this.state.data}</Text>
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
});

//make this component available to the app
export default Sample;

The output of react native example as given below: