CODEWITHSUNDEEP
react-native
wo99999
wo99999

Reputation: 55

Redirect screen in react native

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?

Upvotes: 3

Views: 4579

Answers (1)

Atef
Atef

Reputation: 1322

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

Upvotes: 1

Related Questions