I need to hide the navbar on the landing page of an app I tried this:

const Stack = createStackNavigator(
  {
    Landing: {screen: LandingScreen},
  },
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    },
  },
);

But i get an error saying:

"Creating a navigator does'nt take an argument..."

When I use headerMode="none" it hides the navbar on all screens

 <NavigationContainer>
      <Stack.Navigator
        headerMode="none" // this hides on all screens
        screenOptions={{
          headerStyle: {
            backgroundColor: '#3c74db',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}>
        <Stack.Screen
          name="Landing"
          ponent={LandingScreen}
          options={{headerShown: 'none'}} // This does not work
        />
        <Stack.Screen name="Sales" ponent={SalesScreen} />
        <Stack.Screen name="Sign In" ponent={SignInScreen} />
        <Stack.Screen name="Register" ponent={RegisterScreen} />
        <Stack.Screen name="Create Item" ponent={CreateItemScreen} />
        <Stack.Screen name="Payment" ponent={PaymentScreen} />
      </Stack.Navigator>
    </NavigationContainer>

So how can I hide on only one screen?

I need to hide the navbar on the landing page of an app I tried this:

const Stack = createStackNavigator(
  {
    Landing: {screen: LandingScreen},
  },
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    },
  },
);

But i get an error saying:

"Creating a navigator does'nt take an argument..."

When I use headerMode="none" it hides the navbar on all screens

 <NavigationContainer>
      <Stack.Navigator
        headerMode="none" // this hides on all screens
        screenOptions={{
          headerStyle: {
            backgroundColor: '#3c74db',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}>
        <Stack.Screen
          name="Landing"
          ponent={LandingScreen}
          options={{headerShown: 'none'}} // This does not work
        />
        <Stack.Screen name="Sales" ponent={SalesScreen} />
        <Stack.Screen name="Sign In" ponent={SignInScreen} />
        <Stack.Screen name="Register" ponent={RegisterScreen} />
        <Stack.Screen name="Create Item" ponent={CreateItemScreen} />
        <Stack.Screen name="Payment" ponent={PaymentScreen} />
      </Stack.Navigator>
    </NavigationContainer>

So how can I hide on only one screen?

• javascript
• react-native
• react-navigation

1 Answer 1

React Navigation v5.x

The options prop can be used to configure individual screens inside the navigator. You can use headershown option:

Whether to show or hide the header for the screen. The header is shown by default unless headerMode was set to none. Setting this to false hides the header. When hiding the header on specific screens, you might also want to set headerMode prop to screen. Docs.

<Stack.Navigator ...>
 ...
  <Stack.Screen
    name="Landing"
    ponent={LandingScreen}
    options={{
      headerShown: false, // change this to `false`
    }}
  />
...
</Stack.Navigator>