React Native: How to use Localize to translate your React Native application

This guide will walk you through the process of using Localize to translate your React Native application.

What you'll learn

How to use Localize to import files, translate files, export files, as well as load translated files into React Native

Prerequisites

You have an active Localize account
You have experience developing React Native applications
You have abstracted all app copy into a single JSON file

Preparing your app for localization

There are several methods you can use to translate your React Native app but the translation workflow we recommend is a file-based approach using Simple JSON files, a file type that React Native supports natively.

By using React Native’s Native Modules (Android, iOS) you can identify the user’s locale and then use this locale string to select translations from language files downloaded from Localize. If you have hard-coded any copy into your views directly, you will need to apply best practices and abstract your copy into a Simple JSON file that uses key-value pairs to reference individual phrases. Your views should reference this JSON file within the render() function:

import appCopy from “./translations/appCopy.json”;

render() {
   return (
      <h1>{appCopy.last_name_field} {appCopy.first_name_field}</h1>
   );
}

Using the Localize Dashboard to translate your app

Importing your JSON file into Localize

Within your Localize Dashboard go to the Phrases > File Import/Export page
Select Import from the left submenu
Select SIMPLE JSON as your file type
Your source language will automatically be selected as the only language option
Select an import type of Phrases
Upload and submit your file

For example, if your Localize project uses English as the native language, upload a JSON file in English:

{
  "last_name_field": "Last Name",
  "first_name_field": "First Name",
  "submit_button": "Submit"
}

Translate your imported phrases

Using the Localize dashboard, you may translate your source language phrases into as many languages as you need. If you are unfamiliar with the translation workflow, please see our Basic Translation Workflow with Localize video.

Export your translations into new JSON files

Within your Localize Dashboard go to the Phrases > File Import/Export page
Select Export from the left submenu
Select SIMPLE JSON as your file type
Select your desired phrase filtering options
Select what language you want exported
Select an export type of Phrases
Click Export and your browser will download a copy of your new file
Repeat for each language you need in your application
Place a copy of each language file into your codebase and name it to the proper locale string that is returned from React Native’s Native Modules so that you can easily call up the language file as needed.
Alternatively, combine individual language files into one large translation file

After translating your source language file within Localize, you should be able to export it into the language of your choice, such as Spanish. Note that the “key” you gave for each phrase is maintained:

{
  "last_name_field": "Apellido",
  "first_name_field": "Nombre",
  "submit_button": "Enviar"
}

You can store these translations in your codebase either individually as files such as “es.json” or within a single large “translations.json” file so that you can reference specific translations based upon a particular language code such as “en”, “zh”, or “es”. Within your React application you simply need to load the proper translations based upon the language of your user. Since you have abstracted your app copy to use variables, the translations should load seamlessly. In the example below we are assuming a large translation file called “translations.json” that combines all needed languages:

import translations from ‘./translations.json’;

import { NativeModules } from 'react-native';

// iOS
const locale = NativeModules.SettingsManager.settings.AppleLocale || NativeModules.SettingsManager.settings.AppleLanguages[0] // "es”

 // Android
const locale = NativeModules.I18nManager.localeIdentifier // "es"

const appCopy = translations[locale];

render() {
   return (
      <h1>{appCopy.last_name_field} {appCopy.first_name_field}</h1>
   );
}

Test your translated mobile application

Now that your files are properly formatted and loaded into your mobile application, change the language of your emulator or live device to one of your newly installed languages and load up your application. You should see all content properly translated.

Add Localize to your build process

Localize REST API

You can integrate Localize into your build process by writing scripts that make RESTful HTTP requests using the Localize REST API for the import and export of localization files, as well as much more. Our route documentation provides examples of HTTP requests in cURL, Node, Ruby, JavaScript, and Python.

npm module

You may also use our npm module, @localize/node, a Node-based wrapper for Localize’s REST API.

Localize CLI

You can also use the Localize CLI which uses a simple push/pull paradigm to push content into Localize and then pull out the translations.
Read about the CLI