createBottomTabNavigator keep stackes mounted - reactjs

Question

I have an top level SwitchNavigator with two stacks (AuthStack and MainStack)
MainStack contains the stack of an logged user.
When I try to switch from one screen to other it's fine, but if I start an action that change the state of the current screen, if I leave and then come back the state keeps the same, it's like the screens was not unmounted when I switch between others.
Working example: https://snack.expo.io/HJrslFk34
Try to move to settings, click on "add" and then switch between the screens, the state keeps the same and screens were not being unmounted
const MainStack = createBottomTabNavigator(
{
[homeDrawerLabel]: {
screen: HomeNavigator,
navigationOptions: {
tabBarLabel: homeDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
},
},
[calendarDrawerLabel]: {
screen: CalendarNavigator,
navigationOptions: {
tabBarLabel: calendarDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
headerLayoutPreset: "center",
},
},
[messagesDrawerLabel]: {
screen: MessagesNavigator,
navigationOptions: {
tabBarLabel: messagesDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
},
},
[notificationsDrawerLabel]: {
screen: NotificationsNavigator,
navigationOptions: {
tabBarLabel: notificationsDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<IconNavigatorWithBadge
badgeCount={3}
name="md-checkmark-circle"
size={25}
color={tintColor}
/>
),
},
},
EditProfile: { screen: EditProfile },
[paymentDrawerLabel]: {
screen: PaymentsNavigator,
navigationOptions: {
tabBarLabel: paymentDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
},
},
},
{
tabBarOptions: {
activeTintColor: "#29C2AF",
inactiveTintColor: "rgba(41, 194, 175, 0.4)",
style: {
height: 60,
paddingVertical: 10,
borderTopColor: "rgba(0,0,0,0.2)",
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
elevation: 7,
},
},
headerMode: "none",
headerLayoutPreset: "center",
},
);
const AppNavigator = createSwitchNavigator(
{
AuthStack: AuthStack,
Main: MainStack,
},
{
headerMode: "none",
initialRouteName: "AuthStack",
}
);
const AppContainer = createAppContainer(AppNavigator);

Answer 1

With React Navigation, Tab Navigator views are not unmounted when switching between tabs. You can see the details about the lifecycle in react-navigation in their documentation here: Navigation lifecycle - Example scenario, the important part being here:
We start on the HomeScreen and navigate to DetailsScreen. Then we use the tab bar to switch to the SettingsScreen and navigate to ProfileScreen. After this sequence of operations is done, all 4 of the screens are mounted!
If you want to know and act on the active tab, what you will be looking for are the focus/blur events outlined here