React Navigation: Hide Header Bar on Specific Screens

Last updated on May 5, 2021 A Goodman Loading... 4 comments

To hide the header bar on one or some specific screens in a React Native app that uses React Navigation 5+, just add the following option to Stack.Screen:

options={{
    headerShown: false
}}

Like this:

NavigationContainer>
      <Stack.Navigator>
        {/*The header will be disabled on this screen */}
        <Stack.Screen
          name="First"
          component={FirstScreen}
          options={{
            headerShown: false,
          }}
        />

        {/*The header will appear on this screen by default*/}
        <Stack.Screen name="Second" component={SecondScreen} />
      </Stack.Navigator>
</NavigationContainer>

For more clarity, see the example below.

Full Example

The example app we are going to make is really simple. It has 2 screens:

  • The header bar is hidden in the first screen. You can navigate to the second screen by using the button in the center.
  • The header in shown as normal in the second screen. You can use the Back button to go to the first screen from here.

Preview:

The complete code:

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";

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

// Create some demo screens
const FirstScreen = ({ navigation }) => {
  return (
    <View style={styles.screen}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>First Screen</Text>
      </View>
      <Button
        onPress={() => navigation.navigate("Second")}
        title="Go to #2 screen"
      />
    </View>
  );
};

const SecondScreen = (props) => {
  return (
    <View style={styles.screen}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Second Screen</Text>
      </View>
    </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>
  );
}

// Kindacode.com
// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  textContainer: {
    marginBottom: 30,
  },
  text: {
    fontSize: 30,
  },
});

Conclusion

You’ve learned how to disable the header bar on one or some specific screens in an app that uses the latest versions of React Navigation. If you’d like to explore more new and interesting stuff about React Native, take a look at the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
4 Comments
Inline Feedbacks
View all comments
Kshitiz Pal
Kshitiz Pal
5 months ago

How can I remove ‘second screen’ header from a nested screen in it .

a_random_dev
a_random_dev
1 year ago

Thanks ! 😊

Related Articles