Passing state via route.params with React Navigation returning undefined

Question

I'm attempting to pass a 'passcode' state as params in my React Native app.

I'm doing this by passing params into a 'navigation.navigate' call.

However, every time I navigate to the next screen, it's returning 'undefined' for 'route.params'.

For reference, here is my component I'm passing data FROM:

const SignUpPasscodeScreen = ({ navigation }) => {

  const [passcode, setPasscode] = useState(0)

  return (
    <View>
      <View style={styles.mainView}>
        <SubLogo />
        <Heading title="Set passcode" />
        <SubHeading content="You'll need this anytime you need to access your account." />
        <Input inputText={ text => setPasscode(text) } inputValue={passcode} />
      </View>
      <View style={styles.subView}>
        <CtaButton text="Continue" onPressFunction={ () => navigation.navigate({ routeName: 'SignUpLegalName', params: { passcode } } ) } />
      </View>
    </View>
  )
}

And here's the component I'm passing data to, and where the error occurs upon navigation:

const SignUpLegalName = ({ route, navigation }) => {

  const { passcode } = route.params

  return (
    <View>
      <View style={styles.mainView}>
        <SubLogo />
        <Heading title="Tell us your name" />
        <SubHeading content="This needs to be the same as what's on your passport, or any other form of recognised ID." />
        <Input />
        <Input />
      </View>
      <View style={styles.subView}>
        <CtaButton text="Continue" onPressFunction={ () => navigation.navigate('SignUpLink')} />
      </View>
    </View>
  )
}

I've tried two forms of passing the props through:

1. Passing it in as a second argument
2. Passing it in as a 'params' object as shown above

Both should work according to the documentation - link here

For reference, this is my route structure:

const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    SignUpPasscode: SignUpPasscodeScreen,
    SignUpLegalName: SignUpLegalName,
  })
});

The above structure doesn't say to me that it's a nested structure which therefore requires any additional work to pass it through...

Can someone help? It'd be appreciated as it's giving me a headache!

Answer 1

Have a try with below code in the button press event:

<CtaButton 
    text="Continue" 
    onPressFunction={() => navigation.navigate('SignUpLegalName',{ passcode })}
/>