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.