3

I'm struggling with this "apparently" simple situation in React Navigation v5. Any help appreciated.

I have a stack navigator nested inside a stack navigator and would like to customise only the nested navigator but I can't for the life of me get it to work. In fact, the only customisation I can do is on the topmost Stack.Navigator using screenOptions or using options on the following line where I call the component. Both of these options will change the header for ALL nested screens. I can't even set a custom title for each screen inside AuthenticationStack...

Thank you!


const AppStack = () => (
  <Stack.Navigator initialRouteName="Authentication">
    <Stack.Screen name="Authentication" component={AuthenticationStack} />
    <Stack.Screen
      name="TabStack"
      component={TabStack}
    />
  </Stack.Navigator>
)

const AuthStack = createStackNavigator()

const AuthenticationStack = () => {
  return (
    <AuthStack.Navigator>
      <AuthStack.Screen
        name="Authentication"
        component={AuthenticationScreen}
        options={{ headerTransparent: true }}
      />
      <AuthStack.Screen name="RecoverPassword" component={RecoverPasswordScreen} />
      <AuthStack.Screen name="RecoverPasswordSentMail" component={RecoverPasswordSentMailScreen} />
      <AuthStack.Screen name="ResetPassword" component={ResetPasswordScreen} />
      <AuthStack.Screen name="RequestNewLink" component={RequestNewLinkScreen} />
    </AuthStack.Navigator>
  )
}```
Shak
  • 73
  • 6

0 Answers0