How to Pass Parameters to screen in StackNavigator?
You can pass params with the navigate
function's second argument:
onPress(user) {
this.props.navigation.navigate(
'DetailPage',
{ user },
);
}
React Navigation 5.x (2020)
Access them in this.props.route.params
. For example in your DetailsPage
:
<Text style={styles.myStyle}>{this.props.route.params.user.name}</Text>
https://reactnavigation.org/docs/params/
React Navigation <= 4.x
Access them in this.props.navigation.state.params
. For example in your DetailsPage
:
<Text style={styles.myStyle}>{this.props.navigation.state.params.user.name}</Text>
https://reactnavigation.org/docs/4.x/params/
In react hooks, params send in navigation using useNavigation
import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();
<Button
title="Back"
onPress={() => {
navigation.navigate('MyScreen',{name:'test'});
}}
/>
then access them using useNavigationParam
function MyScreen() {
const name = useNavigationParam('name');
return <p>name is {name}</p>;
}