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 :
Again, if you click on the button on SecondScreen and move back to FirstScreen, it looks like as below :
