Hide header in stack navigator React navigation

Question

I'm trying to switch screens using both stack and tab navigator.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

In this case stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options like::

navigationOptions: { header: { visible: false } }

i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like:

Perry · Accepted Answer · 2020-05-02T19:11:03.340

830

UPDATE as of version 5

As of version 5 it is the option headerShown in screenOptions

Example of usage:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example:

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

See also the blog about version 5

UPDATE
As of version 2.0.0-alpha.36 (2019-11-07),
there is a new navigationOption: headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Old answer

I use this to hide the stack bar (notice this is the value of the second param):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

When you use the this method it will be hidden on all screens.

In your case it will look like this:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

edited May 02 '20 at 19:11

answered Jun 22 '17 at 13:49

Perry

11,172
2
27
37

1

Working perfectly! thanks for ur answer but i have one problem after adding this that is:: switching stacknavigator to tabnavigator its working fine. if i want to show header when i am switching screen from tabnavigator to stacknaviagtor what should i do? – Avijit Dutta Jun 22 '17 at 14:19
2

Hmm, that is a great Question. To be honest I don't know that. You can Try @Dpkstr answer on the screen you want to show it, instead of null it would be true. – Perry Jun 22 '17 at 14:30
Hmm, i already tried this but it was also not working... thanks for your first answer. I will make the second functionality using a button just for now. – Avijit Dutta Jun 22 '17 at 14:40
how to show and hide the header dynamically when click on button inside the component. If we give static navigationOptions = { header: null }. I will hide the header completely. I want to show or hide when click on some button – Venkatesh Somu Jul 06 '18 at 12:34
@BrodaNoel are you using version 2.x? – Perry Jul 24 '18 at 11:09
there is a section in here about 'Overiding Shared NavigationOptions' https://reactnavigation.org/docs/en/headers.html – Joey Gough Aug 20 '18 at 23:12
how to disable header for tabnavigator instead of full stack ? – Kartiikeya Jul 19 '19 at 05:31
@Kartiikeya So the simple way is to just create a new navigator with the options second param as in the answer. See this documentation page: https://reactnavigation.org/docs/en/common-mistakes.html#explicitly-rendering-more-than-one-navigator And than search for the example that show the correct way. That will show you how it works with multiple navigators. Let me know it that works or not – Perry Jul 19 '19 at 20:35
The new navigationOption is `headerShown`, note camelcasing (not headershown) – 46and2 Dec 31 '19 at 18:57
1

If he wants to hide header for a specific screen in v5+ should use `options` prop like this `` – Oliver D Mar 29 '20 at 21:55
To show a transparent header with just the 'back' carat try using. `options={{headerShown: true, headerTransparent: true, headerTitle: null, headerBackTitle: ' '}}` – Kelton Temby Jul 28 '20 at 03:11
you can just use `headerMode="none"` :) – Muh Ghazali Akbar Feb 16 '21 at 12:38
@MuhGhazaliAkbar In the upcoming version 6 headerMode will be deprecated, see https://github.com/react-navigation/react-navigation/issues/8981 – Perry Mar 08 '21 at 19:06
This only hides the header of the stack screens, but not the the parent's (tab navigator header) – 6rchid Nov 25 '21 at 00:49

score 136 · Answer 2 · edited Feb 24 '21 at 16:26

136

On v4 simply use below code in the page you want to hide the header

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

refer to Stack Navigator

edited Feb 24 '21 at 16:26

João Paulo Motta

3,765
1
19
18

answered Jun 22 '17 at 13:52

Dpkstr

1,649
1
10
6

It is worikng fine, but one problem is that when screen switch into tabNavigator from stacknavigator ( as per mention on my question components like OTPverification screen to list screen on that time both headers are showing – Avijit Dutta Jun 22 '17 at 14:16
Can you tell me how exactly you are navigating to List – Dpkstr Jun 23 '17 at 08:43

score 29 · Answer 3 · answered Feb 27 '20 at 09:50

In the given solution Header is hidden for HomeScreen by- options={{headerShown:false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Ajay Sivan · Answer 4 · 2022-03-15T21:33:21.953

v6

headerMode prop has been removed from react navigation 6.x. Now we can use headerShown option to achieve the same result.

<Stack.Navigator screenOptions={{ headerShown: false }}>
   {/* Your screens */}
</Stack.Navigator>

v5

In react navigation 5.x you can hide the header for all screens by setting the headerMode prop of the Navigator to false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

score 25 · Answer 5 · answered Nov 18 '17 at 15:13

25

Just add this into your class/component code snippet and Header will be hidden

 static navigationOptions = { header: null }

answered Nov 18 '17 at 15:13

Vaibhav KB

1,695
19
17

score 20 · Answer 6 · answered Oct 02 '22 at 08:35

20

{/*✌✌✌Login Screen✌✌✌ */}

 <Stack.Screen 
     options={{ headerShown:false }}
  name="Login" component={LoginScreen} />

answered Oct 02 '22 at 08:35

Asim Khan

309
3
2

score 17 · Answer 7 · 2018-07-25T15:48:40.917

17

If your screen is a class component

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

code this in your targeted screen as the first method (function).

edited Jul 25 '18 at 15:48

answered Jun 07 '18 at 11:53

2

right, `header: () => null` is the correct way, otherwise you get a header glitch when loading the page – Cristian Tr Jul 13 '18 at 21:54

score 17 · Answer 8 · edited May 18 '22 at 08:43

17

React Native Navigation v6.x May 2022

put false in headerShown property in options prop of Screen

        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>

P.S
const Stack = createNativeStackNavigator().

edited May 18 '22 at 08:43

Faramarz Qoshchi

1,292
1
13
24

answered May 13 '22 at 23:00

Muneeb Ejaz

696
6
11

score 15 · Answer 9 · edited Nov 18 '21 at 12:26

If you use react-navigation Version: 6.x you can use like that. here, SignInScreen header will be hidden with the following snippet

options={{  
   headerShown: false,  
}}

Complete script should be

import {createStackNavigator} from '@react-navigation/stack';  
import SignInScreen from '../screens/SignInscreen';  
import SignUpScreen from '../screens/SignUpScreen';  
const Stack = createStackNavigator();    
function MyStack() {  
 return (   
   <Stack.Navigator>   
     <Stack.Screen   
       name="Sing In"  
       component={SignInScreen}  
       options={{  
         headerShown: false,  
       }}   
     />  
     <Stack.Screen name="Sing Up" component={SignUpScreen} />   
   </Stack.Navigator>   
 );    
}  
export default function LoginFlowNavigator() {    
 return <MyStack />;   
}

score 11 · Answer 10 · answered Feb 21 '18 at 06:35

11

If you want to hide on specific screen than do like this:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

answered Feb 21 '18 at 06:35

Waqar UlHaq

6,144
2
34
42

score 11 · Answer 11 · answered Apr 07 '19 at 14:06

11

I am using header : null instead of header : { visible : true } i am using react-native cli. this is the example :

static navigationOptions = {
   header : null   
};

answered Apr 07 '19 at 14:06

Cevin Ways

984
11
13

score 10 · Answer 12 · answered Nov 05 '19 at 06:03

Add new navigationOptions object in the stackNavigator.

Try this :

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Hope it helps.

score 8 · Answer 13 · answered Mar 17 '18 at 23:02

If someone searching how to toggle header so in componentDidMount write something like:

  this.props.navigation.setParams({
      hideHeader: true,
  });

When

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

And somewhere when event finish job:

this.props.navigation.setParams({
  hideHeader: false,
});

score 8 · Answer 14 · answered Mar 09 '19 at 03:36

8

This worked for me:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

answered Mar 09 '19 at 03:36

Diego Santa Cruz Mendezú

4,325
39
27

score 8 · Answer 15 · answered Feb 16 '20 at 05:59

8

You can hide header like this:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />

answered Feb 16 '20 at 05:59

Arun D

2,369
5
27
39

score 7 · Answer 16 · edited Mar 13 '22 at 17:55

7

Try the best approach, below code works for me.

options={{
    headerShown: false,
}}

Put the above code in the <Stack.Screen tag.

<NavigationContainer>
    <Stack.Navigator>
        <Stack.Screen name="LogOut" component={LogOut} options={{ headerShown: false }} />
    </Stack.Navigator>
</NavigationContainer>

edited Mar 13 '22 at 17:55

pistou

2,799
5
33
60

answered Nov 18 '21 at 14:10

Abdul Basit Rishi

2,268
24
30

score 5 · Answer 17 · answered Jul 12 '19 at 17:58

All the answer are showing how to do it with class components, but for functional components you do:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

If you remove the header your component may be on places where you can't see it (when the phone don't have square screen) so it's important to use it when removing the header.

score 5 · Answer 18 · answered Nov 29 '20 at 20:23

5

For me navigationOptions didn't work. The following worked for me.

<Stack.Screen name="Login" component={Login}
      options={{
               headerShown: false
              }}
     />

answered Nov 29 '20 at 20:23

Sanan Ali

2,349
1
24
34

Pheng Sengvuthy · Answer 19 · 2018-05-31T10:40:43.103

4

In your targeted screen you have to code this !

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

edited May 31 '18 at 10:40

answered May 31 '18 at 10:39

Pheng Sengvuthy

260
2
9

score 4 · Answer 20 · answered Feb 22 '20 at 16:46

4

 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} works for me.

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",

answered Feb 22 '20 at 16:46

mainak

1,886
2
9
19

score 4 · Answer 21 · answered Mar 28 '20 at 08:36

4

This is working for stack navigation

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

answered Mar 28 '20 at 08:36

Sheyan Sandaruwan

147
1

score 3 · Answer 22 · edited Feb 26 '20 at 12:24

3

If you only want to remove it from one screen in react-native-navigation then:

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>

edited Feb 26 '20 at 12:24

Waqar UlHaq

6,144
2
34
42

answered Feb 26 '20 at 10:53

Mehdi Raza

313
3
15

score 3 · Answer 23 · edited Jun 18 '20 at 13:10

You can hide StackNavigator header like this:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

score 2 · Answer 24 · edited Feb 02 '20 at 19:17

2

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

edited Feb 02 '20 at 19:17

J. Scott Elblein

4,013
15
58
94

answered Feb 02 '20 at 18:58

Farrukh Taqveem Haider

123
2
5

score 2 · Answer 25 · answered Jul 22 '20 at 11:51

2

if you want remove the header from all screen goto app.js and add this code to Stack.Navigator

screenOptions={ { headerShown: false } }

answered Jul 22 '20 at 11:51

Mehrad Farahnak

1,033
1
9
18

score 2 · Answer 26 · answered Aug 26 '20 at 21:20

2

This will remove the header from the component class.

export default class SampleClass extends Component {
    navigationOptions = {
       headerMode: 'none'
    }
...
}

answered Aug 26 '20 at 21:20

Nadeeshan Herath

445
5
9

score 2 · Answer 27 · answered Jan 07 '21 at 05:18

2

With latest react-navigation-stack v4 you can hide the header with

import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator({
 stackName: {
  screen:ComponentScreenName,
  navigationOptions: {
    headerShown:false
  }
 }
})

answered Jan 07 '21 at 05:18

Abhishek Kumar Pandey

447
1
4
17

score 1 · Answer 28 · answered Dec 01 '18 at 20:10

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

score 1 · Answer 29 · answered Jun 21 '20 at 22:40

In the latest version of react-navigation this works to hide the header on every screen: headerMode={'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>

score 1 · Answer 30 · answered Jun 22 '20 at 03:26

1

for 4.x, the header: null is deprecated, should use headerShown: false instead

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

answered Jun 22 '20 at 03:26

gasolin

2,196
1
18
20

Manan Gadhiya · Answer 31 · 2020-06-27T11:14:56.213

For the single screen, you can set header:null or headerShown: false in createStackNavigator like this

const App = createStackNavigator({
 First: {
screen: Home,
navigationOptions: {
  header: null,
                   },
       },
});

Hide the header from all the screens in once using defaultNavigationOptions

const App = createStackNavigator({

First: {
  screen: HomeActivity,
},
},

{
defaultNavigationOptions: {
  header: null
},

});

score 1 · Answer 32 · answered Apr 20 '22 at 13:25

/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/

const {Navigator, Screen } =createNativeStackNavigator();

export function AuthRoutes(){
    return (
        <Navigator
            screenOptions={
                
                {
                    contentStyle:{
                        backgroundColor: 'transparent'
                    },
                    headerShown: false
                }
            }    
        >
            

        </Navigator>
    )

}

score 1 · Answer 33 · answered May 02 '22 at 10:19

You can use headerShown:false in the new updated version only ( react-naviagion version 6 )

import { createStackNavigator } from '@react-navigation/stack';
    const Util = createStackNavigator();
    const UtilStack = () =>{
        return(
            <Util.Navigator>
                <Util.Screen name='Splash' component={Splash} options={{ headerShown: false }}/>
            )
            <Util.Navigator>
     }

score 0 · Answer 34 · answered May 11 '20 at 06:02

It's important to match which version of react-navigation library you're using to the solution as they're all different. For those still using react-navigation v1.0.0 for some reason like me, both these worked:

For disabling/hiding header on individual screens:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

For disabling/hiding all screens at once, use this:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

score 0 · Answer 35 · edited Apr 05 '21 at 11:44

0

On V4 you have to use this:

headerLeft: () => { }

This is deprecated:

header: null

edited Apr 05 '21 at 11:44

Filip Huhta

2,043
7
25

answered Apr 05 '21 at 02:51

Marcos Berrutto

11
1

score 0 · Answer 36 · answered Aug 01 '22 at 06:00

One more way to hide the header from a particular screen is try to use useLayoutEffect from React. Like this:

import { View, Text, Button } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../hooks/userAuth";
const HomeScreen = () => {
  const navigation = useNavigation();
  const { logout } = useAuth();
  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <View>
      <Text>I am the HomeScreen</Text>
      <Button
        title="Go to Chat Screen"
        onPress={() => navigation.navigate("Chat")}
      />

      <Button title="Logout" onPress={logout} />
    </View>
  );
};

export default HomeScreen;

This generally allows to hide component header and it will execute when the screen will render.

score 0 · Answer 37 · answered May 11 '23 at 07:54

  <Stack.Navigator initialRouteName="splash">
        {
          screen_data?.map((item: any) => {
            return <Stack.Screen name={item?.name} component={item?.component} options={{ headerShown: false }}></Stack.Screen>
          })
        }

      </Stack.Navigator>

score 0 · Answer 38 · answered Jun 26 '23 at 20:19

For Version 6.x.x

headerMode="none" is removed in favor of headerShown: false Previously, you could pass headerMode="none" prop to hide the header in a stack navigator. However, there is also a headerShown option which can be used to hide or show the header, and it supports configuration per screen.

So instead of having 2 ways to do very similar things, we have removed headerMode="none" in favor of headerShown: false. To get the old behavior, specify headerShown: false in screenOptions:

<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>

Hide header in stack navigator React navigation

38 Answers38

v6

v5

Linked

Related