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
})
This question is related to
reactjs
react-native
navigation
react-navigation
The best option to handle this situation is to use SwitchNavigator provided by React navigation. The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that is needed in the authentication flow.
This is a typical way to implement it.
Here is a code implementation of above statements
import { createAppContainer, createSwitchNavigator } from 'react-navigation';_x000D_
import { createStackNavigator } from 'react-navigation-stack';_x000D_
import HomeScreen from "./homeScreenPath" _x000D_
import OtherScreen from "./otherScreenPath"_x000D_
import SignInScreen from "./SignInScreenPath" _x000D_
import SplashScreen from "./SplashScreenPath"_x000D_
_x000D_
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });_x000D_
_x000D_
const AuthStack = createStackNavigator({ SignIn: SignInScreen });_x000D_
_x000D_
_x000D_
export default createAppContainer(_x000D_
createSwitchNavigator(_x000D_
{_x000D_
Splash: SplashScreen,_x000D_
App: AppStack,_x000D_
Auth: AuthStack,_x000D_
},_x000D_
{_x000D_
initialRouteName: 'Splash',_x000D_
}_x000D_
)_x000D_
);
_x000D_
Now in SplashScreen you will check the token and navigate accordingly
import React from 'react';_x000D_
import {_x000D_
ActivityIndicator,_x000D_
AsyncStorage,_x000D_
StatusBar,_x000D_
StyleSheet,_x000D_
View,_x000D_
} from 'react-native';_x000D_
_x000D_
class SplashScreen extends React.Component {_x000D_
componentDidMount() {_x000D_
this.checkIfLogin();_x000D_
}_x000D_
_x000D_
// Fetch the token from storage then navigate to our appropriate place_x000D_
checkIfLogin = async () => {_x000D_
const userToken = await AsyncStorage.getItem('userToken');_x000D_
_x000D_
// This will switch to the App screen or Auth screen and this splash_x000D_
// screen will be unmounted and thrown away._x000D_
this.props.navigation.navigate(userToken ? 'App' : 'Auth');_x000D_
};_x000D_
_x000D_
// Render any loading content that you like here_x000D_
render() {_x000D_
return (_x000D_
<View>_x000D_
<ActivityIndicator />_x000D_
<StatusBar barStyle="default" />_x000D_
</View>_x000D_
);_x000D_
}_x000D_
}
_x000D_
Once you change routes in SwitchNavigator it removes the older route automatically and hence if you press the back button it will not take you to the auth/login screens anymore
ReactNavigation v 5.0 - Stack option:
options={{
headerLeft: () => {
return <></>;
}
}}
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
i think it is simple just add headerLeft : null
, i am using react-native cli, so this is the example :
static navigationOptions = {
headerLeft : null
};
headerLeft: null
This won't work in the latest react native version
It should be:
navigationOptions = {
headerLeft:()=>{},
}
For Typescript:
navigationOptions = {
headerLeft:()=>{return null},
}
We can fix it by setting headerLeft to null
static navigationOptions =({navigation}) => {
return {
title: 'Rechercher une ville',
headerLeft: null,
}
}
For react-navigation version 4.x
navigationOptions: () => ({
title: 'Configuration',
headerBackTitle: null,
headerLayoutPreset:'center',
headerLeft: null
})
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,
}
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.
In Latest Version (v2) works headerLeft:null
. you can add in controller's navigationOptions
as bellow
static navigationOptions = {
headerLeft: null,
};
react-navigation versions >= 1.0.0-beta.9
navigationOptions: {
headerLeft: null
}
For the latest version React Navigation 5 with Typescript:
<Stack.Screen
name={Routes.Consultations}
component={Consultations}
options={{headerLeft: () => null}}
/>
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,
}
},
},
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/navigation-actions#reset
This solution works for react-navigator 1.0.0-beta.7
, however left:null
no longer works for the latest version.
In react-navigation versions 5.x, you can do it like this:
import { CommonActions } from '@react-navigation/native';
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Profile',
params: { user: 'jane' },
},
],
})
);
You can read more here.
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: " "
}
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');
Simply doing
headerLeft: null
might be deprecated by the time you read this answer. You should use following
navigationOptions = {
headerTitle : "Title",
headerLeft : () => {},
}
Source: Stackoverflow.com