React navigation - App.js setup & navigating to main tabs

Question

I'm building an authentication flow with react navigation 5. In reading the documentation, it seems best to do a ternary operation. I'm having trouble logging in (from Auth stack to Main Tabs) and logging out (from Main tabs to auth stack). I keep getting the message "The action NAVIGATE was not handled by any navigator - Do you have a screen named Login?" here is part of my App.js

render() {

    if (this.state.isLoading) {
      return <SplashScreen />;
    }

    return (
      <NavigationContainer>
        <Stack.Navigator>
          {this.state.userToken == null ? (

            // No token found, user isn't signed in
            <>
              <Stack.Screen name="Login" component={LoginScreen} />
              <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
              <Stack.Screen name="SignIn" component={SigninScreen} />
            </>

          ) : (

              // User is signed in
              <Stack.Screen name="Main" component={MainTabs} />
            )}
        </Stack.Navigator>
      </NavigationContainer>
    )
  }

When I logout, I'm issuing the following function to clear the storage and navigate back to my auth screens

onPress={() => AsyncStorage.clear().then(this.props.navigation.navigate('Login'))}

Help!

Answer 1

Create a separate class for handling Navigator. Store "userToken" in user reducer data after user logged in and clear user token from reducer on logout so It will automatically switch navigator from Main to Login.

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { connect } from "react-redux";

class App extends React.Component {
 
 renderAuthNavigator(){
   return (
    <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="SignIn" component={SigninScreen} />
    </Stack.Navigator>
  );
 }

 renderMainNavigator(){
   return (
     <Stack.Navigator>
       <Stack.Screen name="Main" component={MainTabs} />
     </Stack.Navigator>
   );
 }

 render(){
  return (
     <NavigationContainer>
        {this.user.userToken == null ? this.renderAuthNavigator() : this.renderMainNavigator()}
    </NavigationContainer>
  );
 }
}

const mapStateToProps = (store, ownProps) => ({
  user: store.auth.data
});

export default connect(
  mapStateToProps, null
)(App);

Note: On Logout, don't need to call

navigation.navigate('Login');