how do i get a value picked from another screen?-CodePudding

im using navigation to pass between screens. now,im trying to figure out how can i get a value from second screen to the first screen ? the user needs to pick a color value from the second screen and return selcted color to the first screen. this is the code im using .

enter code here
      <CustomButton
        style={styles.buttonPicker}
        darkMode={this.props.darkMode}
        title={'pick a color'}
        onPress={() => {
          this.props.navigation.navigate('ColorPickerScreen', {
            onSubmit: (namecolor) => {
              console.log('55555555555555', { getNameColor })
            },
          })
        }}
      ></CustomButton>

enter code here

onSelect = (color) => this.props.navigation.navigate('CreatenewtTipul') render() { return ( <Image style={styles.img} source={require('../components/icons/color-wheel.png')} />

    <ColorPicker
      colors={this.state.colors}
      selectedColor={this.state.selectedColor}
      onSelect={this.onSelect}
    />

    <Text>Selected Color = {this.state.selectedColor}</Text>
  </View>
)

} }

tnx for any help arik :)

CodePudding user response：

To pass value from screen A to screen B:

navigation.navigate('ScreenB', {
            itemId: 86,
            otherParam: 'anything you want here',
          });

To access that value in Screen A:

const { itemId, otherParam } = route.params;

Where were route here is part of the screen's props, check the guide here for more info

CodePudding user response：

im not trying to pass a value to the second screen. im trying to get a value from the second screen to the first screen.

CodePudding user response：

You can pass a function as a callback from the first screen to the second screen in params on call that on your second screen.

function Screen1(props) {
   const onSelect = (selectedColor) => {
     console.log('selectedColor', selectedColor)
   }
   const navigateToSecondScreen = () => {
     props.navigation.navigate('Screen2', {
       onColorSelect: onSelect
    })
   }
   return(
     <View>
       <TouchableOpacity onPress={navigateToSecondScreen}>
         <Text>Go to second screen</Text>
       </TouchableOpacity>
     </View>
   )
}

//Second Screen

function Screen2(props) {
  const {onColorSelect} = props.route.params;
  return(
    <View>
      <TouchableOpacity onPress={() => {onColorSelect('color value')}}>
        <Text>your other code here</Text>
      </TouchableOpacity>
    </View>
  )
}

The idea is just to call the function which you have passed as a param from Screen1