/Javascript/React/Navigation react pass props

Navigation react pass props

Copyfunction HomeScreen({ navigation }) {  return (    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>      <Text>Home Screen</Text>      <Button        title="Go to Details"        onPress={() => {          /* 1. Navigate to the Details route with params */          navigation.navigate('Details', {            itemId: 86,            otherParam: 'anything you want here',          });        }}      />    </View>  );}
function DetailsScreen({ route, navigation }) {  /* 2. Get the param */  const { itemId } = route.params;  const { otherParam } = route.params;  return (    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>      <Text>Details Screen</Text>      <Text>itemId: {JSON.stringify(itemId)}</Text>      <Text>otherParam: {JSON.stringify(otherParam)}</Text>      <Button        title="Go to Details... again"        onPress={() =>          navigation.push('Details', {            itemId: Math.floor(Math.random() * 100),          })        }      />      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />      <Button title="Go back" onPress={() => navigation.goBack()} />    </View>  );}

Source: reactnavigation.org

Similar codes

0 vote122 views1 answer
Route guards in react
Javascript React
0 vote123 views1 answer
React replace all line breaks with br
Javascript React
0 vote155 views5 answers
Generate component react
Javascript React
0 vote129 views6 answers
React slick
Javascript React
0 vote132 views1 answer
React native passing params to nested navigators
Javascript React
0 vote149 views1 answer
Curved lines on google maps usint react
Javascript React
1 vote146 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React
0 vote127 views1 answer
Get data from mulitple query parameters react
Javascript React
4 votes120 views2 answers
[!] CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker": In Podfile: ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
Javascript React
1 vote124 views1 answer
How to change favicon dynamic in react js
Javascript React