React native Question posted in
The official React Native documentation can be found here.

Cannot disable back button in React Native on Android

In my App.js I have the following:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Main from './js/screens/main';
import Page from './js/screens/page';

const Stack = createNativeStackNavigator();

const headerOptions = {
  headerLeft: () => null,
};

export default () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={headerOptions}>
        <Stack.Screen
          name="Main"
          component={Main}
        />
        <Stack.Screen
          name="Page"
          component={Page}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

This disables the back button on both the Main and the Page screens if I run in the web. When I run on Android, however, the back button appears on the Page screen, although not the Main screen. How do I fix this?

Tags:

2

Answers


  1. 0

    Did you try with "Platform" ?

    You need to add import "Platform", next to "NavigationContainer"

    import { NavigationContainer, Platform } from '@react-navigation/native';

    and after check with a simple if, just after your variable headerOptions add that :

    if (Platform.OS === 'android')
headerOptions.headerLeft = () => null;

    If it’s not good after that, try with params headerBackVisible

    Login or Signup to reply.
  2. 0

    Could you try giving the "options={{ headShown: false }}" property to the page you don’t want to appear?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search