Upgraded React Navigation from V3 to V5

Question

I am having trouble understanding how the new version of React Navigation works. I would love for someone help explain it a bit further to me if anyone can see where I am going wrong:

This is what I had working for V3 navigation:

import React from "react";
import { Alert, LogBox } from "react-native";
import HomeScreen from "screens/home";
import AllChatScreen from "screens/chat";
import ConnectionsScreen from "screens/matches";
import ProfileCardScreen from "screens/profile";
import EditAccountScreen from "screens/accountInfo";
import EditProfileScreen from "screens/editprofile";
import EditPreferencesScreen from "screens/preferences";
import DonationScreen from "screens/donation";
import { Provider as AuthProvider } from "context/AuthContext";
import { setNavigator } from "NavigationRef";
import LoadingScreen from "screens/LoadingScreen";
import SingleChat from "screens/chat/SingleChat";
import GroupChat from "screens/chat/GroupChat";
import EditInfoScreen from "screens/personalInfo";
import PersonalInfoChoices from "screens/personalInfoChoices";
import PreferencesChoices from "screens/preferenceChoices";
import EmailLoginScreen from "screens/login";
import PhoneLoginScreen from "screens/register/VerifyPhone";
import RegisterScreen from "screens/register";
import DiscoverScreen from "screens/discover";
import MainScreen from "screens/main";
import FirstLoginScreen from "screens/walkthrough";
import Colors from "utils/Colors";
import BottomTabIcons from "components/BottomTabIcons";

const RegisterScreens = createSwitchNavigator({
  Phone: PhoneLoginScreen,
  Register: RegisterScreen,
});

const switchNavigator = createSwitchNavigator({
  LoadingScreen,
  FirstLoginScreen,
  loginFlow: createStackNavigator({
    Main: MainScreen,
    EmailLogin: EmailLoginScreen,
    PhoneLogin: RegisterScreens,
  }),
  mainFlow: createBottomTabNavigator(
    {
      Home: createStackNavigator({
        HomeScreen,
        EditAccountScreen,
        EditPreferencesScreen,
        EditProfileScreen,
        DonationScreen,
        ProfileCardScreen,
        EditInfoScreen,
        PersonalInfoChoices,
        PreferencesChoices,
      }),
      Connect: ConnectionsScreen,
      Chat: createStackNavigator({
        ChatScreen,
        SingleChat,
        GroupChat,
      }),
      Discover: DiscoverScreen,
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ tintColor }) => {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === "Home") {
            iconName = "home";
          } else if (routeName === "Connect") {
            iconName = "link";
          } else if (routeName === "Chat") {
            iconName = "chat";
          } else if (routeName === "Discover") {
            iconName = "map-o";
          }

          return <BottomTabIcons iconName={iconName} tintColor={tintColor} />;
        },
      }),
      tabBarOptions: {
        activeTintColor: Colors.Brick,
        inactiveTintColor: Colors.Gray,
      },
    }
  ),
});

this is what I have so far for V5 navigation (same imports as above):

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function RegisterScreens() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Phone" component={PhoneLoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
    </Stack.Navigator>
  );
}

function HomeScreenStackNav() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="EditAccountScreen" component={EditAccountScreen} />
      <Stack.Screen
        name="EditPreferencesScreen"
        component={EditPreferencesScreen}
      />
      <Stack.Screen name="EditProfileScreen" component={EditProfileScreen} />
      <Stack.Screen name="DonationScreen" component={DonationScreen} />
      <Stack.Screen name="ProfileCardScreen" component={ProfileCardScreen} />
      <Stack.Screen name="EditInfoScreen" component={EditInfoScreen} />
      <Stack.Screen
        name="PersonalInfoChoices"
        component={PersonalInfoChoices}
      />
      <Stack.Screen name="PreferencesChoices" component={PreferencesChoices} />
    </Stack.Navigator>
  );
}

function ChatScreenStackNav() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ChatScreen" component={ChatScreen} />
      <Stack.Screen name="SingleChat" component={SingleChat} />
    </Stack.Navigator>
  );
}

function MainFlow() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreenStackNav} />
      <Tab.Screen name="Connect" component={ConnectionsScreen} />
      <Tab.Screen name="Chat" component={ChatScreenStackNav} />
      <Tab.Screen name="Discover" component={DiscoverScreen} />
    </Tab.Navigator>
  );
}

function LoginFlow() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Main" component={MainScreen} />
      <Stack.Screen name="EmailLoginScreen" component={EmailLoginScreen} />
      <Stack.Screen name="PhoneLogin" component={RegisterScreens} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="LoadingScreen" component={LoadingScreen} /> //tries to sign the user in if they have already signed in before
          <Stack.Screen name="FirstLoginScreen" component={FirstLoginScreen} /> //the walk through slides on the user's first sign in 
          <Stack.Screen name="LoginFlow" component={LoginFlow} /> //allows user to register with email or social 
          <Stack.Screen name="Main" component={MainFlow} /> //when the user lands on the main page after sign in, this should contain the bottom tab navigator
        </Stack.Navigator>
      </NavigationContainer>
    </AuthProvider>
  );
}

The errors I am getting:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'navigator.dispatch')]

This error makes me feel like I need to import more then what I was importing with V3. for example the setNaviagtor import wasn't used in the stack but maybe it needs me to use it in V5's stack?

I can't seem to get it to flow through LoadingScreen, FirstLoginScreen, RegisterScreen, and then the MainFlow. Am I writing the stack navigator and bottom tab nav incorrectly?

I have a navigation ref file that handles some of the routing that has the navigator.dispatch in it but I am not such why it would be throwing an error now:

import { CommonActions } from "@react-navigation/native";

let navigator;

export const setNavigator = nav => {
  navigator = nav;
};

export const navigate = (routeName, params) => {
  navigator.dispatch(
    CommonActions.navigate({
      routeName,
      params,
    })
  );
};
// import { NavigationActions } from "react-navigation";

// let navigator;

// export const setNavigator = nav => {
//   navigator = nav;
// };

// export const navigate = (routeName, params) => {
//   navigator.dispatch(
//     NavigationActions.navigate({
//       routeName,
//       params,
//     })
//   );
// };

question from:https://stackoverflow.com/questions/65672100/upgraded-react-navigation-from-v3-to-v5

Answer 1

Waitting for answers