Suppose the following screens:
AScreen --> BScreen --> CScreen --> ASreen
Then use the back action go into home (identical on Android and IoS).
How can I make this behave like android's singleTask mode, when using:
("react-navigation": "^1.0.0-beta.11" )
You can use react navigation to achieve this.
Use navigate for navigation to screens A and B. Then on Screen C you can use Backhandler to catch the back button press. Then reset the router which will pop the existing screens except the root (that is screen A).
The reset code would look like this:
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Profile'}),
NavigationActions.navigate({ routeName: 'Settings'})
]
})
this.props.navigation.dispatch(resetAction)
Setting index to 0 will reset it to Profile. Setting it to 1 will reset to Settings Page. See the documentation on navigation actions.
Related
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 want to make splash screen using react native android similar to this image. how to make it?
Try to use this react-native-splash-screen library.
Follow the instruction for installation mentioned there. You can hide or show your splash screen using these methods.
Usage:
import SplashScreen from 'react-native-splash-screen'
export default class WelcomePage extends Component {
componentDidMount() {
// do stuff while the splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
}
}
Yeah, definitely you can use the react-native-splash-screen library.
Or you can also add them manually.
For detail, you can check out this link
https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae
You can create separate screen for splash screen and there you can check if user is logged in or not and navigate to specific screen based on the result
also you can reset the navigation stack like this
const loginAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
const homeAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Home' })],
});
the dispatch using
if (this.state.loggedIn)
this.props.navigation.dispatch(homeAction);
else
this.props.navigation.dispatch(loginAction);
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