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
})
1) To make the back button disappear in react-navigation v2 or newer:
v2-v4:
navigationOptions: {
title: 'MyScreen',
headerLeft: null
}
v5 or newer:
{
navigationOptions: {
title: 'MyScreen',
headerLeft: ()=> null,
// `headerLeft: undefined` should work too
// `headerLeft: null` should 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
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
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,
}