react native passing parameters to routes

1Copy
2function HomeScreen({ navigation }) {
3  return (
4    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
5      <Text>Home Screen</Text>
6      <Button
7        title="Go to Details"
8        onPress={() => {
9          /* 1. Navigate to the Details route with params */
10          navigation.navigate('Details', {
11            itemId: 86,
12            otherParam: 'anything you want here',
13          });
14        }}
15      />
16    </View>
17  );
18}
19
20function DetailsScreen({ route, navigation }) {
21  /* 2. Get the param */
22  const { itemId } = route.params;
23  const { otherParam } = route.params;
24  return (
25    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
26      <Text>Details Screen</Text>
27      <Text>itemId: {JSON.stringify(itemId)}</Text>
28      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
29      <Button
30        title="Go to Details... again"
31        onPress={() =>
32          navigation.push('Details', {
33            itemId: Math.floor(Math.random() * 100),
34          })
35        }
36      />
37      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
38      <Button title="Go back" onPress={() => navigation.goBack()} />
39    </View>
40  );
41}