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.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.
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.
Last modified 4yr ago