React Native Localization

What is Localization in React Native?

Localization in React Native is the process of adapting your app’s content and interface to different languages and cultures. This involves translating your app’s texts, audio, video, date and time formats, currency symbols, etc. to the target language and region.

Localization can help you provide a better user experience for your app’s users who speak different languages or live in different countries. It can also help you comply with the local laws and regulations regarding language and content.

Some people confuse Localization with Internationalization. They're not the same. Internationalization is the process of designing and developing your app in a way that makes it easy to localize later. Internationalization involves using standard formats, avoiding hard-coded strings, supporting multiple character sets, etc.

Localization is usually done after internationalization when you have a working app that can be customized for different locales. We can achieve this by using the react-native-localization package.

About version 1.x in react-native-localization

react-native-localization is a library that simplifies the localization process in React Native apps. It allows developers to easily manage multiple languages and cultures in their apps by using JSON files that contain the text strings and their translations.

react-native-localization was created by Stefano Falda in 2015. In 2020, he handed over the project to Federico Boschetti, who is currently the main maintainer.

The latest version of react-native-localization is 2.x, which was released in October 2020. It introduces some breaking changes and new features compared to version 1.x, such as:

• Support for TypeScript
• Support for Expo
• Support for dynamic updates of locale
• Support for plural forms
• Support for fallback languages
• Improved performance

However, version 1.x is still widely used by many developers and projects, so we will focus on it in this article. If you want to learn more about version 2.x, you can check out its documentation here: react-native-localization 2.x

Installation

To install react-native-localization, you need to follow these steps:

1. Install the Library Using npm or yarn:

Manual Installation for iOS:

1. In XCode's "Project navigator", right click on the Libraries folder under your project ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-localization and add the ReactNativeLocalization.xcodeproj file
3. Add libReactNativeLocalization.a to Build Phases -> Link Binary With Libraries
4. Build and run

Manual Installation for Android:

1. Add the following code in android/settings.gradle

2. Add the following code in android/app/build.gradle

3. register module (in MainApplication.java)

2. Install react-native-device-info Module Using npm or yarn:

This module is used by react-native-localization to detect the device language and culture.

3. Create a folder called localization in the root of your project and add your JSON files that contain your text strings and their translations for each language and culture supported by your app.

For example:

4. Import your JSON files into your code using the react-native-localization library.

For example:

How Does Localization Work in React Native?

Localization in React Native works by using JSON files that contain the text strings and their translations for each language and culture supported by the app.

For example:

These JSON files are stored in a folder called localization at the root of the project. The name of each file corresponds to the language code (and optionally the country code) of the language and culture it represents.

For example:

The JSON files are then imported into the code using the react-native-localization library. The library provides a strings object that contains all the text strings and their translations for the current language and culture of the device.

For example:

The library automatically detects the current language and culture of the device using the react-native-device-info module and selects the appropriate JSON file to use. If no JSON file matches the device language and culture, it falls back to a default language that can be specified by the developer.

The library also provides some methods and properties that can be used to manipulate or access information about the localization process in React Native.

For example:

Facilities of react-native-localization

react-native-localization provides some facilities that make localization easier and more effective in React Native apps.

Some of these facilities are:

• Automatic detection of device language and culture using the react-native-device-info module.
• Automatic selection of appropriate JSON file based on device language and culture.
• Automatic fallback to default language if no JSON file matches device language and culture.
• Change the current language dynamically using the "setLanguage" method.
• Change the default language dynamically using the "setDefaultLanguage" method.
• Format strings with placeholders using the "formatString" method.
• Replace text strings dynamically using the "setContent" method.
• Access original text strings before replacement using the "getRawContent" method.
• Access information about current language, default language, interface language, and available languages using "getLanguage", "getDefaultLanguage", "getInterfaceLanguage", and "getAvailableLanguages" methods respectively.
• Support for native modules, which means you can access the same configuration values from your native code (Java, Objective-C, Swift) using the ReactNativeLocalization class.

APIs of React Native Localization

react-native-localization provides some APIs that can be used to manipulate or access information about the localization process.

These APIs are:

• LocalizedStrings: This is the main class that provides the strings object and its methods and properties. It takes an object as a parameter that contains the JSON files for each language and culture supported by the app.

For example:

• strings.getLanguage(): This method returns the current language of the app. For example:

• strings.setLanguage(languageCode): This method sets the current language of the app to the specified language code. For example:

• strings.getDefaultLanguage(): This method returns the default language of the app. For example:

• strings.setDefaultLanguage(languageCode): This method sets the default language of the app to the specified language code. For example:

• strings.getInterfaceLanguage(): This method returns the interface language of the device. For example:

• strings.getAvailableLanguages(): This method returns an array of the available languages supported by the app. For example:

• strings.formatString(string, ...values): This method returns a formatted string with placeholders replaced by the specified values. For example:

• strings.setContent(object): This method replaces the text strings with new ones specified by the object parameter. For example:

• strings.getRawContent(): This method returns the original text strings before replacement. For example:

Configuration

react-native-localization allows some configuration options that can be used to customize its behavior.

These options are:

customLanguageInterface: This option allows you to specify a custom function that returns the interface language of the device instead of using the react-native-device-info module.

For example:

pseudoLocalization: This option allows you to enable pseudo-localization for testing purposes. Pseudo localization is a technique that replaces text strings with fake characters that mimic the appearance of different languages and cultures. It helps developers to identify any issues or bugs related to localization in their apps.

For example:

React-native-localization Use Cases

react-native-localization can be used for various use cases in React Native apps that require localization.

Some of these use cases are:

1. Displaying text in different languages and cultures based on device settings or user preferences.
2. Displaying date and time formats, number formats, currency symbols, etc. in different languages and cultures based on device settings or user preferences.
3. Displaying images, icons, sounds, etc. in different languages and cultures based on device settings or user preferences.
4. Displaying error messages, alerts, notifications, etc. in different languages and cultures based on device settings or user preferences.
5. Displaying navigation menus, buttons, labels, etc. in different languages and cultures based on device settings or user preferences.

How to Update/Overwrite Locale?

Sometimes, you may want to update or overwrite the current locale of your app without changing the device settings or restarting the app. For example, you may want to let users choose their preferred language and culture from a list of options in your app. To do this, you can use the setLanguage method of the react-native-localization library to change the current locale dynamically.

For example:

In the example above, we used a state variable "language" to store the current language of the app. We also used a function called "handleLanguageChange" to update the state variable and call the "setLanguage" method with the selected language code. We then use buttons to trigger this function with different language codes.

How to Work with Expo-Location?

Expo-location is a module that provides access to location data such as latitude, longitude, altitude, speed, etc. It can be used in conjunction with react-native-localization to get or set the current locale based on location data.

1. Install the expo-location module using npm or yarn:

2. Import the expo-location module into your code using Expo’s import syntax:

3. Use expo-location’s methods and properties to get or set location data.

For example:

In this example above, we used expo-location’s "getCurrentPositionAsync" method to get the current location data asynchronously. We then use expo-location’s reverseGeocodeAsync method to get the current locale based on the latitude and longitude values asynchronously. We then use react-native-localization's setLanguage method to set the current locale based on the country code value from the locale data.