I would like to hide the Back button in the top-left corner, but I don't have any idea how to do it with react-navigation or react-native.

Just tried to use static navigationOptions = { header: null } but the < Back button was still alive.

I was using Modal and it works, but I want to know how to hide < Back button without using Modal.

Thank you in advance!

I would like to hide the Back button in the top-left corner, but I don't have any idea how to do it with react-navigation or react-native.

Just tried to use static navigationOptions = { header: null } but the < Back button was still alive.

I was using Modal and it works, but I want to know how to hide < Back button without using Modal.

Thank you in advance!

• javascript
• react-native
• frontend
• react-navigation

5 Answers 5

Using headerLeft: () => <></> works great in iOS, but in Android was still displaying the default back button.

I was able to hide it by adding the headerBackVisible: false on the screenOptions of the Stack Navigator or you could include it on the options for every Stack Screen.

More info at https://reactnavigation.org/docs/native-stack-navigator/#headerbackvisible

I suppose you're using a StackNavigator and that you don't want a header.

You need to use headerMode: none in the StackNavigatorConfig. For example:

const ModalStack = createStackNavigator(
  {
    HomeScreen: { screen: Home },
    ModalScreen: { screen: Modal },
  },
  {
    headerMode: 'none',
    mode: 'modal',
  }
);

More info in the react-navigation docs.

It depends upon the react navigation version you're using, try this

const ModalStack = createStackNavigator(
{
  HomeScreen: { screen: Home },
  ModalScreen: { screen: Modal },
},
{
  headerMode: 'none',
  header: null
}
);

if it is StackNavigator default config, go to StackNavigator:

defaultNavigationOptions: { header: null, },

    const Stack = createStackNavigator(); 
    <Stack.Navigator screenOptions={{headerShown: false}}>

createStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. Now below Stack.Navigator, you can place your screens using <Stack.Screen name="Home" component={HomeScreen} />. In name, you can give any name, and in component give the name of your component.