React Navigation 5.x: Hiding the header bar on a specific screen

February 24, 2020 Goodman Loading... Post a comment

To hide the header bar on a specific screen with React Navigation 5.0 or newer in React Native, just use:

options={{
    headerShown: false
}}

Full example

App.js:

import React from 'react';
import { View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Create some demo screens
const FirstScreen = porps => {
    return <View><Text>First Screen</Text></View>
}

const SecondScreen = props => {
    return <View><Text>Second Screen</Text></View>
}

// Create a Stack Navigator
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
          {/*-------- The header will be disabled on the first screen ---*/}
         <Stack.Screen 
             name="First" 
             component={FirstScreen}
             options={{
                headerShown: false
            }}
          />

         {/*---------------- The header will appear on the second screen by default --------------*/}
           <Stack.Screen name="Second" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
avatar

Related Articles