i18n Missing Translation For Bottom Tab Navigator

Expo SDK
1
  1. SDK Version: 41.0.0
  2. Platforms(Android/iOS/web/all): iOS and Android

Greetings!

This seemed to be working fine initially, but now I’m not sure what’s going on. Please note I have only noticed this problem in development on iOS/Android, but not yet in production because I’m worried about deploying the changes to see.

Every tab in my BottomTabNavigator says “Missing Translations”.

Please help! Below is my App.js file. I suspect it has something to do with i18n not initializing quickly enough? In other words, I suspect that the BottomTabNavigator renders before i18n has initialized?

import React, { useEffect } from 'react';
import { Alert, StyleSheet, Text, View, Dimensions } from 'react-native';
import MainNavigator from './navigation/MainNavigator';
import NavigationService from './navigation/NavigationService';
import { Provider } from 'react-redux';
import store from './store/store';
import Amplify, { Storage } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
import * as Sentry from 'sentry-expo';
import moment from 'moment';
import Strings from './Constants/Strings'
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';




i18n.translations = Strings
const locale = Localization.locale
i18n.locale = locale;
i18n.fallbacks = true;

Sentry.init({
  dsn: 'https://7a7ca4646bb54a45bfb020a45fcba91d@sentry.io/3599390',
  enableInExpoDevelopment: false,
  debug: true
});

moment.updateLocale(locale, {
  relativeTime : {
      future: "in %s",
      past:   "%s",
      s  : 'a few seconds',
      ss : '%ds',
      m:  "1min",
      mm: "%dm",
      h:  "1h",
      hh: "%dh",
      d:  "1d",
      dd: "%dd",
      w:  "1w",
      ww: "%dw",
      M:  "1 month",
      MM: "%d months",
      y:  "1yr",
      yy: "%dyrs"
  }
});



const App = ()=> {

  return (
    <Provider store={store}>
    {/* <GlobalState> */}
      <MainNavigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
      {/* <Test/> */}
    {/* </GlobalState> */}
    </Provider>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapContainer: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  section: {
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height * .5
  }

});

export default App
2

I have found the issue. Apparently I had to wrap the navigation options in a function and return the options that way, instead of directly using an object. Compare the uncommented code, to the commented code. Thank you.

      navigationOptions: ()=>{
        const options ={
          tabBarLabel: i18n.t('MapTabLabel'),
          // tabBarLabel: ()=> (!Platform.isPad && <Text style={{color: 'black', fontSize: 12, textAlign: 'center'}}>Map</Text>),
          tabBarIcon: tabInfo => {
            return (
                // <Text>Map</Text>
                <Ionicons name={(Platform.OS === 'ios' ? 'ios-map' : 'md-map')} size={25} color={Colors.primaryBlue} />
                );
            }
        }
        return options
      },
      // navigationOptions: {
      //   tabBarLabel: i18n.t('MapTabLabel'),
      //   // tabBarLabel: ()=> (!Platform.isPad && <Text style={{color: 'black', fontSize: 12, textAlign: 'center'}}>Map</Text>),
      //   tabBarIcon: tabInfo => {
      //     return (
      //         // <Text>Map</Text>
      //         <Ionicons name={(Platform.OS === 'ios' ? 'ios-map' : 'md-map')} size={25} color={Colors.primaryBlue} />
      //         );
      //       }
      // }
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.