Lokalise supports the react-native-i18n implementation for React Native localization. This setup allows you to manage and translate your localization files efficiently, leveraging the JSON Object format handled by the react-native-i18n library.
Technical information
Overview
Format name:
React Native
File extensions:
.js
Common use cases:
Managing and organizing localization strings in React Native applications using the react-native-i18n library.
Technical details:
Structure: Localization files for React Native are provided in the JSON Object format. Each file contains key-value pairs representing the localized strings for a specific language.
Encoding: UTF-8
Files structure
Here's an example of localization files for English and Russian, as well as the i18n setup file:
en.js
export default {
"key": "en translation"
};
ru.js
export default {
"key": "ru translation"
};
i18n.js
import I18n from 'react-native-i18n;
import en from 'locale/en.js'
import ru from 'locale/ru.js'
I18n.fallbacks = true;
I18n.translation = {
en,
ru
};
export default I18n;
Export
The export process generates one file per language and a master file that sets up the react-native-i18n library. The format of these files ensures that they can be easily imported back into your project for quick updates and additions.
Example export format:
{language_iso}.js
export default {
"key": "translation",
"nested": {
"key": "translation"
}
};
Import
You can edit exported files and import them again to quickly update and add new keys. Additionally, JSON file imports are supported for convenience.
Example import format:
{language_iso}.js
export default {
"key": "translation",
"nested": {
"key": "translation"
}
};
Translations usage
To use the localized strings in your React Native application, import the I18n instance and reference the keys as needed:
import I18n from 'i18n'
class Demo extends React.Component {
render () {
return (
<Text>{I18n.t('greeting')}</Text>
)
}
}
Placeholders
This format requires named placeholders, which are not covered by our universal placeholder system. Named placeholders can be used as follows:
{
"optionOne": "Hello {{name}}",
"optionTwo": "Hello %{name}"
}
I18n.t("optionOne", {name: "Joan"}); // Hello Joan
I18n.t("optionTwo", {name: "Anthony"}); // Hello Anthony
Plurals
Plurals are supported in the localization files, allowing for proper grammatical adjustments based on quantity:
{
"inbox": {
"one": "You have one message",
"other": "You have %{count} messages"
}
}
I18n.t("inbox", {count: 1}); // You have one message
I18n.t("inbox", {count: 10}); // You have 10 messages
Using with Lokalise
Lokalise supports React Native files, making it easy to manage and translate your localization strings within the platform.
Supported project types
Please note that React Native files can be uploaded only to Web and mobile projects.