I have a react native app and am using react navigation (https://reactnavigation.org).
After the user logs in, I reset the navigation stack with:
const initialNavigation = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: Main })],
});
props.navigation.dispatch(initialNavigation);
This results in a jump from the login screen to the main screen. Is there any way to animate this so that it looks like a smooth transition? For example, fading out the login screen or sliding the screen.
I understand I could "navigate" instead of "reset" the stack to get animation, but I don't want the login screen to be on the navigation stack.
You might want to subscribe to these two github open issues since it seems like others are running into the same issue:
https://github.com/react-community/react-navigation/issues/1663
https://github.com/react-community/react-navigation/issues/1493
Related
I realize why this occurring but am trying to figure out the best way to go about getting the required behavior:
Let's say I have a tab navigator and inside those tabs I have stack navigators. When I first open the app I am in the Home tab. Now let's say a push notification comes in and I handle that and say go to this screen in the profile stack navigator. The screen is not usually the first screen in the navigator but because I have not navigated to the profile screen via the tab navigator the initial screen is not loaded so it's the first in the stack. If I call navigation.pop it will not be handled by a navigator because their is no screen to go back to in the profile navigator.
I figured I could just call navigation.navigate('Profile') and it does navigate to that screen but it doesn't pop the initial screen so clicking the tab by default will now make the first screen the base screen until the app is restarted.
If I call navigation.goBack() I won't run into the above problem but I won't be able to always ensure that the 'Profile' screen is the place it goes back to.
Ideally I'd like some way to say push this screen into this stack and then push this screen. So when pop is called it will always show that users profile screen.
** EDIT **
After looking through some docs I found that I can do the following:
navData.dispatch(() => {
navData.navigate('Home', {
screen: 'ProfileScreen',
});
navData.navigate('Home', {
screen: 'ProfileScreen',
params: {
screen: 'ViewPostScreen',
params: { shouldPlay: true },
},
});
});
Though I get the following warning: Possible unhandled Promise rejection: TypeError: undefined is not an object 'action.target'
I'm also using this logic in another location of my app with a different screen and works in development but not in production. Looking for suggestions on to best handle the above situation.
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
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