React Navigation: Implementing Logout From Screen in StackNavigator Nested inside TabNavigator?

Background Context:

The navigation set up in my app is largely based off of React Navigation’s v3 Auth Flow example. The main difference is in the SwitchNavigator , where instead of the AppStack I have a TabNavigator .

The TabNavigator looks something like this:

const tabNavigator = createBottomTabNavigator({
  GroupStack: GroupStack,
  ActivityStack: ActivityStack,
});

Then, the GroupStack looks something like this:

const GroupStack = createStackNavigator(
  {
    HomeScreen: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home Screen",
      },
    },
    GroupInfoScreen: {
      screen: GroupInfoScreen,
      navigationOptions: {
        title: "Group Info Screen",
      },
    },
    ProfileScreen: {
      screen: ProfileScreen,
      navigationOptions: {
        title: "Profile Screen",
      },
    },
  }
);

The ActivityStack as of now only has one screen.

I am also using Context.Provider that wraps around the whole app that manages all of the user’s data (name, birthday, etc.) on the application level.

The ProfileScreen in the GroupStack is where I have my logout button; it clears the authToken in AsyncStorage, deletes all the data and navigates the user to the Auth stack, just like the example from the link above.

Problem:

There is no problem in logging out when I only navigate amongst screens in the GroupStack .

The issue arises when I click the tab to go to the ActivityStack , click back to the GroupStack tab, then try to logout from the ProfileScreen . The app crashes and throws a bug saying some user data displayed in the screens in GroupStack is undefined .

Why does the app only crash and throw this error after I navigated amongst the different tabs but not if I just stay in one tab?

I think that is because when the user clicks logout, it clears all the data from the Context.Provider and there is some issue stemming from the TabNavigator that prevents the app from properly navigating to the Auth stack as intended.

The docs say routes are lazily initialized -- their screen components are not mounted until they are first focused.

So when I click on the Activity tab, it mounts the ActivityScreen . Then when I click back to the Group tab, perhaps that mounted ActivityScreen is messing with the GroupStack ?

Versions

Testing this on iOS Expo Client

{
 "expo": "^38.0.0",
 "react-navigation": "^3.12.0",
}

Thank you for reading and please let me know if any more additional information from me will be useful.