React Navigation part 4: React native program to pass data between screens

Introduction :

React native navigation library provides an easy way to pass data from one screen to another. In this post, I will show you how to pass data from one screen to another in react native using the navigation library.

How to pass params to routes :

The data, also called parameter or param, can be passed in the navigate method. The first parameter is the route name and the second parameters are the params.

navigation.navigate('Name', {params})

On the second screen, we can read these params using the route. route.params gives these values.

The similar process can be used to pass params back to the first screen from the second screen.

Example program :

Let me show you with an example. This project consists of two screens : FirstScreen and SecondScreen.

The FirstScreen looks as like below :

import {Text, View, Button} from 'react-native';
import React, {useState, useEffect} from 'react';

export default function FirstScreen({navigation, route}) {
  const [msg, setMsg] = useState('');

  useEffect(() => {
    setMsg(route.params?.msg ? route.params.msg : '');
  }, [route.params]);

  return (
    <View
      style={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>First Screen</Text>
      <Text>{msg}</Text>
      <View style={{marginTop: 35}}>
        <Button
          title="Click me"
          onPress={() =>
            navigation.navigate('SecondScreen', {
              param1: 100,
              param2: 'Hello from FirstScreen',
            })
          }
        />
      </View>
    </View>
  );
}

Here, we have one Button, it navigates to the SecondScreen with two params :param1 and param2. If it receive any param as name msg, it assigns that value to the variable msg that we are showing in the screen.

Below is the code for SecondScreen :

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

export default function SecondScreen({route, navigation}) {
  const {param1, param2} = route.params;

  return (
    <View
      style={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Second Screen</Text>
      <Text>{param1}</Text>
      <Text>{param2}</Text>
      <View style={{marginTop: 35}}>
        <Button
          title="Click me"
          onPress={() =>
            navigation.navigate('FirstScreen', {msg: 'Hello from SecondScreen'})
          }
        />
      </View>
    </View>
  );
}

It receives the params from the first screen using route.params and displays that data. It also has one button that navigates to the FirstScreen with a msg param.

If you move to the SecondScreen from the FirstScreen, it will look like below :

second screen

Again, if you click on the button on SecondScreen and move back to FirstScreen, it looks like as below :

first screen

Where is the color and why codevscolor ?

Long story short, I love paintings and I paint on weekends. We(me and my wife) have one Youtube channel. Below is a video that I did recently. If you love this please do subscribe to support us 😊