I am junior in app development.
I just tried to logout in react native small project.
Then after I click the logout button, when I click the back button (Android device button), it goes to former screen again. Of course, the API doesn't work. In this case, how can I prevent to go back to the former screen?
logout = async () => {
await AsyncStorage.removeItem('userToken');
this.props.navigation.navigate('WelcomePage')
}
You can call reset instead of navigate.
The reset method lets us replace the navigator state with a new state:
navigation.reset({
index: 0,
routes: [{ name: 'Profile' }],
});
React Navigation provides createSwitchNavigator with Authentication in mind
Authentication Example
Related
I have a react-native app
and I define one splash screen. when user is Authenticated, it navigate to home and when user is not Authenticated, it navigate to login
its work correctly, but:
I want to when the app is in develop mode and when reloaded, it navigate to last route
can you help me to fix this ux problem?
You can access to the state of navigation, source here https://reactnavigation.org/docs/use-navigation-state/
import { useNavigationState } from '#react-navigation/native';
const usePreviousRouteName =() => {
return useNavigationState(state =>
state.routes[state.index - 1]?.name
? state.routes[state.index - 1].name
: 'None'
);
}
I'm using a Drawer Navigator as my base with history and have a Home screen and a Notifications screen.
Now for a deeplink myapp://notifications i want to have a history like Home->Notifications so that on pressing physical back btn the user is taken to Home instead of closing the app.
However it seems this does not work with backBehaviour set as history as now Home is never added when opening deeplink.
Is there any way to update the history so that it always has Home as initial screen?
(I have set Home as Initial screen in my linking config but that does not help)
The reset action allows resetting the navigation state to the given state.
Try to run this dispatch if your app opened using the deep link
(Untested) example:
import { CommonActions } from '#react-navigation/native';
navigation.dispatch((state) => {
// Add the home route to the start of the stack
const routes = [{ name: 'Home' }, ...state.routes];
return CommonActions.reset({
...state,
routes,
index: routes.length - 1,
});
});
Read more about reset action
I am new to React native i just build the app with two screen and using navigation like login screen and my profile screen.
I create UserData module and import this file in my profile screen. like this
import * as UserData from '../modules/UserData';
Press the logout button navigation navigate back to the login screen.
const resetAction = StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'LoginStack' })
],
});
this.props.navigation.dispatch(resetAction);
then i login using another user id it's going to my profile screen but UserData module just still keep the Previous login user datas. How to avoid this i have no idea. Someone Please help me.
Thank you.
when logout , you must delete all the old state and props of components , StackActions.reset do not auto delete this
You can call a method on press of the logout button and in that method you need to clear the async storage and all the mobx/redux stores. After clearing the data, you navigate the user to login page and reset the navigation.
I am making a react-native mobile app, and I have a navigation drawer with a logout button on it. I know how to navigate from there to the login screen, using props.navigation.navigate('Login'), but the problem is that if the user does this, they can still open the drawer from the Login screen and navigate back to one of the other screens, or press the back button on Android.
I guess I could do a check on the Login screen if the user came from another page and then disable the open drawer button, but that seems kinda hacky. I was wondering if there is a correct way of doing this, perhaps to reset the stack upon arrival on the Login, I'm not sure.
Your implementation is not good. from the details you gave i think all of your pages are just in one stack. i recommend you to separate Authentication and App stacks. for this i highly recommend this: https://reactnavigation.org/docs/en/auth-flow.html
but resetting stack :
reset
The reset action wipes the whole navigation state and replaces it with
the result of several actions.
index - number - required - Index of the active route on routes array in navigation state.
actions - array - required - Array of Navigation Actions that will replace the navigation state.
key - string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
source : https://reactnavigation.org/docs/en/stack-actions.html
you need to reset your navigation stack when you logout
first define the logout action
const logoutAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
then on logout do
this.props.navigation.dispatch(logoutAction);
I am using the stack navigator of react-navigator to build my project, I want to redirect the user to the home screen after the user signed in.
I am using navigation.navigate to redirect, but it will cause the home screen to display a back button to the login screen.
if (this.state.user) {
this.props.navigation.navigate('SignIn');
}
Is there any way to reset the navigation? or any other method I can perform without reset the navigation?
The way i would do it is to reset the navigation stack and then redirect it to the home page. Luckily there's a method for doing such thing called NavigationActions.reset which replace the navigation state with a new one.
So for your case i would do the following:
if (this.state.user) {
let newStack= NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Home'})
]
})
this.props.navigation.dispatch(newStack);
}
This code will create a new stack with the first page of the stack being the home page (you can change it with your custom routeName), and then use this new stack as our new navigation stack.
You can find more about the reset method on the official docs.
https://reactnavigation.org/docs/navigators/navigation-actions#Reset