Internationalization

Internationalization

We understand that your users can speak many different languages, so we've included an internalization support into the app.

All the translations files live under the src/i18n folder. Translation for each language are placed inside src/i18n/locale folder with locale names.

Adding a new language

In order to add a new language you need to do 3 simple steps. Let's imagine you're adding a support for German language :

1. Create a file called src/i18n/locale/de.js and add translations strings there (see below for explanation on translation strings).

2. Change the src/i18n/i18n.js to be the following

src/i18n/i18n.js

import { I18nManager } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import I18n from 'react-native-i18n';

import fr from './locales/fr';
import en from './locales/en';
import de from './locales/de'; // add importation of de file created

I18n.fallbacks = true;

AsyncStorage.getItem('@userlangue', (err, result) => {
  if(result) {
    if(result === 'en') {
      I18n.locale = 'en';
    } else if(result === 'fr') {
      I18n.locale = 'fr';
    } else if(result === 'de') { // add a new condition for your new language
      I18n.locale = 'de';
    }
  }
  else {
    I18n.locale = 'fr';
  }
});

I18n.translations = {
  fr,
  en,
  de, // don't forget to call
};

I18nManager.allowRTL(I18n.locale in I18n.translations);

I18n.start  = I18nManager.isRTL ? 'right' : 'left';
I18n.end    = I18nManager.isRTL ? 'left' : 'right';

export default I18n;

And now you can use translations in your files.

Using Translated Strings

First of all, let's see, how to define translations string in translation files. Look at the example translation file:

src/i18n/locale/en.js

"auth": {
        "login": {
            "email_field": "Email",
            "password_field": "Password",
            "login_button": "Login",
            "forgot_password": "Forgot password ?",
            "label_or": "Or",
            "login_facebook": "Login with facebook",
            "label_signup": "Dont have an account ? ",
            "button_signup": "Sign up",
        }
    }

In such file you define your translated strings as a nested JSON.

After you defined your translations, you can use it anywhere in your code like this:

src/scenes/auth/login/index.js

// ... All the imports

// Import from your translations index
import I18n from '../../../i18n/i18n';

export default function L() {
  return (
 // code ....
    <View style={styles.boxContainer}>
        <View style={styles.boxInput}>
          <TextInput
            placeholder={I18n.t('auth.login.email_field')}
          />
        </View>
      </View>
  // code ....
  );
}

Call to I18t.t('PATH') will return the translated string for the current user language from json file with a path, equal to PATH