We support react-native-i18n implementation for React Native localization.

We provide the localization files with the JSON Object that react-native-i18n library handles. Consult the library documentation for usage details.

You may also check our guide on implementing React Native internationalization from scratch.

Export

The export generates one file per language and a master file that sets up the react-native-i18n library.

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;

Import

You can edit exported files and import them again to quickly update and add new keys.

If you are carrying out an import we expect this format:

{language_iso}.js

export default {
  "key": "translation",
  "nested": {
    "key": "translation"
  }
};

We also support JSON file import.

Usage

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).

{
  "optionOne": "Hello {{name}}",
  "optionTwo": "Hello %{name}"
}
I18n.t("optionOne", {name: "Joan"}); // Hello Joan
I18n.t("optionTwo", {name: "Anthony"}); // Hello Anthony

Plurals

Plurals are supported as well:

{
  "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
Did this answer your question?