React-navigation reset explanation
I've been checking this for a while and there is a lot of documentation and nothing at the same time. I'm having trouble calling the reset method from react-navigation. I have the following StackNavigator
const Routes = StackNavigator({
Home: { screen: CheckLogin(App), navigationOptions: { header: null } },
Options: { screen: Options, navigationOptions: { title: 'Settings' } },
Dashboard: { screen: Dashboard },
});
So in the house it might be like Login, the parameters are just one page with some parameters, and the dashboard is the main page after redirection. The thing is, in Home, I check if I have a previous access token, so it just goes to the dashboard screen. My problem is that an arrow appears to go back and I don't want that, so a good approach might be to reset the routes.
In my Dashboard component, I have embedded inside componentDidMount (not sure where to put it), the following code:
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'Home' }),
NavigationActions.navigate({ routeName: 'Dashboard' })
]
});
this.props.navigation.dispatch(resetAction);
So what I understood is that actions are the routes that are available to you, and the index is the one that you want to go in the position of the action array. So position 1 of the Activity Array is the Dashboard component. This part is a bit confusing from the documentation, so I'm not sure.
This code doesn't work. It creates an infinite loop in my application between the home page and the panel.
Is there a way, when I get into the Dashboard component, remove the back arrow to replace it with another completely different link? If the solution is reset. Could you please explain to me what is wrong here and how it works?
I really appreciate any help.
source to share
I think you want to call this on the home screen as soon as you determine that the user is logged in.
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Dashboard' })
]
});
this.props.navigation.dispatch(resetAction);
What this function does NavigationActions.reset () is doing the actions specified in the "actions" key and merging the resulting state into the navigation history at the specified index (from the "index" key) and disposing of all subsequent items in the navigation history.
Your available routes are specified in the arguments supplied to your navigators, not in the "action" key of that argument.
source to share