I18n in Expo and React Native

Apparently, the whole world doesn’t speak english! Here’s how to add i18n support to your react native project. This article specifically addresses expo, since we’ll be working around i18n tools requiring react-native link.

We’re working on WooToApp, which is a native app builder for WooCommerce Stores. It now features internationalisation and language switching (of course!).

Add the i18n package.

The package is at https://github.com/AlexanderZaytsev/react-native-i18n if you’d like a read. There’s not much to it.

yarn add react-native-i18n or npm install react-native-i18n –save

In App.js we need two things done – load the translations, and load the user device locale.

Load the locale and the translations.

If you’re caching assets during app load (a common pattern for expo), add a promise to grab the device locale and store it in I18n.locale to your load routine.

While we’re here, we’ll define a few basic translations for our testing (down the track, you probably want to fetch() these from your server…). I’ve used Google Translate for this, which will do fine for the initial work of internationalisation.

const localeSet = Expo.Util.getCurrentLocaleAsync().then(function (r) {
  I18n.fallbacks = true;
  I18n.translations = {
    en: {
      pay: 'Pay eng',
      choosePaymentMethod: "Choose a payment method."
    },
    fr_FR: {
      pay: 'Payer',
      choosePaymentMethod: "Choisissez une méthode de paiement."
    },
  };
  I18n.locale = r;
  console.log(r);
  return r;
});

// load fonts, load business rules, load locale now.

Promise.all([...fonts, ...[business, localeSet]])

If you don’t have a preload routine like the above, you should make sure you’ve read and set the locale before outputting any strings.

Note that we’ve made use of a built in expo function to grab the users’ current locale. Expo.Util.getCurrentLocaleAsync() returns the users current locale, e.g. en_AU, fr_FR.
This function was previously Exponent.Util.getCurrentLocaleAsync().

Now we’ve worked out the users’ current locale, assigned it to the I18n library, and added some default translations. Note we’re also logging out the locale so you can check it out while debugging.

The next step is to translate a string in a component in your app – then you can continue internationalising the rest!

Translate strings in a component.

Open your component and import the I18n library.

import I18n from 'react-native-i18n';

Use a string translation you added above. Reload your app, and enjoy the translated goodness.

<Text>{I18n.t('choosePaymentMethod')}</Text>

Switching device locales (Android)

I used a french locale for my local device testing while writing this article.

To get to the locale switcher, I had to navigate:

Settings > General Management > Language & Input > Language. I added French (France) as a language and set that to my current.

It’ll help to keep that settings page open in your app drawer, or you’ll be navigating through a French menu to change it back.