'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:

Solution 1:^[1]

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 2:^[2]

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 3:^[3]

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

 static navigationOptions = { header: null }

Solution 4:^[4]

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 5:^[5]

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 6:^[6]

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 7:^[7]

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 8:^[8]

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 9:^[9]

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 10:^[10]

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 11:^[11]

This worked for me:

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

Solution 12:^[12]

You can hide header like this:

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

Solution 13:^[13]

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>

Solution 14:^[14]

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

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

Solution 15:^[15]

In your targeted screen you have to code this !

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

Solution 16:^[16]

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 17:^[17]

 <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 18:^[18]

This is working for stack navigation

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

Solution 19:^[19]

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 20:^[20]

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 21:^[21]

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

//header:null will be removed from upcoming versions

Solution 22:^[22]

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

screenOptions={ { headerShown: false } }

Solution 23:^[23]

This will remove the header from the component class.

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

Solution 24:^[24]

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 25:^[25]

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

Solution 26:^[26]

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:^[27]

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:^[28]

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 29:^[29]

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

});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	JoÃ£o Paulo Motta
Solution 2	Abhishek Kumar
Solution 3	Vaibhav KB
Solution 4
Solution 5
Solution 6	Chilarai
Solution 7	Waqar UlHaq
Solution 8	Cevin Ways
Solution 9	Narayan Shrestha
Solution 10	Ernestyno
Solution 11	Diego Santa Cruz MendezÃº
Solution 12	Arun D
Solution 13	pistou
Solution 14	Sanan Ali
Solution 15
Solution 16	Vencovsky
Solution 17	mainak
Solution 18	Sheyan Sandaruwan
Solution 19	Waqar UlHaq
Solution 20	Vladyslav Zavalykhatko
Solution 21	J. Scott Elblein
Solution 22	Mehrad Farahnak
Solution 23	Nadeeshan Herath
Solution 24	Abhishek Kumar Pandey
Solution 25	Faramarz
Solution 26	donald
Solution 27	lamazing
Solution 28	gasolin
Solution 29

'Hide header in stack navigator React navigation

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

v6

v5

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]