CODEWITHSUNDEEP
javascriptreact-native
Gabriel Savian
Gabriel Savian

Reputation: 224

React Navigation header not hiding

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?

Upvotes: 0

Views: 970

Answers (3)

Gabriel Savian
Gabriel Savian

Reputation: 224

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.

Upvotes: 0

Zahra Mirali
Zahra Mirali

Reputation: 545

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

Upvotes: 1

Khurshid Ansari
Khurshid Ansari

Reputation: 5075

I am using following in my code:

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

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

Upvotes: 0

Related Questions