Using Multiple Navigators in React Native

It is very common that we have to use multiple types of navigator in our project.

Consider the following flow for example

LoginFlow (Stack Navigator)
-SignIn
-SignUp
-ResetPassword 
MainFlow (Bottom Navigator)
-Dashoboard
-History
-Accounts(Stack Navigator)
--Settings
--SignOut 

We have three different navigators here. Now when a user tries to signout using signout screen we might have to navigate the user back to the SignIn screen.

Note both SignIn and SignOut screens belongs to the different navigators.

this.props.navigation.navigate("Signin")

So, the above line will not work from the SignOut screen.

To solve this problem we react-navigation provides the following option

this.props.navigation.navigate(
  NAVIGATOR NAME,
  {},
  NavigationActions.navigate({
    routeName: ROUTENAME FROM THE NAVIGATOR,
  })
);

So in our case, we can use the following code to solve the problem

this.props.navigation.navigate(
  "LoginFlow",
  {},
  NavigationActions.navigate({
    routeName: "SignIn",
  })
);