Select an item from dropdown and use that value in another component in React native-CodePudding

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

CodePudding user response：

Just do something like this:

navigation.navigate('RouteName', { /* params go here */ })

You might want to read the following documentation: https://reactnavigation.org/docs/params/

CodePudding user response：

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.