How to hide header of createStackNavigator on React Native?

Question

I want to hide header because I already have styled Toolbar in code:

import {createStackNavigator}
from \'react-navigation\'
const AppStackNavigator = createStac         


        

Answer 1

try this
options ={{ header: () => {}}}
since you are explicitly not providing any argument to header function, it won't show any header.
For more information refer this: react native docs

Answer 2

To disable headers for all views in a createStackNavigator, you can use headerMode option.

const AppStackNavigator = createStackNavigator({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
},
{
  headerMode: 'none',
})

Reference: StackNavigatorConfig - createStackNavigator - React Navigation

Answer 3

Can you try:

static navigationOptions = {
    header: null
}

Inside your screen component.

Answer 4

update your code like this code

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            header: null,
        },
    },
})

and if you dont want the header for all screens, then

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage,
    },
},
{
    navigationOptions: {
        header: null,
    },
})

Note: This solution is for an old version of React Navigation.

Answer 5

All the answers I could find were from React navigation v4 for some reason, which doesn't work in v5. After spending some time on it I figured out a way to hide toolbar in v5. Here it is:

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

...

const Stack = createStackNavigator();

....
//and inside render
render(){
    return (
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen
                name="Home"
                component={HomeScreen}
                options={{
                  title: "Home",
                  headerShown: false,
                }}
              />
}

headerShown: false, this will do the trick

If you need help with migrating from v4 to v5 -> https://reactnavigation.org/docs/upgrading-from-4.x/

Answer 6

2020 UPDATE - REACT NAVIGATION 5+

Using header : null will not work anymore. In the options you need to set both headerMode to none along with headerShown to false as below:

<AuthStack.Navigator>
   <AuthStack.Screen name="AUTH" component={AuthScreen} options={{headerMode: 'none', headerShown : false}}/>
</AuthStack.Navigator>