How to navigate between a few AppContainers

Question

how can I navigate between AppContainers?

I'm detecting a correct stack in App.js

const stack = User.isAuthorized() ? authStack : unauthStack;

After user enter the login and password, he need switch the stack from unauthStack.SignIn to authStack.List.

const unauthStack = createAppContainer(createStackNavigator({
    SignIn: { screen: SignIn },
    ForgotPassword: { screen: ForgotPassword },
}));

const authStack = createAppContainer(createBottomTabNavigator({
        List: { screen: GeneralStack },
        Add: { screen: NewEventStack },
}));

I've tried to Google it but can't find any working examples. And saw some information that complete reload the app could be a reason of memory leak or something like that...

So what's the correct way to do this?

Answer 1

You shouldnt approach multiple containers, rather make 2 stacks and adda switchNavigator and if its logged in then display accordingly. See example below:

const navigation = createAppContainer(
  createSwitchNavigator(
    {
      App: HomeStack, // these are after login pages
      Auth: AuthStack,// these are before login pages
    },
    {
      initialRouteName: isToken?'App':'Auth', //checking if token exists
    },
  ),
);

Please check the code and if any doubts do ask.

Hope it helps