react-navigation goBack between stack navigators - react-native

Question

In my React native app I am using "react-navigation": "^3.11.0".
I have top level bottomTabNavigator
const TabNavigator = createBottomTabNavigator({
Main: {
screen: balanceStack,
navigationOptions: {
tabBarLabel: I18n.t("balanceTabLabel"),
tabBarIcon: ({ tintColor}: {tintColor: string}) => (
<Icon name="home" style={{color: tintColor}} />
)
}
},
ServicesStack: {
screen: servicesStack,
navigationOptions: {
tabBarLabel: I18n.t("servicesTabLabel"),
tabBarIcon: ({ tintColor}: {tintColor: string}) => (
<Icon name="list-box" style={{color: tintColor}} />
)
}
},
}, {
tabBarOptions: {
activeTintColor: WHITE_COLOR,
inactiveTintColor: WHITE_COLOR,
style: {
backgroundColor: PRIMARY_COLOR,
}
},
backBehavior: 'history',
swipeEnabled: true,
});
And stack navigators for each tab:
const balanceStack = createStackNavigator({
Balance: {
screen: MainScreen,
},
FullBalance: {
screen: FullBalanceScreen,
},
Payment: {
screen: PaymentScreen,
},
ServiceView: {
screen: ViewServiceScreen,
},
}, {
initialRouteName: 'Balance',
headerMode: 'none',
});
const servicesStack = createStackNavigator({
AllServices: {
screen: AllServicesScreen,
},
ServiceView: {
screen: ViewServiceScreen,
},
ServiceOptionAction: {
screen: ServiceOptionsActionScreen,
}
}, {
initialRouteName: 'AllServices',
headerMode: 'none',
});
I want that my navigation for all tabs will be common, not divided per stack.
For example
when I navigate
Balance->FullBalanceScreen->AllServices(by clicking Services tab)->ServiceView
If I click back button (call goBack()) one time I will back to AllServices. But if I click back second time, I don't navigate to FullBalanceScreen, because it's in another stack. How can I do this?

Answer 1

Finally, I didn't find solution with TabNavigator and replace it with top level StackNavigator.
Also I use custom bottom Tabs component and set onPress for tab button to
onPress () {
        this.props.navigation.navigate (this.props.navigateRouteName)
    }
Where navigateRouteName is routeName to target stack route.

Answer 2

If you define a custom header (either for the top level nav, or duplicated for each stack) then navigation object will have the global history (not just for each stack) so clicking back will jump between tabs
<A.Navigation screenOptions={{header: ({nav}) => <CustomHeader nav/>}>
and in you header you can conditionally show a back button and add handler
if (nav.canGoBack()) // show button
... nav.goBack() // onPress