React Navigation v5 Tutorial Series (Part 2): How to Pass Data from One Screen to Another in React Native

Last Updated on March 14, 2020.

I already posted about how to create stack navigator using react navigation version 5. In this blog post, let’s demonstrate how to pass data from one screen to another using react navigation library.

First of all, install react navigation version 5 library by following the instructions given here. You can pass data as given below:

this.props.navigation.navigate('SecondScreen', {
              item: 'data'
            })

You can retrieve data from other screen as given below:

const data = this.props.route.params.item;

Now, let’s create a complete react native example with three files App.js, FirstScreen.js and SecondScreen.js

FirstScreen.js

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

export default class FirstScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={text => this.setState({username: text})}
          value={this.state.username}
          placeholder="username"
        />
        <TextInput
          style={styles.input}
          onChangeText={text => this.setState({password: text})}
          value={this.state.password}
          placeholder="password"
        />
        <Button
          title="Navigate"
          onPress={() =>
            this.props.navigation.navigate('SecondScreen', {
              username: this.state.username,
              password: this.state.password,
            })
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    margin: 10,
    width: '70%',
    borderColor: 'gray',
    borderWidth: 1,
  },
});

SecondScreen.js

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

export default class SecondScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }
  componentDidMount() {
    this.setState({
      username: this.props.route.params.username,
      password: this.props.route.params.password,
    });
  }

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

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

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import FirstScreen from './FirstScreen';
import SecondScreen from './SecondScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="FirstScreen" component={FirstScreen} />
        <Stack.Screen name="SecondScreen" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Here, what happens is you have two TextInput components in FirstScreen and you show the data of inputs as text in the SecondScreen. See the output of the react native example below.

pass data react navigation

I hope this react navigation 5.x tutorial will help you. Thank you for reading!

1 thought on “React Navigation v5 Tutorial Series (Part 2): How to Pass Data from One Screen to Another in React Native”

Leave a Reply

%d bloggers like this: