react-nativereact-navigationreact-navigation-stack

headerShown, headerTitle and other options not working on Screens


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?


Solution

  • 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}}>