# 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

{% code title="src/i18n/i18n.js" %}
```javascript
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;

```
{% endcode %}

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:

{% code title="src/i18n/locale/en.js" %}
```javascript
"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",
        }
    }
```
{% endcode %}

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:

{% code title="src/scenes/auth/login/index.js" %}
```javascript
// ... 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 ....
  );
}
```
{% endcode %}

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

