xcarpentier / ex-react-native-i18n

💱 ex-react-native-i18n for Expo

ex-react-native-i18n for Expo

Integrates I18n.js with React Native and Expo. Uses the device's locale as default.

Automatic setup

$ npm install ex-react-native-i18n --save

or

$ yarn add ex-react-native-i18n

Usage

Before copy usage see this issue: #7

import I18n from 'react-native-i18n'


class Demo extends React.Component {
  // Async call to init the locale
  componentWillMount() {
    I18n.initAsync();
  }
  render () {
    return (
      <Text>{I18n.t('greeting')}</Text>
    )
  }
}

// Enable fallbacks if you want `en-US` and `en-GB` to fallback to `en`
I18n.fallbacks = true

I18n.translations = {
  en: {
    greeting: 'Hi!'
  },
  fr: {
    greeting: 'Bonjour!'
  }
}

This will render Hi! for devices with the English locale, and Bonjour! for devices with the French locale.

Fallbacks

When fallbacks are enabled (which is generally recommended), i18n.js will try to look up translations in the following order (for a device with en_US locale):

• en-US
• en

Note: iOS locales use underscored (en_US) but i18n.js locales are dasherized (en-US). This conversion is done automatically for you.

I18n.fallbacks = true

I18n.translations = {
  'en': {
    greeting: 'Hi!'
  },
  'en-GB': {
    greeting: 'Hi from the UK!'
  }
}

For a device with a en_GB locale this will return Hi from the UK!', for a device with a en_US locale it will return Hi!.

Device's locale

You can get the device's locale with the RNI18n native module:

import I18n from 'ex-react-native-i18n'
const deviceLocale = I18n.locale

Returns en-US.

I18n.js documentation

For more info about I18n.js methods (localize, pluralize, etc) and settings see its documentation.

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!

ex-react-native-i18n's Issues

'await' is a reserved word

When following the guidelines from the readme:
...
componentWillMount() {
await I18n.initAsync();
}
...

I get the error 'await is a reserved word'.

Using Expo 16.0.0 and 'ex-react-native-i18n' v. 0.0.3.

(If i'm missing some info, please let me now)

Translation goes to fallback with stack navigator

Hello everyone. I'm trying to implement a simple use case with react navigation.
I've set the default locale to "pt-BR", and in the first screen it works great. But after navigate to the second screen, the translation falls back to "en". In the navigation header it still keep the "pt-BR" though.

How can I pass the selected locale to other screens?

Here is my code: https://github.com/marceloHashzen/i18n

Thanks!

ex-react-native-i18n with remote json files ?

First of all sorry to all of you because i know i am asking very silly question.
I already spend some days to approach this requirement i also asked on stackoverflow but i got minus rating on my question please guys if anybody can help then please help me i am very new in react native and i am not getting how i can import remote files ? i already tried fetch but i didn't get anything

I18n.translations = { 'en': require('./en.json'), 'nl': require('./nl.json'), }

instead of above how i can use en.json file like https:www.example.com/en.json

The library needs @unimodules/core but this one is deprecated

Currently i have an app built with expo, in my older builds i had the @unimodules/core installed on the project but those builts started to fail in the proces cause this one is deprecated since Expo SDK 44:
https://blog.expo.dev/expo-sdk-44-4c4b8306584a
https://blog.expo.dev/whats-new-in-expo-modules-infrastructure-7a7cdda81ebc

Is there other way to use your library without @unimodules/core??

I let my error here:
Unable to resolve "@unimodules/core" from "node_modules\ex-react-native-i18n\node_modules\expo-localization\build\ExpoLocalization.js"

upgrade to expo v16

This is no longer working for the latest version of expo, would you please upgrade?

Or I can help to sent a PR.

Please update npm package

Hi @xcarpentier
Thanks to merge my PR

Please update npm package.

Thanks.

react navigation?

Hi, have you used it with react navigation? not too sure how i can pass translations to it, it would only initialize with english and that too, it wont find unless specified in file, the rest works awesome!

How change language

Hi
How i can switch Between language ?
Thanks !

Please update npm package

Hi @xcarpentier !
I use this library oftens and very useful.
Please update npm package v0.0.6, latest is v0.0.5 at npm yet.

Thanks.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Util.getCurrentLocaleAsync is deprecated

Warning in newest 27.0.0 expo build

Both in android and ios locale always returns 'en'

My code:

import I18n from 'react-native-i18n';
const deviceLocale = I18n.locale;

returns 'en' on a Dutch emulator. So does I18n.currentLocale()

Version:

{
  "name": "neemop-app",
  "version": "0.0.0",
  "description": "Hello Expo!",
  "author": null,
  "private": true,
  "main": "main.js",
  "dependencies": {
    "expo": "17.0.0",
    "react": "16.0.0-alpha.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz",
    "react-native-elements": "^0.12.2",
    "react-native-i18n": "git+https://github.com/xcarpentier/ex-react-native-i18n.git",
    "react-navigation": "^1.0.0-beta.11"
  }
}

Update for SDK 31

Hey,

Could you update the plugin to remove the SDK 31 warning?

With the SDK 31, they changed the way Localization works:

Revamped Localization module
Our Localization module has been completely rewritten to work better with community libraries like i18n-js. We now expose most information synchronously so that your app can localize immediately instead of waiting for an asynchronous bridge call. Check out the updated docs.

The plugin now throw a warning:
Expo.DangerZone.Localization.getCurrentLocaleAsync() is deprecated. Use Expo.Localization.locale instead.

The new documentation

Thanks!

Question: Initialization

Do you have to init the library in every components componentWillMount when you want to use translations for that component?
I'm trying to implement localization via a global locale.js file, where i want all the translations to reside, instead of in the specific files where they are used.