React-i18next: How can translate Tabs into StackNavigator

[martinlaregina]

Hello,

I have been migrating the code for 4 hours and it works very well, except for the translation of the titles of the Tabs. Tab are a constant later included into NavigationUntranslated so why dont be translated ?

I leave the code to see if you can help me.
Thank you very much,

import React from 'react';
import {
  View,
  Text
} from 'react-native';
import { createStackNavigator, createMaterialTopTabNavigator } from 'react-navigation';

/* TABS */
import Favorite from './Favorite';
import List from './List';
import Profile from './Profile';
import Explore from './Explore';

/* PAGES INSIDE TABS */
import Detail from './Detail';
import ProfilePersonalInformation from './ProfilePersonalInformation';
import ProfileLanguage from './ProfileLanguage';
import ProfileMessages from './ProfileMessages';
import ProfilePassword from './ProfilePassword';

import { navigationOptions } from '../config/navOptions';

import i18next from '../config/languages';
import { translate } from 'react-i18next';

const Tab = createMaterialTopTabNavigator(
  {
    List: {
      screen: List,
      navigationOptions: {
        tabBarLabel: i18next.t('Home')
      },
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: i18next.t('Profile')
      }
    },
    Explore: {
      screen: Explore,
      navigationOptions: {
        tabBarLabel: i18next.t('Explore')
      }
    },
    Favorite: {
      screen: Favorite,
      navigationOptions: {
        tabBarLabel: i18next.t('Favorites')
      }
    },
  },
  {
    order: ['List', 'Favorite', 'Explore', 'Profile'],
    tabBarOptions: {
      activeTintColor: 'white',
    },
  },
);

const NavigationUntranslated = createStackNavigator(
  {
    ProfileLanguage: {
      screen: ProfileLanguage
    },
    ProfileMessages: {
      screen: ProfileMessages
    },
    ProfilePassword: {
      screen: ProfilePassword
    },
    ProfilePersonalInformation: {
      screen: ProfilePersonalInformation
    },
    Detail: { 
      screen: Detail 
    },
    Tabs: {
      screen: Tab, navigationOptions: () => ({
        title: i18next.t('English'),
        ...navigationOptions
      }),
    }
  },
  {
    initialRouteName: 'Tabs'
  },
);

const Navigation = ({t}) => {
  return <NavigationUntranslated screenProps={{ t }} />;
}
const ReloadAppOnLanguageChange = translate('common', {
  bindI18n: 'languageChanged',
  bindStore: false
})(Navigation);

export default translate(['Navigation'], { wait: true })(Navigation);

[jamuhl]

https://github.com/i18next/react-i18next/issues?utf8=%E2%9C%93&q=tabs

[martinlaregina]

Thanks for the response.

Old code was:

List: {
      screen: List,
      navigationOptions: {
        tabBarLabel: i18next.t('Home')
      },
    },

New code

List: {
      screen: List,
        navigationOptions: ({ navigation, navigationOptions }) => ({
        tabBarLabel: i18next.t('Home')
      }),
    },

and works fine. I dont use "static" like he suggest in https://github.com/i18next/react-i18next/issues?utf8=%E2%9C%93&q=tabs

Thanks a lot

[Kalpeshsuthar]

Thanks for the help it's working that mentioned way