Hide header in stack navigator React navigation

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:

34 Answers

1 2 Next

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

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

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

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> 

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

 static navigationOptions = { header: null } 

If your screen is a class component

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

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

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> 

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

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

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

static navigationOptions = { header : null }; 

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.

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

This worked for me:

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

You can hide header like this:

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

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> 

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

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

In your targeted screen you have to code this !

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

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.

 <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",

This is working for stack navigation

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

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> 

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

const MyNavigator = createStackNavigator({ FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } }, SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } } }); //header:null will be removed from upcoming versions 

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

screenOptions={ { headerShown: false } } 

This will remove the header from the component class.

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

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

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().

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

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>

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

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

2. Hide the header from all the screens in once using defaultNavigationOptions

   const App = createStackNavigator({ First: { screen: HomeActivity, }, }, { defaultNavigationOptions: { header: null }, }); 

1 2 Next