Solvedreact native i18n Change language

First of all thanks for the effort in creating and maintaining this module, it works like a charm.

But, there's something crucial (imo) I'm missing and that is a function or some way to let the user set the language to their choice (given the supported languages the app would provide).

(I tried requiring the new translations in 'i18n.translations = ....' but it only works for some of the screens.. I believe this is because the screens (and their translations) have to be re-rendered?)

Is this something that could be added or is it not feasible?

14 Answers

✔️Accepted Answer

I believe you can achieve what you want by changing the locale at runtime
For instances, by using the example translations in the documentation:

I18n.locale = 'en';
console.log(I18n.t('greeting'));
I18n.locale = 'fr';
console.log(I18n.t('greeting'));

Displays on the logs:

11-16 10:34:46.432 31325  9705 I ReactNativeJS: Hi!
11-16 10:34:46.432 31325  9705 I ReactNativeJS: Bonjour!

Other Answers:

Fyi: I created a tutorial and a sample on how to successfully implement multi language support, also as a user-defined setting, with this plugin and redux (and the new React Navigation). (Currently the sample uses no redux for navigation, but i'm hoping to add that soon as I think that it would work even better.)

Also, as displayed in the documentation of I18n, you can also call the t method passing the locale: I18n.t("some.scoped.translation", {locale: "fr"});

If you don't use redux for refresh component when language was changed, you can use:

 // i18n.js
 export const strings = (name, params = {}) => I18n.t(name, params);
 export const switchLanguage = (lang, component) => {
   I18n.locale = lang;
   component.forceUpdate();
};

// Component
import { strings, switchLanguage } from 'path to i18n.js';

onSetRuLang = () => {
  switchLanguage('ru', this);
};
    // render 
<Text>{strings('login_to_account')}</Text>
<Button label="RU" onPress={this.onSetRuLang} />

Need refresh only current components, other component get actual language when will render.

I believe this is because the screens (and their translations) have to be re-rendered?)

Absolutely, you need to re-render the screen. One solution might be to tie this lib with a Redux store (if you're using it), so that it will automatically re-render the screens when needed :)
Also, thanks @jeromegrosse

Closing, feel free to re-open :)

Related Issues:

43
react native i18n Change language
I believe you can achieve what you want by changing the locale at runtime For instances ...