Remove top navigation bar for certain screens

Question

Is there a way of removing the top navigation bar for specific screens only? I am using react-navigation.

I already tried the following:

header: { visible: false }

but it only hides the navbar. The space of the navbar is still cannot be used.

Thanks in advance!

have you tried "header: null" instead? I used that to not show header in mine. — rabbit87, Sep 06 '17 at 02:39
Yeah that does it, but how about to remove it only on certain screens? — Jed, Sep 06 '17 at 02:53
The way I did it is to have navigationOptions for each screen. See my answer below for example. — rabbit87, Sep 06 '17 at 03:02

Dustin Spengler · Answer 1 · 2020-08-28T17:47:06.747

I use the headerShown flag like this:

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

 import Welcome from "./compenents/Welcome";
 import Home from "./compenents/Home";

 const Stack = createStackNavigator();

export default function App() {
   return (
      <NavigationContainer>
        <Stack.Navigator>
           <Stack.Screen name="Welcome" component={Welcome} options={{ headerShown: false }} />
           <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
      </NavigationContainer>
   );
}

score 45 · Accepted Answer · answered Sep 06 '17 at 03:01

45

This is an example of how I did mine using StackNavigator:

const stackN = StackNavigator({
    Screen1 : {
      screen: Screen1,
      navigationOptions: {
        header: null,
      }
    },
    Home : {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        title: 'Home',
        headerStyle: styles.headerStyle,
        headerTitle: <Text>Home</Text>,
        headerLeft : null,
        headerRight: null,
      })
    }, 
}, {headerMode: 'screen'})

So every screen have their own navigationOptions instead. There may be a way to share navigationOptions, but I haven't looked into it at the moment.

answered Sep 06 '17 at 03:01

rabbit87

3,165
2
20
29

Would be better if there's a way for the navigationOptions to be shared. I only want the navigation removed on the login and splash screen, the others it will be displayed. – Jed Sep 06 '17 at 03:21
After testing, your answer also satisfies the need of removing the navigation on certain views. What you do is just specify a navigation option on those certain views and put the `header: null` property. – Jed Sep 12 '17 at 09:05
what if I need to show Status Bar? If I add StatusBar component. its not showing – Nabeel K Sep 12 '18 at 12:49

score 11 · Answer 3 · answered Nov 27 '20 at 06:05

options={{ headerShown: false }}

you are done .. have a nice day

import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";
import NewsDetailScreen from "./screens/NewsDetailScreen";
import React from "react";
    
const HomeStack = createStackNavigator();

const HomeScreenStack = () => {
  return (
<HomeStack.Navigator >
  <HomeStack.Screen
    name="homeScreen"
    component={HomeScreen}
    options={{ title: "Home" }}
  />
  <HomeStack.Screen
    name="newsDetailScreen"
    component={NewsDetailScreen}
    options={{
      title: "News Detail",
      headerShown:false
    }}
  />
</HomeStack.Navigator>
  );
};

export default HomeScreenStack;

score 4 · Answer 4 · answered Dec 16 '18 at 13:16

4

When using createStackNavigator then top navigation bar can be removed as below.

const AppStack = createStackNavigator({ Home: MainTabNavigator }, { headerMode: 'none' });

answered Dec 16 '18 at 13:16

Waseem Sarwar

2,645
1
21
18

score 4 · Answer 5 · answered Mar 26 '19 at 12:55

Use navigationOptions: { header: null } to remove the top navigation bar.

Sample Code:

import { createStackNavigator, createAppContainer } from 'react-navigation';

import {Login} from './app/components/login/Login';
import {Register} from './app/components/register/Register';
import {Home} from './app/components/home/Home';

const AppNavigator = createStackNavigator(
    {
        Login: { 
                  screen: Login,
                  navigationOptions: {
                    header: null,
                  }
               },
        Register: { 
                    screen: Register, 
                    navigationOptions: {
                      header: null,
                    }  
                  },
        Home: { 
                screen: Home, 
                navigationOptions: {
                  header: null,
                }
              },
    },
    {
        initialRouteName: "Login"
    }
);

export default createAppContainer(AppNavigator);

score 4 · Answer 6 · answered Feb 28 '20 at 17:18

4

Use navigationOptions: { headerShown: false } instead of navigationOptions: { header: null } to remove the top navigation bar.

answered Feb 28 '20 at 17:18

Saurav Kumar

256
3
6

score 3 · Answer 7 · answered Mar 25 '20 at 16:43

3

"headerShown : false " in the latest React Native version

answered Mar 25 '20 at 16:43

Kunal

64
3

Was answered already below. Repeating answers does not make sense. – Giridhar Karnik Mar 28 '20 at 01:23
this one is much cleaner – MartianMartian Jan 06 '22 at 16:06

score 1 · Answer 8 · answered Nov 08 '20 at 12:18

1

2020 => v5 :

to delete title in all screens

Stack.Navigator.defaultProps = {
    headerMode: 'none',
};

answered Nov 08 '20 at 12:18

M_Badrah

437
5
6

Remove top navigation bar for certain screens

8 Answers8

Linked