Skip to main content
React Native (i18n, .js)
Ilya Krukowski avatar
Written by Ilya Krukowski
Updated over a week ago

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.

Additional reading

Did this answer your question?