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-02 19:11:03Z

863

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 2, 2020 at 19:11

answered Jun 22, 2017 at 13:49

Perry

11.6k2 gold badges28 silver badges38 bronze badges

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
Commented Jun 22, 2017 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
Commented Jun 22, 2017 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
Commented Jun 22, 2017 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
Commented Jul 6, 2018 at 12:34
1

If he wants to hide header for a specific screen in v5+ should use options prop like this <Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
– Oliver D
Commented Mar 29, 2020 at 21:55

| Show 9 more comments

João Paulo Motta · Accepted Answer · 2021-02-24 16:26:14Z

137

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, 2021 at 16:26

João Paulo Motta

3,8831 gold badge20 silver badges18 bronze badges

answered Jun 22, 2017 at 13:52

Dpkstr

1,6591 gold badge10 silver badges6 bronze badges

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
Commented Jun 22, 2017 at 14:16
Can you tell me how exactly you are navigating to List
– Dpkstr
Commented Jun 23, 2017 at 8:43

Add a comment |

Abhishek Kumar · Accepted Answer · 2020-02-27 09:50:48Z

30

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>

answered Feb 27, 2020 at 9:50

Abhishek Kumar

1,00512 silver badges11 bronze badges

Add a comment |

Ajay Sivan · Accepted Answer · 2022-03-15 21:33:21Z

29

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>

edited Mar 15, 2022 at 21:33

answered Feb 22, 2020 at 16:53

Ajay Sivan

2,9073 gold badges33 silver badges59 bronze badges

Add a comment |

Vaibhav KB · Accepted Answer · 2017-11-18 15:13:44Z

25

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

 static navigationOptions = { header: null }

answered Nov 18, 2017 at 15:13

Vaibhav KB

1,73519 silver badges17 bronze badges

Add a comment |

Faramarz Qoshchi · Accepted Answer · 2022-05-18 08:43:30Z

23

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, 2022 at 8:43

Faramarz Qoshchi

1,5021 gold badge15 silver badges29 bronze badges

answered May 13, 2022 at 23:00

Muneeb Ejaz

86410 silver badges11 bronze badges

Add a comment |

Asim Khan · Accepted Answer · 2022-10-02 08:35:46Z

21

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

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

answered Oct 2, 2022 at 8:35

Asim Khan

3653 silver badges2 bronze badges

Add a comment |

score 17 · Accepted Answer · 2018-07-25 15:48:40Z

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, 2018 at 15:48

answered Jun 7, 2018 at 11:53

user7023664

2

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

Add a comment |

Chilarai · Accepted Answer · 2021-11-18 12:26:36Z

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 />;   
}

Waqar UlHaq · Accepted Answer · 2018-02-21 06:35:01Z

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, 2018 at 6:35

Waqar UlHaq

6,3322 gold badges35 silver badges43 bronze badges

Add a comment |

Cevin Ways · Accepted Answer · 2019-04-07 14:06:15Z

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 7, 2019 at 14:06

Cevin Ways

98411 silver badges13 bronze badges

Add a comment |

Narayan Shrestha · Accepted Answer · 2019-11-05 06:03:23Z

10

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.

answered Nov 5, 2019 at 6:03

Narayan Shrestha

7619 silver badges19 bronze badges

Add a comment |

Ernestyno · Accepted Answer · 2018-03-17 23:02:44Z

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,
});

Diego Santa Cruz Mendezú · Accepted Answer · 2019-03-09 03:36:53Z

8

This worked for me:

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

answered Mar 9, 2019 at 3:36

Diego Santa Cruz Mendezú

4,5811 gold badge40 silver badges28 bronze badges

Add a comment |

Arun D · Accepted Answer · 2020-02-16 05:59:36Z

8

You can hide header like this:

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

answered Feb 16, 2020 at 5:59

Arun D

2,3895 gold badges27 silver badges40 bronze badges

Add a comment |

pistou · Accepted Answer · 2022-03-13 17:55:25Z

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, 2022 at 17:55

pistou

2,8575 gold badges34 silver badges62 bronze badges

answered Nov 18, 2021 at 14:10

Abdul Basit Rishi

2,36525 silver badges30 bronze badges

Add a comment |

Lonare · Accepted Answer · 2023-06-26 20:19:13Z

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>

Vencovsky · Accepted Answer · 2019-07-12 17:58:57Z

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.

Sanan Ali · Accepted Answer · 2020-11-29 20:23:24Z

5

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

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

answered Nov 29, 2020 at 20:23

Sanan Ali

3,1781 gold badge31 silver badges41 bronze badges

Add a comment |

Pheng Sengvuthy · Accepted Answer · 2018-05-31 10:40:43Z

4

In your targeted screen you have to code this !

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

edited May 31, 2018 at 10:40

answered May 31, 2018 at 10:39

Pheng Sengvuthy

2602 silver badges9 bronze badges

Add a comment |

mainak · Accepted Answer · 2020-02-22 16:46:16Z

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, 2020 at 16:46

mainak

2,2212 gold badges11 silver badges26 bronze badges

Add a comment |

Sheyan Sandaruwan · Accepted Answer · 2020-03-28 08:36:41Z

4

This is working for stack navigation

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

answered Mar 28, 2020 at 8:36

Sheyan Sandaruwan

1671 silver badge1 bronze badge

Add a comment |

Waqar UlHaq · Accepted Answer · 2020-02-26 12:24:52Z

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, 2020 at 12:24

Waqar UlHaq

6,3322 gold badges35 silver badges43 bronze badges

answered Feb 26, 2020 at 10:53

Mehdi Raza

3734 silver badges16 bronze badges

Add a comment |

Vladyslav Zavalykhatko · Accepted Answer · 2020-06-18 13:10:14Z

3

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>
    );
}

edited Jun 18, 2020 at 13:10

Vladyslav Zavalykhatko

16.8k10 gold badges70 silver badges103 bronze badges

answered Apr 28, 2020 at 4:52

Paresh chavda

3461 gold badge4 silver badges12 bronze badges

Add a comment |

J. Scott Elblein · Accepted Answer · 2020-02-02 19:17:40Z

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 2, 2020 at 19:17

J. Scott Elblein

4,16016 gold badges61 silver badges101 bronze badges

answered Feb 2, 2020 at 18:58

Farrukh Taqveem

1552 silver badges7 bronze badges

Add a comment |

Mehrad Farahnak · Accepted Answer · 2020-07-22 11:51:36Z

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, 2020 at 11:51

Mehrad Farahnak

1,2442 gold badges12 silver badges18 bronze badges

Add a comment |

Nadeeshan Herath · Accepted Answer · 2020-08-26 21:20:57Z

2

This will remove the header from the component class.

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

answered Aug 26, 2020 at 21:20

Nadeeshan Herath

4955 silver badges9 bronze badges

Add a comment |

Abhishek Kumar Pandey · Accepted Answer · 2021-01-07 05:18:02Z

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 7, 2021 at 5:18

Abhishek Kumar Pandey

4472 gold badges4 silver badges17 bronze badges

Add a comment |

donald · Accepted Answer · 2018-12-01 20:10:55Z

1

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,

};

answered Dec 1, 2018 at 20:10

donald

4789 silver badges19 bronze badges

Add a comment |

lamazing · Accepted Answer · 2020-06-21 22:40:52Z

1

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>

answered Jun 21, 2020 at 22:40

lamazing

5333 silver badges11 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Hide header in stack navigator React navigation

38 Answers 38

v6

v5

Not the answer you're looking for? Browse other questions tagged
javascript
react-native
react-navigation
expo
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

38 Answers 38

v6

v5

Not the answer you're looking for? Browse other questions tagged javascriptreact-nativereact-navigationexpo or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
react-native
react-navigation
expo
or ask your own question.