Internationalization for react native app

August 16, 2016

Internationalization for React Native app is fairly simple.

To get started just install the I18n package and link it.

npm install --save react-native-i18n
react-native link

To use it just import the package import I18n from 'react-native-i18n' and then { I18n.t('welcome') } in the render() method

I18n.fallbacks = true; is a good option to set as it allows you to fall back to similar language or english if the specific language is not available

The translations are defined as follow

I18n.translations = {
  en: {
    welcome:"Welcome"
  },
  de: {
    welcome:"Willkommen"
  },
  ...
};

Alternatively, a cleaner approach would be to put the different translations into different files like so

I18n.translations = {
  en: require('en.json'),
  de: require('de.json'),
  ...
};

Since most of the time the user will only be using one language, it makes sense not to load more languages than needed. So the following will only load the language the phone is using.

let languageCode = I18n.locale.substr(0,2);
I18n.translations = {
  en: require('./en.json')
};
if (languageCode == 'de') {
  I18n.translations.ar = require('./de.json');
}
...

Of course it is tedious to capture all the possible language codes so I’ve create a github repo that already does that you.

Check it out if this is of use to you. Thanks.