How To Hide React Navigation Header in React Native

How To Hide React Navigation Header in React Native

If you are building a React Native app with React Navigation, you might want to hide the header of a specific screen to have more control over the design of your app. There are different ways to do this depending on your specific use case.

Option 1: using navigationOptions

The easiest way to hide the header of a screen is to use the navigationOptions object and set headerShown to false. This will disable the header and make it disappear from the screen.

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

const MyScreen = () => (
  <View>
    <Text>My Screen</Text>
  </View>
);

MyScreen.navigationOptions = {
  headerShown: false,
};

export default MyScreen;

Option 2: using StackNavigator options

If you are using a StackNavigator to manage your screens, you can also hide the header by setting headerMode to 'none' in the StackNavigator options. This will remove the header from all screens in the stack.

import { createStackNavigator } from 'react-navigation';
import MyScreen from './MyScreen';

const AppNavigator = createStackNavigator({
  Home: {
    screen: MyScreen,
    navigationOptions: {
      title: 'Home',
    },
  },
}, {
  headerMode: 'none',
});

export default AppNavigator;

Option 3: using navigationOptions headerStyle

If you want to hide the header on a specific screen but keep it visible on other screens, you can use the headerStyle option in the navigationOptions object and set its height to 0.

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

const MyScreen = () => (
  <View>
    <Text>My Screen</Text>
  </View>
);

MyScreen.navigationOptions = {
  headerStyle: {
    height: 0,
  },
};

export default MyScreen;

These are some of the ways you can hide the header in React Navigation. Choose the option that best fits your specific use case and customize it to achieve the desired result.