Hide header in stack navigator React navigation

JavascriptReact NativeReact NavigationExpo

Javascript Problem Overview

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:

enter image description here

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

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>

Solution 4 - Javascript

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

 static navigationOptions = { header: null }

Solution 5 - Javascript

If your screen is a class component

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

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

Solution 6 - Javascript

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>

Solution 7 - Javascript

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

Solution 8 - Javascript

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

Solution 9 - Javascript

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

static navigationOptions = {
   header : null   
};

Solution 10 - Javascript

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.

Solution 11 - Javascript

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

Solution 12 - Javascript

This worked for me:

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

Solution 13 - Javascript

You can hide header like this:

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

Solution 14 - Javascript

Try the best approach, below code works for me.

options={{
    headerShown: false,
}}

Put the above code in the 

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

Solution 15 - Javascript

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

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

Solution 16 - Javascript

> In your targeted screen you have to code this !

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

Solution 17 - Javascript

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.

Solution 18 - Javascript

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

Solution 19 - Javascript

This is working for stack navigation

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

Solution 20 - Javascript

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>

Solution 21 - Javascript

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

Solution 22 - Javascript

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

//header:null will be removed from upcoming versions

Solution 23 - Javascript

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

screenOptions={ { headerShown: false } }

Solution 24 - Javascript

This will remove the header from the component class.

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

Solution 25 - Javascript

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

Solution 26 - Javascript

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

Solution 27 - Javascript

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>

Solution 28 - Javascript

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

});

Solution 29 - Javascript

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

Solution 30 - Javascript

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

Solution 31 - Javascript

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

Solution 32 - Javascript

On V4 you have to use this:

headerLeft: () => { }

This is deprecated:

header: null

Solution 33 - Javascript

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

const {Navigator, Screen } =createNativeStackNavigator();

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

        </Navigator>
    )

}

Solution 34 - Javascript

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

Categories
Recommended Javascript Solutions
Recommended React Native Solutions
Recommended React Navigation Solutions
Recommended Expo Solutions

Previous Solution:

Docker "ERROR: could not find an available, non-overlapping IPv4 address pool among the defaults to assign to the network"

PythonDockerDocker Compose

Next Solution:

What exactly is the 'react-scripts start' command?

ReactjsNpmCreate React-AppReact Scripts

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAvijit DuttaView Question on Stackoverflow
Solution 1 - JavascriptPerryView Answer on Stackoverflow
Solution 2 - JavascriptDpkstrView Answer on Stackoverflow
Solution 3 - JavascriptAbhishek KumarView Answer on Stackoverflow
Solution 4 - JavascriptVaibhav KBView Answer on Stackoverflow
Solution 5 - Javascriptuser7023664View Answer on Stackoverflow
Solution 6 - JavascriptAjay SivanView Answer on Stackoverflow
Solution 7 - JavascriptRoshan WickramaarachchiView Answer on Stackoverflow
Solution 8 - JavascriptWaqar UlHaqView Answer on Stackoverflow
Solution 9 - JavascriptCevin WaysView Answer on Stackoverflow
Solution 10 - JavascriptNarayan ShresthaView Answer on Stackoverflow
Solution 11 - JavascriptErnestynoView Answer on Stackoverflow
Solution 12 - JavascriptDiego Santa Cruz MendezúView Answer on Stackoverflow
Solution 13 - JavascriptArun DView Answer on Stackoverflow
Solution 14 - JavascriptAbdul Basit RishiView Answer on Stackoverflow
Solution 15 - JavascriptSanan AliView Answer on Stackoverflow
Solution 16 - JavascriptPheng SengvuthyView Answer on Stackoverflow
Solution 17 - JavascriptVencovskyView Answer on Stackoverflow
Solution 18 - JavascriptmainakView Answer on Stackoverflow
Solution 19 - JavascriptSheyan SandaruwanView Answer on Stackoverflow
Solution 20 - JavascriptMehdi RazaView Answer on Stackoverflow
Solution 21 - JavascriptParesh ChavdaView Answer on Stackoverflow
Solution 22 - JavascriptFarrukh Taqveem HaiderView Answer on Stackoverflow
Solution 23 - JavascriptMehrad FarahnakView Answer on Stackoverflow
Solution 24 - JavascriptNadeeshan HerathView Answer on Stackoverflow
Solution 25 - JavascriptAbhishek Kumar PandeyView Answer on Stackoverflow
Solution 26 - JavascriptdonaldView Answer on Stackoverflow
Solution 27 - JavascriptlamazingView Answer on Stackoverflow
Solution 28 - JavascriptManan GadhiyaView Answer on Stackoverflow
Solution 29 - JavascriptPruthvi mohanView Answer on Stackoverflow
Solution 30 - JavascriptEdward TanView Answer on Stackoverflow
Solution 31 - JavascriptgasolinView Answer on Stackoverflow
Solution 32 - JavascriptMarcos BerruttoView Answer on Stackoverflow
Solution 33 - JavascriptilidiocnView Answer on Stackoverflow
Solution 34 - JavascriptMuneeb EjazView Answer on Stackoverflow