Lokalise supports the react-native-localize 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