CODEWITHSUNDEEP
javascriptreact-nativefrontendreact-navigation
Cloie Park
Cloie Park

Reputation: 63

how to hide back button in React-navigation/react-native

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

Upvotes: 6

Views: 9489

Answers (5)

Reymundo Tenorio
Reymundo Tenorio

Reputation: 91

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

Upvotes: 9

Kishan Mishra
Kishan Mishra

Reputation: 169


    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.

Upvotes: 1

Gabriel Scalici
Gabriel Scalici

Reputation: 650

if it is StackNavigator default config, go to StackNavigator:

defaultNavigationOptions: { header: null, },

Upvotes: 1

Divye Shah
Divye Shah

Reputation: 767

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

Upvotes: 1

NULL SWEΔT
NULL SWEΔT

Reputation: 2037

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.

Upvotes: 2

Related Questions