Reset StackNavigator inside createBottomTabNavigator on tabBarOnPress - react-native

Question

I have this structure:
bottomTabNavigator:
Screen 1
Screen 2
Screen A
Screen B
When the user navigates to Screen B, then goes to Screen 1 and go back to Screen 2, he goes directly in B, how can I reset the stack using the tabBarOnPress function to force the user to go back to A?
I'm using react-navigation 3.0.9, I tried a few codes but I got errors and I think it is due to the version.
My code structure:
const Navigator = createBottomTabNavigator({
Screen1: {
screen: Screen1,
navigationOptions: () => ({
tabBarOnPress...
})
},
Screen2: {
screen: Screen2,
navigationOptions: () => ({
tabBarOnPress...
})
}
})

Answer 1

In the new version, you can use the unmountOnBlur option for the screen. There is a little code sample:
<NavigationContainer>
<Tab.Navigator tabBarOptions={{
activeTintColor: ThemeConstants.mainColor,
}}>
<Tab.Screen name="Categories" component={CategoriesStackScreen}
options={{
unmountOnBlur:true
tabBarLabel: translate('Categories'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='MaterialIcons' name='restaurant-menu'/>
),
}}
/>
<Tab.Screen name="Info" component={InfoStackScreen}
options={{
unmountOnBlur:true,
tabBarLabel: translate('Info'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='MaterialIcons' name='info-outline'/>
),
}}
/>
<Tab.Screen name="Account" component={AccountStackScreen}
options={{
unmountOnBlur:true,
tabBarLabel: translate('Account'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='Feather' name='user'/>
),
}}/>
<Tab.Screen name="CartStackScreen" component={CartStackScreen}
options={{
unmountOnBlur:true,
tabBarBadge: (quantity && quantity>0)?quantity:null,
tabBarLabel: translate('Cart'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='Feather' name='shopping-cart'/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
And there is the link that describes the property
https://reactnavigation.org/docs/bottom-tab-navigator/

Answer 2

So there is already a response, but this one could help some people. You can use the property of createBottomTabNavigator, resetOnBlur and set it up at true. It is in false at default and because of that, it always save the state in each tab navigator.

Answer 3

As given by the explanation here.
you can do a reset action when clicking a tab like this:
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
So you should do something like:
tabBarOnPress{() => StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Screen1' })],
})};

Answer 4

Solution 1:
import { StackActions } from '#react-navigation/native';
if(this.props.navigation.canGoBack())
{
this.props.navigation.dispatch(StackActions.popToTop());
}
Solution 2:
use unmountonblur props in tab screen like this
<Tab.Navigator
>
<Tab.Screen
name='User'
component={ProfileModule}
options={{ unmountOnBlur: true }}
/>
</Tab.Navigator>