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 :
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
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:
{
"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:
// ... 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 updated