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

1) To make the back button disappear in react-navigation v2 or newer:

v2-v4:

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

v5:

{          navigationOptions:  {     title: 'MyScreen',     headerLeft: ()=> null, // Note: using just `null` instead of a function should also work but could trigger a TS error } 

2) If you want to clean navigation stack:

Assuming you are on the screen from which you want to navigate from:

If you are using react-navigation version v5 or newer you can use navigation.reset or CommonActions.reset:

 // Replace current navigation state with a new one,  // index value will be the current active route:  navigation.reset({   index: 0,   routes: [{ name: 'Profile' }], }); 

Source and more info here: https://reactnavigation.org/docs/navigation-prop/#reset

Or:

navigation.dispatch(   CommonActions.reset({     index: 1,     routes: [       { name: 'Home' },       {         name: 'Profile',         params: { user: 'jane' },       },     ],   }) ); 

Source and more info here: https://reactnavigation.org/docs/navigation-actions/#reset

For older versions of react-navigation:

v2-v4 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); 

v1 use NavigationActions.reset

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

http://reactnative.dev/docs/backhandler.html

or if you want to use hooks:

https://github.com/react-native-community/hooks#usebackhandler

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

Additional sources: thank you to the users that added comments below and helped keeping this answer updated for v5.

Answer 2

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 back button by setting headerLeft: null in navigationOptions