React Navigation v5 Tutorial Series (Part 3): How to Hide Header in React Native

Last Updated on March 16, 2020.

It’s the third part of react navigation v5 tutorial series. In this blog post, I am going to share you how to hide header in react navigation v5 library.

React navigation 5.x is launched with many breaking changes with more features. I have already given a tutorial on how to navigate from one screen to another in react native. In this tutorial, I am not covering the installation of react navigation as you get the instructions here.

In this react native example, I have three files named App.js, FirstScreen.js and SecondScreen.js.

FirstScreen.js

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

export default class FirstScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Button
          title="Navigate"
          onPress={() => this.props.navigation.navigate('SecondScreen')}
        />
      </View>
    );
  }
}

SecondScreen.js

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

export default class SecondScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text> Second Screen </Text>
      </View>
    );
  }
}

So, we have created two screens. Now, I want to hide the header of the FirstScreen. I should use options props and headerShown to hide the header of a specific screen.

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import FirstScreen from './FirstScreen';
import SecondScreen from './SecondScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="FirstScreen"
          component={FirstScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen name="SecondScreen" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Following is the output where the header of the first screen is hidden.

Do you want to hide the header of a whole Stack Navigator? Then you should use both screenOptions and headerShown as given below.

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import FirstScreen from './FirstScreen';
import SecondScreen from './SecondScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer headerMode="none">
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="FirstScreen" component={FirstScreen} />
        <Stack.Screen name="SecondScreen" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Now, see the output where the headers of all the screens are hidden.

That’s it. I hope you find this react native tutorial helpful.

1 thought on “React Navigation v5 Tutorial Series (Part 3): How to Hide Header in React Native”

Leave a Reply

%d bloggers like this: