CODEWITHSUNDEEP
react-nativereact-navigationexpo
Apolo
Apolo

Reputation: 4050

Expo - unwanted white bar at top with back button

I'm trying to build an app with expo and react-native.

I have a white bar at the top with a back button. I don't understand why it is there, is this a feature of expo, react-native or react-navigation that I need to disable ?

I tried searching for any "*Bar*" component but there's really nothing, my App.js only render my own bar with a component view underneath it.

Screenshot: https://ibb.co/QQ5fMDP

AppNavigator.js:

export default createAppContainer(
  createStackNavigator({
    [ROUTES.Login]: LoginScreen,
    [ROUTES.Some]: SomeScreen,
  }),
  {
    initialRouteName: ROUTES.Login,
    defaultNavigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
    navigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
  },
);

Upvotes: 1

Views: 2487

Answers (1)

Kraylog
Kraylog

Reputation: 7563

This is likely a header that react-navigation adds automatically to the stack navigator. If you don't want to use it, you can remove it globally

createStackNavigator({
  ...,
},{
  defaultNavigationOptions: {
    headerMode: 'none'
  }
});

or screen by screen:

MyComponent.navigationOptions = {
  headerMode: 'none'
};

See more in the react-navigation API docs.

Edit

Looks like there's a typo in the way you set up your navigation. You'll need to change it to this:

export default createAppContainer(
  createStackNavigator({
    [ROUTES.Login]: LoginScreen,
    [ROUTES.Some]: SomeScreen,
  },
  {
    initialRouteName: ROUTES.Login,
    defaultNavigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
    navigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
  })
);

Note that createStackNavigator now has two parameters, as needed.

Upvotes: 3

Related Questions