React-i18next: createBottomTabNavigator gets route-name instead of tabBarLabel in some case

[HaJo10]

Hi, having some troubles translating tabs using react-i18next I tested with your example at
https://github.com/i18next/react-i18next/tree/master/example/react-native-expo
I changed the stack used in wrappedStack (App.js) from StackNavigator to BottomTabNavigator using createBottomTabNavigator.
As long as all routes are defined directly with screens all works as expected. When for example defining first route/tab using a stack (to navigate lets say from a settings tab to a screen changing language) and second route with screen then the "stack-route" is labeled with the route-name instead of using tabBarLabel or title at least.
What I am doing wrong? Is there a way to change (translate) the route-name? I don't think so because of stack handling.

I made changes to app.js, i18n.js, Home.js, Page2.js and added Language.js.
https://github.com/HaJo10/react-i18next

[jamuhl]

related to https://github.com/i18next/react-i18next/issues/484

overall i guess it's more a problem / limitation of react-navigation

[HaJo10]

Shure???
Tested out that I can set tabBarLabel using navigationOptions in defining ...createBottomTabNavigation.
But this one is always shown in fallbackLng! Never changes, not rerendered.
Missing some tip like
static navigationOptions = ({ navigation, screenProps }) => ({
tabBarLabel: screenProps.t('home:tabLabel')
});
but this only works for/in screens.

const StackL = createStackNavigator({
Home: { screen: Home },
Langu: { screen: Language }
});
export const StackST = createBottomTabNavigator({
HomeS: { screen: StackL,
navigationOptions: {
tabBarLabel: i18n.t('home:tabLabel'),
tabBarIcon: ({ tintColor }) =>
}
},
Page2: { screen: Page2,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
}
},
});`

[jamuhl]

do you load translations via xhr or hardcoded via init resources?

if loading translations are not loaded yet when you set them in tabBarLabel

[HaJo10]

I use hardcoded resources. Indeed in the sample the translations are still placed in the i18n.js.

[jamuhl]

could you try setting initImmediate: false on init - and see if it makes a difference

[HaJo10]

sorry, still only following fallbackLng

[jamuhl]

how you set lng?

[HaJo10]

{t('common:currentLanguage', { lng: i18n.language })}`

        <Button
          onPress={() => { i18n.changeLanguage('en') }}
          title={t('common:actions.toggleToEnglish')}
        />

```
onPress={() => { i18n.changeLanguage('de') }}
title={t('common:actions.toggleToGerman')}
/>
````

https://github.com/HaJo10/react-i18next

[jamuhl]

Ah i see or i guess: the expo language detector is async -> language detection will not be ready when rendering first time -> therefor going to the fallback

https://github.com/HaJo10/react-i18next/blob/master/js/i18n.js#L7

https://github.com/dormakaba-digital/digital-reactnative-client/blob/master/src/modules/i18n/i18n.js#L4 might be a option for a sync lng detector

Beside that making the navigationOptions a function might help too - that way on language change it should at least get new language at some point (instead of have it fixed):

navigationOptions: ({ navigation }) => {
 return options;
};

[HaJo10]

No idea where to place "navigationOptions a function".
Instead of "navigationOptions: { ... }" and fill my options before "return" ? Am I right???

I'll test the other lng detector asap.

[jamuhl]

export const StackST = createBottomTabNavigator({
HomeS: { screen: StackL,
navigationOptions: function({ navigation }) {
return {
tabBarLabel: i18n.t('home:tabLabel'),
tabBarIcon: ({ tintColor }) => {
}
}),

[HaJo10]

ok, understood. Thanks's

[HaJo10]

congrats!!!
navigationOptions: ({ navigation }) => { const options = { tabBarLabel: i18n.t('home:tabLabel'), tabBarIcon: ({ tintColor }) => { <SimpleLineIcons name='calendar' size={24} color={tintColor} />} } return options; } did it! Not yet tested the other language detection, but using this funktion works as expected!

Thank you very much. Very fast and qualified help!!!

[jamuhl]

great to see the issue solved