7

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!

enter image description here

5 Answers 5

9

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

Sign up to request clarification or add additional context in comments.

2 Comments

headerBackVisible: false finally fixed this issue for me. Much appreciated.
that's working for native-stack.
2

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.

Comments

1

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

Comments

1

if it is StackNavigator default config, go to StackNavigator:

defaultNavigationOptions: { header: null, },

Comments

1

    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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.