Disable back button in react navigation
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,
gestureEnabled: false,
}
1) To make the back button disappear in react-navigation
v5 or newer:
{
navigationOptions: {
title: 'MyScreen',
headerLeft: ()=> null,
// `headerLeft: undefined` should work too
// `headerLeft: null` should work but could trigger a TS error
}
NOTE:
v6 has an extra option:
headerBackVisible: false
Whether the back button is visible in the header. You can use it to show a back button alongside headerLeft if you have specified it.
https://reactnavigation.org/docs/native-stack-navigator/#headerbackvisible
v2-v4:
navigationOptions: {
title: 'MyScreen',
headerLeft: null
}
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.
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