React Navigation header not hiding

Question

I have a react project and I have two navigators, I'm trying to remove the navigation bar, I tried two ways but no success. This is my App.js

const switchNavigator = createStackNavigator({
  loginFlow: createStackNavigator({
    Signin: {
      screen: SigninScreen,
      navigationOptions: {
        headerShown: 'false'
      }
    },
    Signup: {
      screen: SignupScreen,
    },
  },
  ),
  mainGrid: createStackNavigator({
    Account: AccountScreen,
    Bath: BathScreen,
    Eco: EcoBath,
    Electricity: ElectricityConsScreen,
    Water: WaterConsumptionScreen,
    Help: HelpScreen,
    Parents: ParentsControlScreen
  })
});

As you can see I tried o hide using the headerShown: 'false' I tried to change to 'hide' and doesn't seems to work. I tried to add separately like:

SigninScreen.navigationOptions = () => {
    return{ 
        header: () => false
    };
};

But didn't worked too. I tried to remove the arrow function and set like header: null and no success too. What can I do about this?

Does this answer your question? [Hide header in stack navigator React navigation](https://stackoverflow.com/questions/44701245/hide-header-in-stack-navigator-react-navigation) — Guruparan Giritharan, Sep 15 '20 at 11:36
You're right I checked now it's V4.4.0. Sorry for my mistake. — Gabriel Savian, Sep 15 '20 at 12:10
if you have multiple nested stackNavigator then use navigationOptions: { header: null }, for all of them — Zahra Mirali, Sep 15 '20 at 12:13

Zahra Mirali · Accepted Answer · 2020-09-15T12:15:44.040

if you are using react-navigation V5:

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

else:

hide header for 1 screen:

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

or

export default class HomePage extends Component {
    static navigationOptions = {
        header: null
    }
}

hide header for all screens:

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

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

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            headerShown: false
        },
    },
})

Tried all of these and didn't worked. I used these codes in my older projects and worked but it was just one navigator. — Gabriel Savian, Sep 15 '20 at 11:52
if you are using V5 then first solution should work, check my edited answer. — Zahra Mirali, Sep 15 '20 at 12:01

score 0 · Answer 2 · answered Sep 15 '20 at 11:43

0

I am using following in my code:

const AppStackNavigator = createStackNavigator ({
    Home: HomePageScreen
},
{
   headerMode: "none"
});

https://reactnavigation.org/docs/stack-navigator/#headermode

answered Sep 15 '20 at 11:43

Khurshid Ansari

4,638
2
33
52

score 0 · Answer 3 · answered Sep 15 '20 at 12:18

Mates I solved! I was using the Navigation v4. The problem was here

const switchNavigator = createStackNavigator({

Then I swapped t

const switchNavigator = createSwitchNavigator({

And Added

SigninScreen.navigationOptions = () => {
    return {
      header: false
    };
};

Now It's working like a charm, but all answers that you lads answered are correct. I used in the other versions. Thanks for your time lads.

React Navigation header not hiding

3 Answers3