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>
)
}```