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!
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.
