I'm new on React Native and I'm trying to create some things just for learning and testing...
Now, I'm trying to create an app with a login screen and some other screens in "logged area". So, I want to use the Header bar on "logged area" screens, but not on the Login screen.
For this, I'm trying to use React-Navigation, with options on Stack.Screen
. But isn't working...
Here's my current code:
[...]
const Stack = createStackNavigator();
[...]
<NavigationContainer>
<Stack.Navigator headerMode="screen">
<Stack.Screen headerTitle="Test" headerShown={false} screenOptions={{headerTitle: 'Test', headerShown: false}} name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
[...]
I'm testing if headerTitle
and headerShown
works as property or as screenOptions
' option... But nothing is working.
Now, my screen has a "Login" title in header (ignoring the headerTitle
property and option) and is showing the header (ignoring the headerShown
property and option).
Can someone tell me what I'm doing wrong?
screenOptions is a prop from Stack.Navigator, not from Stack.Screen.
headerTitle and headerShown are both options and not props, thus they must be inside options.
So either change 'screenOptions' to just 'options':
<Stack.Screen options={{headerTitle: 'Test', headerShown: true}} name="Login" component={Login} />
Or move this to Stack.Navigator (beware, it would be applied to all screens inside your navigator):
<Stack.Navigator headerMode="screen" screenOptions={{headerTitle: 'Test', headerShown: true}}>