How to replace switch navigator in react navigation 5?

Question

I'm previously using React Navigation 4.x to navigate between screen. For new project, I'm using UI Kitten themes and React navigation 5. I have 3 main screen; Splash, Login, Dashboard(Bottom Tab Navigation).

On this new project, if I'm on Dashboard and click back, it will go to login. Click back again, it will go to Splash screen. It shouldn't be like that. On each main screen, pressing back should close the application.

The main flow is when user have already success login, a token will be saved to AsyncStorage and on Splash, it will check if token is exist. If having token, it will go straight to Dashboard without need to login again.

I have my previous project that running using Component Class and working OK with switchnavigator. Since react navigation 5 does not have switch, I'm not sure how to handle it from navigationContainer element. I've seen someone using conditional operator but do I need to combine my splash function and login function inside navigationContainer.js?

App.js

import { StackNavigator } from './src/navigator/navigationContainer';
export default () => {
  const [theme, setTheme] = React.useState('light');
  const toggleTheme = () => {
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(nextTheme);
  };
  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ThemeContext.Provider value={{ theme, toggleTheme }}>
        <ApplicationProvider {...eva} theme={{ ...eva[theme], ...evatheme }}>
          <StackNavigator />
        </ApplicationProvider>
      </ThemeContext.Provider>
    </>
  );
};

navigationContainer.js

export const StackNavigator = () => {
  return (
    <NavigationContainer>
      <StackApp.Navigator initialRouteName='Splash' headerMode='none'>
        <StackApp.Screen name='SplashScreen' component={SplashScreen} options={{ headerShown: false }} />
        <StackApp.Screen name='Login' component={Login} options={{ headerShown: false }} />
        <StackApp.Screen name='Dashboard' component={Dashboard} />
      </StackApp.Navigator>
    </NavigationContainer>
  )
}

Answer 1

In react navigation 5, according to the document, the authentication flow now is implemented like this

isSignedIn ? (
  <Stack.Group>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </Stack.Group>
) : (
  <Stack.Group>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </Stack.Group>
)

You can check the detail here: https://reactnavigation.org/docs/auth-flow/

In your case, I think you need to combine my splash function and login function inside navigationContainer.js and using conditional operators to navigate the screen as you want