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.
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 :
Create a file called src/translations/de.json
and add translations strings there (see below for explanation on translation strings).
Change the src/translations/index.js
to be the following
src/translations/index.jsimport * 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 fileimport de from './de.json';​// Add the German translation to the listconst 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.
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 indeximport 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.