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?

Aravind S · Accepted Answer · 2020-03-17T05:17:49.277

59

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.

edited Mar 17 '20 at 05:17

answered Jul 02 '18 at 05:17

Aravind S

2,347
2
12
21

@JustAhead Awesome...if it helped, upvote and accept the answer..thanks! – Aravind S Jul 02 '18 at 05:21
@JustAhead any issues with my answer? – Aravind S Jul 02 '18 at 09:35
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" – Just Ahead Jul 02 '18 at 09:50
you should gain 15 points or more to upvote..but you can accept the answer i guess – Aravind S Jul 02 '18 at 09:51
6

Deprecation in 'navigationOptions': - 'header: null' will be removed in a future version. Use 'headerShown: false' instead – Jonas de Herdt Mar 16 '20 at 17:24

asukiaaa · Answer 2 · 2019-06-11T02:07:00.103

34

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

edited Jun 11 '19 at 02:07

answered Mar 18 '19 at 05:48

asukiaaa

1,594
17
19

6

Thanks, this is the only answer that worked for me in react-navigation 3.5.1 – Dror Bar Mar 22 '19 at 23:45
3

Same as @Dror Bar, this is the only solution which worked for me using react-navigation@3.5.1 – gmoz22 Aug 27 '19 at 22:52
When I use two, nested one in the other, createStackNavigators, this works whilte `navigationOptions` didn't. – Brian Hong Oct 15 '19 at 21:32

score 4 · Answer 3 · answered Mar 18 '19 at 05:57

4

Can you try:

static navigationOptions = {
    header: null
}

Inside your screen component.

answered Mar 18 '19 at 05:57

Stiven Castillo

370
1
7
20

score 2 · Answer 4 · answered Jul 02 '18 at 05:26

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.

score 2 · Answer 5 · answered Jul 15 '20 at 05:55

2

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

answered Jul 15 '20 at 05:55

chris

194
2
10

Kishan Oza · Answer 6 · 2018-07-02T06:51:44.063

1

I used following code to hide the header.

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

    }

edited Jul 02 '18 at 06:51

answered Jul 02 '18 at 05:50

Kishan Oza

1,707
1
16
38

METALHEAD · Answer 7 · 2020-04-26T05:08:41.677

1

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>

edited Apr 26 '20 at 05:08

answered Apr 25 '20 at 16:00

METALHEAD

2,734
3
22
37

`headerMode: 'none'` is not needed, just `headerShown : false` is enough. – Daniel Danielecki Nov 03 '21 at 08:12

score 0 · Answer 8 · answered Aug 25 '20 at 15:56

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/

score 0 · Answer 9 · answered Jul 31 '21 at 04:54

0

navigationOptions: { 
    header: null
}

is deprecated. The new is

navigationOptions: { 
    headerShown: false
}

Reference: https://stackoverflow.com/a/62732551/8724367

answered Jul 31 '21 at 04:54

sareno

576
8
10

score 0 · Answer 10 · answered Nov 03 '21 at 08:15

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

How to hide header of createStackNavigator on React Native?

10 Answers10