# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactnativestarter.com/internalization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.