Disable back button in react navigation

Question

I'm using react native navigation (react-navigation) StackNavigator. it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the Login screen. Does anyone know how it can be hidden on the screen after the login screen? BTW, I'm also hiding it in the login screen by using:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

Answer 1

For react-navigation version v2 or newer

to make the back button disappear:

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

If you want to clean navigation stack too, you can do something like this (assuming you are on the screen from which you want to navigate from):

use StackActions.reset(...)

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

More info here: https://reactnavigation.org/docs/en/stack-actions.html

For android you will also have to disable the hardware back button using the BackHandler:

https://stackoverflow.com/a/40146089/1979861

otherwise the app will close at android hardware back button press if navigation stack is empty.

Note: In the old react-navigation v1 NavigationActions.reset was used instead of StackActions.reset.

Answer 2

You can hide the back button using left:null, but for android devices it's still able to go back when the user presses the back button. You need to reset the navigation state and hide the button with left:null

Here are the docs for resetting navigation state: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

This solution works for react-navigator 1.0.0-beta.7, however left:null no longer works for the latest version.

Answer 3

We need to set false to the gesturesEnabled along with headerLeft to null. Because we can navigate back by swiping the screen as well.

navigationOptions:  {
        title: 'Title',
        headerLeft: null,
        gesturesEnabled: false,
}

Answer 4

Have you considered using this.props.navigation.replace( "HomeScreen" ) instead of this.props.navigation.navigate( "HomeScreen" ).

This way you are not adding anything to the stack. so HomeScreen won't wave anything to go back to if back button pressed in Android or screen swiped to the right in IOS.

More informations check the Documentation. And of course you can hide the the back button by setting headerLeft: null in navigationOptions

Answer 5

using the BackHandler from react native worked for me. Just include this line in your ComponentWillMount:

BackHandler.addEventListener('hardwareBackPress', function() {return true})

it will disable back button on android device.

Answer 6

react-navigation versions >= 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}

Answer 7

found it myself ;) adding:

  left: null,

disable the default back button.

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },

Answer 8

The SwitchNavigator would be the way to accomplish this. SwitchNavigator resets the default routes and unmounts the authentication screen when the navigate action is invoked.

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

After the user goes to the SignInScreen and enters their credentials, you would then call

this.props.navigation.navigate('App');

Answer 9

We can fix it by setting headerLeft to null

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}

Answer 10

In Latest Version (v2) works headerLeft:null. you can add in controller's navigationOptions as bellow

static navigationOptions = {
    headerLeft: null,
  };

Answer 11

For latest version of React Navigation, even if you use null in some cases it may still show "back" written!

Go for this in your main app.js under your screen name or just go to your class file and add: -

 static navigationOptions = {
        headerTitle:'Disable back Options',
        headerTitleStyle: {color:'white'},
        headerStyle: {backgroundColor:'black'},
        headerTintColor: 'red',
        headerForceInset: {vertical: 'never'},
        headerLeft: " "
      }

Answer 12

i think it is simple just add headerLeft : null , i am using react-native cli, so this is the example :

static navigationOptions = {
        headerLeft : null
    };