React Navigation - How to switch Tab Navigation to handle Login Screen?

Question

I want to know if it's possible to handle login screen after the button login pressed,

I have a router.js:

export const TabLoged= TabNavigator({
  Home: {
    screen: HomeStack,
  },
  MyPatient:{
    screen: MyPatientStack
  },
  MyAccount: {
    screen: MyAccount,
  }
});

export const Tab =  TabNavigator({
  Home: {
    screen: HomeStack,
  },
  Login: {
    screen: LoginStack,
  }
});

export const Root = StackNavigator({
  Tab: {
    screen: Tab,
  }
},{headerMode:'none'})

In export const Root I want to change the code looks like :

export const Root = StackNavigator({
  Tab: {
    // here i want to set the `alredyLogin` to be boolean, but i dont know how to do that
    screen: alreadyLogin ? TabLoged : Tab,
  }
},{headerMode:'none'})

Refer to this question I dont get it how to handle this issue, so I want to know there's another way to archive my goal?

Answer 1

To achieve desired behavior you can use SwitchNavigator. There is a really good example for it in the doc. You can check it here.

SwitchNavigator reference

SwitchNavigator(RouteConfigs, SwitchNavigatorConfig)

Example from docs

const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = StackNavigator({ SignIn: SignInScreen });

export default SwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);