<Button
title="Next"
onPress={() => {
navigation.navigate('Two', {
postONE: Math.floor(Math.random() * 10) + 10,
postTWO: 'R',
});
}}
/>
For more: Passing parameters to routes
The problem is you are passing two different objects in the navigation. But first object is the place where you pass all your props.
Here is the code to properly pass values:
render() {
return (
<View style={styles.MainContainer} >
<Button title="Next" onPress={() => {
this.props.navigation.navigate(
'Two',
{
postONE: Math.floor(Math.random() * 10) + 10,
postTWO: 'R'
})}}
/>
</View>
);
}
}
You need to pass those values in one object like
{
postONE: Math.floor(Math.random() * 10) + 10,
postTWO: ‘R’
}
something like
this.props.navigation.navigate(
'Two',
{
postONE: Math.floor(Math.random() * 10) + 10,
postTWO: 'R'
})}}
Here I’m able to send the first value of (postONE) from current to Screen Two, and it shows there perfectly.
but it doesn’t display the second value of (postTwo). Means the Next screen shows the Random number, without the ‘R’.
Current screen One’s code:
....
render() {
return (
<View style={styles.MainContainer} >
<Button title="Next" onPress={() => {
this.props.navigation.navigate(
'Two',
{ postONE: Math.floor(Math.random() * 10) + 10 }),
{ postTWO: 'R' } }}
/>
</View>
);
}
}
This is screen Two’s code:
....
render() {
const { postONE, postTWO } = this.props.route.params;
return (
<View style={styles.MainContainer} >
<Text style={styles.textCat}>{postGRN}</Text>
<Text style={styles.textCat}>{postGNR}</Text>
</View>
);
}
}