Change Language As A User Preferance In React Native App

I am creating an app using React Native and need the ability to change the app's language 'on the fly' so to speak. I have followed the sample here: https://github.com/appfoundry/r

Solution 1:

I have worked on a situation that maybe the idea can help you.

I used react-native-i18n (https://github.com/AlexanderZaytsev/react-native-i18n) and created a file with all my translations. Something like this:

I18n.translations= {
  en: {
    helloWorld:'Hello World!',
    loginButton:'Login',
  }
}

Then I imported it in my component which contains the texts that should be translated and use it like this:

<View><Text>{I18n.t('helloWorld'}</Text></View>

I have the user language stored in my database and I get it and set in my reducer when user logs in in my app. At first I get the languge from I18n.currentLocale() method.

In my component I get the user language from my reducer and set it on I18n config: I18n.locale = this.props.language;

In this component I have a picker so user can select its language. I trigger an action to update my database, as well the reducer and use componentWillReceiveProps() lifecycle to update I18n.locale value

componentWillReceiveProps(nextProps) {
    I18n.locale = nextProps.language;
  }

Hope it helps