How can I pass a variable to the previous screen by using React Navigation?

Question

I'm using React Native. I tried to write this code:

//Screen A
//ignored the "import"

export function Hoge(Props) {
  let onSelect =  false


return(
  <View>
    <View>
      <Text>{onSelect ? 'Selected' : 'Not Selected' }</Text>
    </View>
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('ScreenB', { onSelect: onSelect });
      }};>
    <View><Text>Screen B</Text></View>
    </TouchableOpacity>
  </View>
  )
}

//ScreenB

export function HogeHoge(Props) {
  const [hoge, setHoge ] = useState(route.params.onSelect)
  function goBack() {
    setHoge(true)
    navigation.goBack();
  }

 let screen = navigation.setOptions({
    headerLeft: () => (
      <TouchableOpacity onPress={() => {
        goBack();
      }}>
        <Image
          source={require('../../images/back_btn.png')}
          style={commonStyles.back_btn}
        />
      </TouchableOpacity>
    ),
  })

  return (
    <View>{screen}</View>
  )
};

referring to the following: https://github.com/react-navigation/react-navigation/issues/288

I hoped the "onSelect" is true, but it was false. How can I fix it?

I think passing the variable itself is working, but from you code sample it looks like you also want to update the value you passed, is this correct ? — Ian Loubser, Oct 06 '21 at 11:00
Yes you right.Just passing the variable is fine so far.But I want to update the variable.. — Hinoarashi, Oct 06 '21 at 11:09
This is not possible the way you did it. You should consider using `react context` or alternatively try this similar solution: https://stackoverflow.com/questions/60114496/passing-function-as-a-param-in-react-navigation-5 — Ian Loubser, Oct 06 '21 at 11:36

How can I pass a variable to the previous screen by using React Navigation?

0 Answers0