Skip to content

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

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

Answer

Just do something like this:

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

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