Internationalization

React Native Starter

Search…

2.0.0

Getting Started

Architecture

Testing

Internationalization

Adding Pages and Components

Components

Screens

Theming

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
src/translations/index.js
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;
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/translations/en.json
{
  "Common": {
    "minutes": "Minutes",
    "days": "Days",
    "button": {
      "save": "SAVE",
      "cancel": "CANCEL",
    },
    "done": "Done",
  },
  "Settings": {
    "audio": "Audio Enabled?"
  }
}
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/settings/SettingsSection.js
// ... 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>
  );
}
Call to I18t.t('PATH') will return the translated string for the current user language from json file with a path, equal to PATH 
For more information, refer to https://github.com/react-native-community/react-native-localize documentation.

Testing

Adding Pages and Components

Last modified 3yr ago

Copy link

Outline

Adding a new language

Using Translated Strings