How to localize a React Native application
Localization is the process of converting or translating an application’s content to different languages, regions, and cultures. Application content can include text, date formats, number formats, and time zones. However, localization primarily involves translating and adapting textual content. Localization is usually achieved using the following three steps:
String extraction: This step extracts and separates an application’s textual content. This ensures the text can be easily translated without modifying the application’s code.
Translation: This step involves translating the extracted text strings into different languages.
Localization: This step involves replacing the original text strings in the application with their translated versions. This is achieved using a localization library.
Note: To convert the formatting of dates, time zones, and number formats to match the conventions of the target language or region, we can use various libraries, such as
moment.jsanddate-fns. However, this Answer will mainly focus on localizing the textual content of a React Native application.
The react-native-localization library
To localize a React Native application, we can use the react-native-localization library by importing LocalizedStrings from it.
import LocalizedStrings from 'react-native-localization';
String extraction
To localize the content of a React Native application, we first have to extract and separate all the text strings. For that, we use the LocalizedStrings method to define a strings object. This object will contain a language key (i.e., en, es, zh) and a list of key-value pairs with the required localized strings.
The code snippet below shows how to use the LocalizedStrings method.
const languages = new LocalizedStrings({"en": {message:"Localization Example"},"es": {message:"Ejemplo de localización"},"zh": {message:"本地化示例"},"ja": {message:"ローカリゼーションの例"}});
Translation
Once the step above has been completed, we can translate the textual data into different languages. To do so, we can use the setLanguage method that can be called with the languages object we have defined inside the code snippet above. The setLanguage method can be called to change the current language to any other language defined with the languages object.
Note: The first language defined within the
languagesobject is considered the default one.
The code snippet below shows how to use the setLanguage method to translate textual data into different languages.
languages.setLanguage('es');
Localization
Once the translation has been completed, we can replace the original text strings within the React Native application with their translated versions. This depends on how the React Native application is structured. We can use state variables to update the original text strings individually. We can also use global state management libraries to update all the original text strings throughout the application at once.
Code example
Let’s look at an example where we utilize the react-native-localization library to localize a React Native application.
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* <p>This source code is licensed under the MIT license found in the LICENSE file in the root
* directory of this source tree.
*/
package com.reactnativelearning;
import android.content.Context;
import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.android.utils.FlipperUtils;
import com.facebook.flipper.core.FlipperClient;
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
import com.facebook.react.ReactInstanceEventListener;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;
/**
* Class responsible of loading Flipper inside your React Native application. This is the debug
* flavor of it. Here you can add your own plugins and customize the Flipper setup.
*/
public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
final FlipperClient client = AndroidFlipperClient.getInstance(context);
client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
client.addPlugin(new DatabasesFlipperPlugin(context));
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
client.addPlugin(CrashReporterPlugin.getInstance());
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
NetworkingModule.setCustomClientBuilder(
new NetworkingModule.CustomClientBuilder() {
@Override
public void apply(OkHttpClient.Builder builder) {
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});
client.addPlugin(networkFlipperPlugin);
client.start();
// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
// Hence we run if after all native modules have been initialized
ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
if (reactContext == null) {
reactInstanceManager.addReactInstanceEventListener(
new ReactInstanceEventListener() {
@Override
public void onReactContextInitialized(ReactContext reactContext) {
reactInstanceManager.removeReactInstanceEventListener(this);
reactContext.runOnNativeModulesQueueThread(
new Runnable() {
@Override
public void run() {
client.addPlugin(new FrescoFlipperPlugin());
}
});
}
});
} else {
client.addPlugin(new FrescoFlipperPlugin());
}
}
}
}
Code explanation
-
Lines 1–9: We import the required libraries.
-
Lines 13–26: We use the
LocalizedStringsmethod to extract and separate the textual content. We define the localization for the English, Spanish, Chinese, and Japanese languages. -
Lines 28–46: We define different functions for our languages using the
setLanguagemethod to translate textual content into the required language. Once translated, the updated textual content is displayed. -
Line 48: We define the state variable
displayTextthat is used to display the textual content of the application. -
Lines 50–64: We define the application’s UI.
-
Lines 66–83: We define the styles of the application.
Note: We can download and execute the code example above on your local system or machine. Follow the official React Native documentation to set up the development environment. The code example above is for the Android operating system.
Free Resources
