# Internationalization

We understand that your users can speak many different languages, so we've included an internalization support into the React Native Starter. It's done with the help of <https://github.com/react-native-community/react-native-localize> and <https://github.com/fnando/i18n-js>.

All the translations files live under the `src/translations` folder. Translation for each language are placed inside the json files 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/translations/de.json` and add translations strings there (see below for explanation on translation strings).
2. Change the `src/translations/index.js` to be the following

{% code title="src/translations/index.js" %}

```javascript
import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';

import en from './en.json';
import ru from './ru.json';

// Import newly added language file
import de from './de.json';

// Add the German translation to the list
const translations = { en, ru, de };

const { languageTag } = RNLocalize.findBestAvailableLanguage(
  Object.keys(translations),
) || { languageTag: 'en' };

i18n.locale = languageTag;
i18n.fallbacks = true;
i18n.translations = translations;

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/translations/en.json" %}

```javascript
{
  "Common": {
    "minutes": "Minutes",
    "days": "Days",
    "button": {
      "save": "SAVE",
      "cancel": "CANCEL",
    },
    "done": "Done",
  },
  "Settings": {
    "audio": "Audio Enabled?"
  }
}
```

{% 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/settings/SettingsSection.js" %}

```javascript
// ... All the imports

// Import from your translations index
import I18t from '../translations';

export default function SettingsSection() {
  return (
    <View>
      <Text>{I18t.t('Settings.audio')}</Text>
      <Button>{I18t.t('Settings.Common.button.save')}</Button>
    </View>
  );
}
```

{% 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;

For more information, refer to <https://github.com/react-native-community/react-native-localize> documentation.