Nested Navigators

[LeoRedin]

Hey folks! I'm looking for the best approach on Nested Navigators. My main idea is to have the bottoms tabs always visible on the app while stilll having the normal auth and non auth flow.

I was thinking about having the Stack.Navigator renders the login flow ir non authenticated and then when authenticated only the bottom tabs, from where the user will navigate to every other screen.

Thoughts? Better ideas? We migh have a common drawer for the whole app as well.

here's what I thought:

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    navigationBarColor: colors.background,
    contentStyle: {
      backgroundColor: colors.background,
    },
  }}
  initialRouteName={isAuthenticated ? 'BottomTabs' : 'Login'}
>
  {isAuthenticated ? (
    <Stack.Screen name="BottomTabs" component={BottomTabsNavigator} />
  ) : (
    <Stack.Screen name="Login" component={Screens.LoginScreen} />
  )}
</Stack.Navigator>

<Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarHideOnKeyboard: true,
        tabBarStyle: themed([$tabBar, { height: bottom + 70 }]),
        tabBarActiveTintColor: colors.text,
        tabBarInactiveTintColor: colors.text,
        tabBarLabelStyle: themed($tabBarLabel),
        tabBarItemStyle: themed($tabBarItem),
      }}
    >
      <Tab.Screen
        name="Welcome"
        component={Screens.WelcomeScreen}
        options={{
          tabBarLabel: translate('bottomNavigator.welcome'),
          tabBarIcon: ({ focused }) => (
            <Icon
              icon="ladybug"
              color={focused ? colors.tint : colors.tintInactive}
              size={30}
            />
          ),
        }}
      />

Probably something like this.