Internationalization and localization in React Native

Internationalization, or i18n, is the process of building applications that can adapt to different cultures, regions, and languages.

Localization, or l10n, however, involves translating to a locale or language specified by the user and is made possible through internationalization.

Localizing an app means building it to support multiple languages and regions, making the app accessible and usable to a wider range of users.

In mobile app development, localization gets the language and locale from a user’s device — which is not the same as a user’s geolocation — and writes the software to adapt accordingly.

Localizing an application can be generally challenging, but with the help of expo-localization and i18n-js, we will learn how to implement localization into an Expo and bare React Native app.

Requirements

Ensure you have the following before beginning this tutorial:

• Node.js installed on your computer
• Watchman installed if you are using macOS
• React Native set up

Also, apart from the expo-localization SDK, we can use a library like react-native-localize as well. But, this toolbox only supports React Native and does not support Expo apps without ejecting out of Expo because it’s a native module.

Working with expo-localization

The expo-localization SDK gives us access to the locale data of a user’s native device, including the isoCurrencyCodes constant, which returns an array of all the supported currency codes in the user’s device, and the timezone constant, which returns the device’s timezone.

Now, let’s begin by localizing an Expo app with expo-localization and i18n-js.

Creating an Expo app

To get started, let’s generate an Expo app using the Expo CLI. Open a new terminal and run the following command to generate an Expo app:

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

expo init name-of-your-app

Select a blank template. This gives us the minimum dependencies we need to get started.

To open the app, navigate to the root of our newly created app and run the following command accordingly:

# For iOS
yarn ios
# or
npm run ios

# For Android
yarn android
# or
yarn android

The command outputs the following screen:

Installing dependencies

Now that we’ve generated an Expo app, we can install expo-localization and i18n-js as dependencies after navigating into the app directory.

Run either of the following commands to install both packages:

yarn add expo-localization i18n-js
#or
npm i expo-localization i18n-js

Extracting and centralizing the app’s text

An important step in localizing our app is to extract and centralize the text users will interact with into a separate file. This enables us to conditionally render text to our users based on the locale of their device.

First, create a file in i18n/supportedLanguages.js; this is where we want to place all the text the user interacts with that is not code.

In this tutorial, our app will support three languages: English, Chinese, and Spanish. By adding the following lines of code, we create a JavaScript object of key-value pairs. Each language has the same key, but the values are different:

const en = {
  welcome: 'Internationalization and Localization in React Native',
  signoutBtn: 'Sign out',
  signOutAlertTitle: 'Cancel',
  signOutAlertMess: 'Are you sure you want to sign out?',
  confirm: 'Okay',
  resetBtn: 'Reset password',
};
const zh = {
  welcome: 'React Native 中的国际化和本地化',
  signoutBtn: '登出',
  signOutAlertTitle: '取消',
  signOutAlertMess: '您确定要退出吗？',
  confirm: '好的',
  resetBtn: '重设密码',
};
const es = {
  welcome: 'Internacionalización y localización en React Native',
  signoutBtn: 'desconectar',
  signOutAlertTitle: 'Cancelar',
  signOutAlertMess: '¿Estás segura de que quieres cerrar sesión?',
  confirm: 'Okey',
  resetBtn: 'Restablecer la contraseña',
};
export { zh, en, es };

Later, we will import these different languages to replace the current string with the key’s value that represents the text of the user’s locale.

Getting the user’s device locale

The expo-localization SDK gives us the user’s device locale by calling the locale constant, which accesses the device’s language code.

Adding internationalization functionality

Let’s import the two packages we recently installed and our language configuration file to add the internationalization functionality:

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
import { zh, en, es } from './i18n/supportedLanguages';

After the import statements, add the following line of code:

i18n.fallbacks = true;
i18n.translations = { en, zh, es };
i18n.locale = Localization.locale;

By specifying i18n.fallbacks = true, we are enabling the locale fallback feature. This means, for example, that if we don’t specify what the text for “Reset password” is in Spanish, the text will fall back to the default language.

Setting i18n.translations = { en, zh, es } specifies the key-value pairs of the languages we want to support in our app.

And, with i18n.locale = Localization.locale, we are setting the locale of our app based on a user’s device settings.

Localizing app text with i18n-js

To get the localized text onto the app, we need to call the i18n.t() function, and pass in the key we want to translate as a string.

Let’s say we want to localize the welcome text of our app. We can add the following:

>// jsx
<Text>{i18n.t('welcome')}</Text>

This gives us the value of the welcome key in our configuration object we imported based on the locale of the user’s device.

To demonstrate localization for a device on an iOS simulator, open the device settings, and navigate to General > Language & Region > iPhone Language. Select Chinese or Spanish to see how the text will conditionally render according to the selected language.

On an Android iOS emulator, open Menu > Setting > Language & Keyboard > Select Locale.

With the locale selected, the final localized Expo app on an iOS simulator looks like the following:

If we want to change the device locale without going into the device settings, we can change i18n.locale = Localization.locale to i18n.locale ='es' to get the localized version of the app in Spanish or whatever language code the app supports.

Note that this is for testing purposes only.

Bare React Native app

Generating a new React Native project

To get started with our bare React Native app, let’s generate a React Native project using the following command:

npx react-native init ReactNativeLocalize

This will generate an empty React Native project and install all the necessary dependencies.

To open the app, navigate to the root of our newly created app and run the following command accordingly:

# To start Metro
npx react-native start

#open a new terminal and run:
npx react-native run-android
# or
react-native run-ios

Let’s see how we can use the expo-localization SDK together with 18n-js in a bare React Native app. To begin, install and configure the react-native-unimodules package with the following dependencies in our bare React Native project:

yarn add react-native-unimodules
yarn add pod-install

#or

npm install react-native-unimodules
npx pod-install

Next, follow these additional configurations to the app for iOS and Android.

Now, we can install the needed dependencies. Run either of the following commands to install both packages:

yarn add expo-localization i18n-js
#or
npm i expo-localization i18n-js

After the installation, follow the same steps we used in our Expo app to localize the bare React Native app.

Here is a working demo of a localized bare React Native app with the expo-localization SDK and 18n-js.

Conclusion

With internationalization, we easily localized an Expo and bare React Native app. By using expo-localization and the i18n-js internationalization library, we rendered a localized version of both apps’ text using the i18n.t() function.

The full code used in this tutorial for the Expo and bare React Native project is available on GitHub. Feel free to drop a comment to let me know what you thought of this article. You can also find me on Twitter and GitHub. Thank you for reading!

LogRocket: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.