headerShown, headerTitle and other options not working on Screens

user_7267775 0
Viewed 8749

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?

react-navigation-stack react-navigation react-native
1 Answers

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}}>
user_2834260
Related