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.
Ensure you have the following before beginning this tutorial:
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.
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
.
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:
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:
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
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.
The expo-localization
SDK gives us the user’s device locale by calling the locale
constant, which accesses the device’s language code.
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.
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.
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
.
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 is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowReact Native’s New Architecture offers significant performance advantages. In this article, you’ll explore synchronous and asynchronous rendering in React Native through practical use cases.
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
One Reply to "Internationalization and localization in React Native"
Awesome post here bro, is using react-native-localization a better option? https://www.npmjs.com/package/react-native-localization