How to update substack?

Question

I have a AppContentStack containing TabBarStack, and I want the titles of tabs to change when I change language of the app. When I change the app custom reducer invokes subscribe on the AppContainer which then reloades AppContentStack but not TabBarStack. Is there a way to achive reloading of the tabs?

My code:

function TabBarStack() {
return (
    <Tab.Navigator
        tabBarOptions={{
            activeTintColor: textRedColor,
            inactiveTintColor: grayColor,
            style: {
                backgroundColor: "white"
            }
        }}>
        <Tab.Screen name="Home"
                    component={ContentScreen}
                    options={{
                        tabBarLabel: getTranslation('Home'),
                        tabBarIcon: ({color, size}) => (
                            <HomeSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
        <Tab.Screen name="Promotions"
                    component={PromotionsScreen}
                    options={{
                        tabBarLabel: getTranslation('Promotions'),
                        tabBarIcon: ({color, size}) => (
                            <PromotionsSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
        <Tab.Screen name="Deposit"
                    component={PromotionsScreen}//TODO: missing
                    options={{
                        tabBarLabel: getTranslation('Deposit'),
                        tabBarIcon: ({color, size}) => (
                            <DepositSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
        <Tab.Screen name="Settings"
                    component={SettingsStack}
                    options={{
                        tabBarLabel: 'Settings!!',//TODO: missing translation
                        tabBarIcon: ({color, size}) => (
                            <SettingsSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
    </Tab.Navigator>
);
}

function AppContentStack() {
return (
    <Stack.Navigator
        initialRouteName="TabBarStack"
        headerMode="screen"
        mode="modal">
        <Stack.Screen name="TabBarStack"
                      component={TabBarStack}
                      options={{ header: headerView }}
        />
        <Stack.Screen name="GameWebView"
                      component={GameWebViewScreen}
                      options={{
                          header: ({navigation}) => {
                              return (
                                  <StatusBarComponent closeButtonAction={() => closeWebView(navigation)}
                                                      showCloseButton={true}/>
                              );
                          }
                      }}
        />
    </Stack.Navigator>
);
}

function PreLoginStack() {
return (
    <Stack.Navigator
        ...
    </Stack.Navigator>
);
}

function AppContainer({player}) {
return <NavigationContainer>
    {!player ?
        PreLoginStack()
        :
        AppContentStack()
    }
</NavigationContainer>;
}

export default subscribe(state => ({
    player: state.player,
    languageLocale: state.languageLocale
}))(AppContainer);

Answer 1

try to connect TabBarStack directly to subscribe so it gets updated:

export subscribe(state => ({
    player: state.player,
    languageLocale: state.languageLocale
}))(TabBarStack);