I'm just trying to do something like that (when user select an item, then navigate to another component):
const handleValueChange=(itemValue, itemIndex) =>setTypeValue(itemValue)
const onPress = () => {
try{
const topic = "Plant/type";
...
navigation.navigate('Air')
}catch(err){
console.log(err)
}
}
return (
<Picker
selectedValue={typeValue}
onValueChange={handleValueChange}
style={{ top: '21%', height: 50, width: 150 }}/>
<TouchableOpacity
style={styles.button}
onPress={()=> onPress()}
/>
)
Typically when we want to pass value between two component we use props :
<AirScreen typeofPlant={typeValue} />
But in this case I have o idea how can I do it without invoked AirScreen
You can do that like:
const onPress = () => {
try{
const topic = "Plant/type";
...
navigation.navigate('Air', {newTopic: topic}) //you can pass another value by separating with comma
}catch(err){
console.log(err)
}
}
Then you can fetch the same value in next screen like:
function NextScreen({ route, navigation }) {
const topic = route.params.newTopic
}
Hope this works for you.
Just do something like this:
navigation.navigate('RouteName', { /* params go here */ })
You might want to read the following documentation: https://reactnavigation.org/docs/params/