How to use react-native-localize - 10 common examples

const translationsDir = await (Platform.OS === "android"
    ? RNFS.readDirAssets("translations")
    : RNFS.readDir(RNFS.MainBundlePath + "/translations"));

  const translationPaths = translationsDir
    .filter(({ isFile, name }) => isFile() && name.endsWith(".json"))
    .reduce((all, { name, path }) => {
      const languageTag = name.replace(".json", "");
      return { ...all, [languageTag]: path };
    }, {});

  // fallback if no available language fits
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationPaths)) ||
    fallback;

  const fileContent = await (Platform.OS === "android"
    ? RNFS.readFileAssets(translationPaths[languageTag], "utf8")
    : RNFS.readFile(translationPaths[languageTag], "utf8"));

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);

  // set i18n-js config
  i18n.translations = { [languageTag]: JSON.parse(fileContent) };
  i18n.locale = languageTag;
};

export const setI18nConfig = forceLocale => {
  // fallback if no available language fits
  const tagFallback = { languageTag: 'en', isRTL: false };

  let language = {};
  const languageTags = Object.keys(translationGetters);
  if (forceLocale && languageTags.includes(forceLocale)) {
    language = { languageTag: forceLocale, isRTL: forceLocale === 'ar' };
  } else {
    language =
      RNLocalize.findBestAvailableLanguage(languageTags) || tagFallback;
  }

  let stringFallback;
  i18n.fallbacks = true;
  switch (forceLocale) {
    case 'svKids':
    case 'svSimple':
    case 'seSme':
    case 'seSmj':
    case 'seSma': {
      stringFallback = 'sv';
      break;
    }

    default: {
      stringFallback = 'en';

// (required) Called when a remote or local notification is opened or received
      onNotification,

      // ANDROID ONLY: GCM or FCM Sender ID (product_number)
      senderID: '1025777552500',

      // IOS ONLY (optional): default: all - Permissions to register.
      permissions: {
        alert: true,
        badge: true,
        sound: true
      }
    });

    addEventListener('change', this.handleLanguagesChange);

    if (Platform.OS === 'android') {
      Linking.getInitialURL().then((url) => {
        if (url) {
          this.navigate(url);
        }
      });
    } else {
      Linking.addEventListener('url', this.handleOpenURL);
    }
  }

fallbackLng: {
      default: ['en-US'],
      'es-US': ['es-LA'],
    },
    resources: availableResources,
    ns: ['common', ...Object.keys(Namespaces)],
    defaultNS: 'common',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    missingInterpolationHandler: currencyInterpolator,
  })
  .catch((reason: any) => Logger.error(TAG, 'Failed init i18n', reason))

RNLocalize.addEventListener('change', () => {
  i18n
    .changeLanguage(getLanguage())
    .catch((reason: any) => Logger.error(TAG, 'Failed to change i18n language', reason))
})

// Create HOC wrapper that hoists statics
// https://react.i18next.com/latest/withtranslation-hoc#hoist-non-react-statics
export const withTranslation = (namespace: Namespaces) => (component: React.ComponentType) =>
  hoistStatics(withTranslationI18Next(namespace)(component), component)

export default i18n

useEffect(() => {
    if (countries && countries.length > 0) {
      if (customer.addresses.length === 0) {
        // Get country by locale
        const userCountryByLocale = RNLocalize.getCountry();
        const isUserCountrySupported = countries.find(country => country.id === userCountryByLocale);
        if (isUserCountrySupported) {
          setValues({
            ...form,
            firstName: customer.firstname,
            lastName: customer.lastname,
            country: isUserCountrySupported.id,
            state: '',
          });
        }
      }
    }
  }, [countries]);

import * as RNLocalize from 'react-native-localize';
import I18n from 'i18next';

import en from './en';
import fr from './fr';

const locales = RNLocalize.getLocales();

I18n.init({
  debug: true,
  useLocalStorage: true,
  lng: locales[0].languageCode,
  fallbackLng: 'en',
  resources: { fr: { translation: fr }, en: { translation: en }, 'fr-FR': { translation: fr } },
});

export default I18n;

render() {
    return (

render() {
    if (!this.state.isTranslationLoaded) {
      return ;
    }

    return (

}

    return (

render() {
    return (