Navigate to a different stack in react navigation

Question

I have a Switch Navigator and Bottom Tab Navigator. The Swich Navigator has the login screen and the Bottom Tab Navigator has the home screens and logout screen.

Switch Navigator:

const RootStack = createSwitchNavigator(
  {
    AuthLoadingScreen: AuthLoadingScreen,
    Auth: AuthStack,
    AADB2CLogin: AADB2CLogin,
    Home: mainBottomStack
  },
  {
    initialRouteName: "AuthLoadingScreen",

    transitionConfig
  }
);

Bottom Tab Navigator:

    const mainBottomStack = createBottomTabNavigator(
  {
    Home: mainStack,
    MedicalRecord: MedicalRecordStack,
    //MedicalRecord: PatientDetails,
    Visit: VisitStack,
    Alerts: AlertStack,
    Profile: PatientDetails,
    //Settings: Logout
    Logout: {
      screen: () => null,
      navigationOptions: {
        tabBarOnPress: () => {
          Alert.alert(
            "Logout",
            "Are you sure you want to logout?",
            [
              {
                text: "No",
                style: "cancel"
              },
              {
                text: "Yes",
                onPress: () => {
                  console.log("logout");
                  //I want to navigate to switch navigator's Auth screen here...
                }
              }
            ],
            { cancelable: false }
          );
        }
      }
    }
  },
  {
    transitionConfig,
    initialRouteName: "Home",
    barStyle: { backgroundColor: "#694fad" }
  }
);

On logout, in bottom tab navigator, I want to navigate to Switch navigator (to Auth screen). How can navigate between different stacks in react navigation?

Answer 1

Can you change to the following?

Add your TabNavigation 'mainBottomStack' in to the SwitchNavigation

const RootStack = createSwitchNavigator(
  {
    AuthLoadingScreen: AuthLoadingScreen,
    Auth: AuthStack,
    AADB2CLogin: AADB2CLogin,
    Home: mainBottomStack,
    TabNavigation: mainBottomStack
  },
  {
    initialRouteName: "AuthLoadingScreen",

    transitionConfig
  }
);

Then navigate to 'Auth' screen like the following,

this.props.navigation.navigate("Auth");

Answer 2

You can make it work by doing the following in createBottomTabNavigator:

Logout: {
  screen: () => null,
  navigationOptions: ({ navigation }) => ({
    tabBarOnPress: () => {
      Alert.alert(
        "Logout",
        "Are you sure you want to logout?",
        [
          {
            text: "No",
            style: "cancel"
          },
          {
            text: "Yes",
            onPress: () => {
              //console.log("logout");
              AsyncStorage.setItem("token", null);
              navigation.navigate("Auth");
            }
          }
        ],
        { cancelable: false }
      );
    }
  })
}