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 = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

What should I add to my code?

Fugitive

Answer 1

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.

Charades

@JustAhead Awesome...if it helped, upvote and accept the answer..thanks! – Charades

@JustAhead any issues with my answer? – Charades

No, works perfect, when I am trying to vote for your answer, it says me "Votes cast by those with less than 15 reputation, but do not change the publicly displayed post score" – Fugitive

you should gain 15 points or more to upvote..but you can accept the answer i guess – Charades

Deprecation in 'navigationOptions': - 'header: null' will be removed in a future version. Use 'headerShown: false' instead – Restitution

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

Eyeshot

Thanks, this is the only answer that worked for me in react-navigation 3.5.1 – Local

Same as @Dror Bar, this is the only solution which worked for me using [email protected] – Michaeu

When I use two, nested one in the other, createStackNavigators, this works whilte navigationOptions didn't. – Spunk

Answer 3

Can you try:

static navigationOptions = {
    header: null
}

Inside your screen component.

Detritus

Answer 4

For hiding headers for specific screens or globally, you can do

const StackNavigator = createStackNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            header: null // Will hide header for HomePage
        }
    }
}, {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack navigator,
        headerLeft: <HeaderLeft /> // Component to be displayed in left side of header (Generally it can be Hamburger)
        headerRight: <HeaderRight /> // Component to be displayed in right side of header
    }
})

Also note that, screen specific settings will override global settings. Hope, this helps.

Garlicky

Answer 5

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

Dandruff

Answer 6

I used following code to hide the header.

   {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack 

    }

Birnbaum

Answer 7

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>

Projector

headerMode: 'none' is not needed, just headerShown : false is enough. – Hydrogeology

Answer 8

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/

Incendiary

Answer 9

navigationOptions: { 
    header: null
}

is deprecated. The new is

navigationOptions: { 
    headerShown: false
}

Reference: https://mcmap.net/q/584028/-deprecation-in-quot-navigationoptions-quot-quot-header-null-quot-will-be-removed

Macy

Answer 10

React Navigation 6 (from October'21)

The solution below is not working anymore:

navigationOptions: {
  header: null,
},

Instead of navigationOptions, you want to use just options, and with headerShown set to true, which replaces the header set to null. The working solution:

options={{
  headerShown: true,
}}

Hydrogeology