CODEWITHSUNDEEP
javascriptreactjsreact-nativeinternationalizationi18n-js
Raul
Raul

Reputation: 3081

How to set i18n.js fallback language?

I am using the i18n-js library.

In order to set its configuration, I am doing the following:

export function setI18nConfig(locale = undefined) {
    // Fallback if no available language fits
    const fallback = DEFAULT_APP_LANGUAGE;
    const language =
      APP_LANGUAGES.find((language) => language.locale === locale) ?? fallback;

    const { locale: _locale, isRTL } = language;

    // Clear the translation cache
    translate.cache.clear();

    // Update the layout direction
    I18nManager.forceRTL(isRTL);

    // Set the i18n-js config
    i18n.locale = _locale;
    i18n.translations = { [_locale]: translationGetters[_locale]() };

    // Set moment config
    moment.locale(_locale);

    // Return the appropiate locale
    return _locale;
}

As you can see, in order to set the translations dictionary, I am calling this getter:

export const translationGetters = {
    en: () => require("../../../assets/languages/en/translations.json"),
    es: () => require("../../../assets/languages/es/translations.json"),
    fr: () => require("../../../assets/languages/fr/translations.json"),
    it: () => require("../../../assets/languages/it/translations.json"),
    pt: () => require("../../../assets/languages/pt/translations.json"),
};

For establishing the fallback language, I am just trying to find the given locale (function argument) in my array of app languages.

export const APP_LANGUAGES = [
    {
        name: "English",
        locale: "en",
        isRTL: false,
    },
    {
        name: "French",
        locale: "fr",
        isRTL: false,
    },
    {
        name: "Italian",
        locale: "it",
        isRTL: false,
    },
    {
        name: "Portuguese",
        locale: "pt",
        isRTL: false,
    },
    {
        name: "Spanish",
        locale: "es",
        isRTL: false,
    },
];

If it is not in the list, then I use the DAFAULT_APP_LANGUAGE as translation.

export const DEFAULT_APP_LANGUAGE = APP_LANGUAGES[0];

Is this the typical or correct way to set i18n.js fallbacks?

Isn't there any simple way to do that?

I mean, something like:

i18n.fallbackLanguage = "en";
i18n.locale = locale;
i18n.translations = {
    [locale]: translationGetters[locale](),
    [fallbackLanguage]: translationGetters[fallbackLanguage]()
};

Note: I also need to set the isRTL config for the fallback!

Upvotes: 3

Views: 2142

Answers (1)

Nik
Nik

Reputation: 1221

You have to set i18n.enableFallback = true and set a default locale with i18n.defaultLocale = "en". It will fall back to the default.

This is a minimal example (swap Localization.locale for whatever you are using):

import { I18n } from 'i18n-js';

const translations = {
  en: { welcome: 'Hello'},
  de: { welcome: 'Hallo'},
  ja: { welcome: 'こんにちは'},
};

const i18n = new I18n(translations);
i18n.locale = Localization.locale;
i18n.enableFallback = true;
i18n.defaultLocale = "en";

Based on the github issue: https://github.com/fnando/i18n-js/issues/525

Upvotes: 2

Related Questions