Redirect screen in react native

Question

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?

Possible duplicate of [Resetting the navigation stack for the home screen (React Navigation and React Native)](https://stackoverflow.com/questions/43090884/resetting-the-navigation-stack-for-the-home-screen-react-navigation-and-react-n) — bennygenel, Oct 08 '17 at 13:27

score 1 · Accepted Answer · answered Oct 08 '17 at 14:00

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

Redirect screen in react native

1 Answers1