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
Updated 7 months ago