Handling locale change with react-native-i18next/locize/locize backend

Question

I'm trying to get RN i18next and locize to provide translations based on the current locale from react-native-i18n (Already have translations setup locally)

I was having issues with the languageDetector library found here: https://github.com/DylanVann/i18next-react-native-language-detector

It would throw an error about not finding the parameter "replace" of an object.

So I figured I would setup my own locize/languageDetector using the following code.

However.. It doesn't seem to update when the locale changes..

What am I doing wrong?

in i18next.js:

import i18next from "i18next";
import LocizeBackend from "i18next-locize-backend";
import I18n from "../i18n/i18n";

const languageDetector = {
 init: Function.prototype,
 type: "languageDetector",
 async: true, // flags below detection to be async
 detect: lng => I18n.locale,
 cacheUserLanguage: () => {}
};

i18next
  .use(languageDetector)
  .use(LocizeBackend)
  .init({
    fallbackLng: I18n.locale,
    lng: I18n.locale,
    debug: true,
    whitelist: ["en", "fr", "sv", "dev"],
    keySeparator: false,
    ns: ["common"],
    defaultNS: "common",
    saveMissing: false, 

    interpolation: {
      escapeValue: false 
    },
    backend: {
      referenceLng: "en",
    }
  });

jamuhl jamuhl · Accepted Answer · 2018-09-04T13:07:40

Looks like the language detection you use I18n.locale is not async -> so remove async: true...further if you set language on i18next.init it won't use the detector...

you might also use this detector as sample: https://github.com/dormakaba-digital/digital-reactnative-client/blob/master/src/modules/i18n/i18n.js#L4 -> used deviceInfo module

Handling locale change with react-native-i18next/locize/locize backend

1 Answers