How do I change the title name via i18next in the Active Act browsers?

Question

I’m having a problem changing the name of tabBarLabel of createMaterialBottomTabNavigator by means of the i18next, because the routes are neither functions nor component, so I did it by this mode, but I still receive notice that I am trying to access the i18next before he starts.

Code:

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import i18n from 'i18next';

import ScreenSignIn from './pages/SignIn';
import ScreenSignUp from './pages/SingUp';

import ScreenSchedule from './pages/Schedule';
import ScreenMedicine from './pages/Medicine';
import ScreenOptions from './pages/Options';

import ScreenScheduleCreate from './pages/ScheduleCreated';

export default createAppContainer(
  createSwitchNavigator(
    {
      Sign: createSwitchNavigator({
        ScreenSignIn,
        ScreenSignUp,
      }),
      App: createMaterialBottomTabNavigator(
        {
          Agenda: {
            screen: createStackNavigator({
              ScreenSchedule: {
                screen: ScreenSchedule,
                // Opções da tela de ScreenSchedule
                navigationOptions: {
                  headerTransparent: true,
                },
              },
              ScreenScheduleCreate,
            }),
            navigationOptions: () => ({
              tabBarIcon: <Icon name="add" size={20} color="#FFF" />,
              tabBarLabel: i18n.t('Navigation:Schedule'),
            }),
          },
          Medicine: {
            screen: ScreenMedicine,
            navigationOptions: () => ({
              tabBarIcon: <Icon name="add" size={20} color="#FFF" />,
              tabBarLabel: i18n.t('Navigation:Medicine'),
            }),
          },
          Options: {
            screen: ScreenOptions,
            navigationOptions: () => ({
              tabBarIcon: <Icon name="add" size={20} color="#FFF" />,
              tabBarLabel: i18n.t('Navigation:Options'),
            }),
          },
        },
        {
          initialRouteName: 'Agenda',
          barStyle: {
            backgroundColor: '#7159c1',
          },
        }
      ),
    },
    {
      initialRouteName: 'App',
    }
  )
);

Warning/Warning:

Answer 1

I did so

I created a component that imports i18n and called it Localization:

import i18n from 'i18n-js'

import en_US from 'translations/en-US'
import pt_BR from 'translations/pt-BR'

const localizedStrings = {
    "en": en_US,
    "en-US": en_US,
    "pt": pt_BR,
    "pt-BR": pt_BR,
    "pt-PT": pt_BR,
}

i18n.fallbacks = true
i18n.translations = localizedStrings

i18n.defaultLocale = 'en'

export default i18n

Then I import the Localization of the component that calls my navigation and pass the function of translating to his screenProps:

import AppContainer from 'routes' // Esse é meu navegador
import Localization from 'translations/Localization'

function App() {
   return (
      <AppContainer 
         screenProps={{ t: Localization.t }}
      />
   )
}

And in my Navigator I get screenProps as parameter. In your case it would look like this:

export default createAppContainer(
  createSwitchNavigator(
    {
      Sign: createSwitchNavigator({
        ScreenSignIn,
        ScreenSignUp,
      }),
      App: createMaterialBottomTabNavigator(
        {
          Agenda: {
            screen: createStackNavigator({
              ScreenSchedule: {
                screen: ScreenSchedule,
                // Opções da tela de ScreenSchedule
                navigationOptions: {
                  headerTransparent: true,
                },
              },
              ScreenScheduleCreate,
            }),
            navigationOptions: ({ screenProps }) => ({
              tabBarIcon: <Icon name="add" size={20} color="#FFF" />,
              tabBarLabel: screenProps.t('Navigation:Schedule'),
            }),
          },
          Medicine: {
            screen: ScreenMedicine,
            navigationOptions: ({ screenProps }) => ({
              tabBarIcon: <Icon name="add" size={20} color="#FFF" />,
              tabBarLabel: screenProps.t('Navigation:Medicine'),
            }),
          },
          Options: {
            screen: ScreenOptions,
            navigationOptions: ({ screenProps }) => ({
              tabBarIcon: <Icon name="add" size={20} color="#FFF" />,
              tabBarLabel: screenProps.t('Navigation:Options'),
            }),
          },
        },
        {
          initialRouteName: 'Agenda',
          barStyle: {
            backgroundColor: '#7159c1',
          },
        }
      ),
    },
    {
      initialRouteName: 'App',
    }
  )
);

Note that in your navigationOptions() it receives three parameters: one of them is the screenProps that I did the structuring to receive { screenProps }; You can do so tbm :

navigationOptions(props){
   tabBarLabem: props.screenProps.t('Navigation.schedule'),
}

Edit:

I didn’t realize you use i18next and formulated the answer using the i18n-js. But the result must be similar.