How to Localize your Mobile or Web App

If you understand what benefits the app localization will give you, head over to the next section, where we’re going to outline some of the main ways to implement localization.

 
 

🛠 Main approaches to implementing localization

Repository localizations

The simplest solution to implement localization is to store the locale files inside the repository itself, for example, in the JSON format. This way, you’ll have files like en.json, nl.json, de.json inside some folder.

 
 

Localization platforms & tools

A common approach to localization is to use a localization platform that will manage & store the texts on a remote server. Most of the platforms already provide such functionality as repository linking, collaboration tools, 2-way synchronization of the translations, cross-platform integrations etc.

In this section, we’re going to review some of the most popular platforms and give their specific features:

 

Localazy

• Has OTA (over-the-air) capabilities.
• Has a free tier of 200 keys (terms).
• Has an impressive list of integrations {target=_blank rel="nofollow noopener"}, which includes React, Vue, Angular and other less popular frameworks, as well as most of the major repository hosting services and localization file formats.
• Has a sophisticated review system with different versions of translations.

 
 

Lokalise

• Has OTA capabilities.
• Has built-in localization version control.
• Has support for managing plurals.
• There’s an ability to assign and manage localization-related tasks.

 
 

Phrase

• Has OTA capabilities.
• Has numerous integration options.
• Has an in-context editor, where you can see the context of the translation.
• There’s an option to work on different branches, which is good for larger projects.

 
 

POEditor

• Has a nice free plan of 1000 strings.
• Collaborators can leave comments for each string.
• There’s a straightforward flow of file synchronization via webhooks as well as on demand.
• Saves translation history.

So, let’s outline some of the general pros & cons of using a localization platform:

 
 

Google Sheets

Another solution is to use Google Sheets or something similar to store & edit the translations there.

To use the data from the sheet in your React Native app you first need to install the dependencies:

 
 

Step 2: Pulling the translations

Then, we’re going to set up a script that we can use to pull the translations from the sheet. Let’s call it syncLocales.ts and put it into the root of the project:

Here, you’ll need to configure the folder where the locale jsons will be saved. For our example, it would be in /src/strings. Also, you need to add GCP_API_KEY to your .env variables, as well as provide a value to the sheetId constant (the id can be found in the sheet URL).

Next, let’s set up calling this script automatically when the project is built. Go to package.json and add the following lines to the scripts field:

If you already have the postinstall key, you can just add && yarn localize to it. This way, the script will be called every time the project is built or a new dependency is installed, while also being able to pull the texts ad-hoc (i.e. after updating the sheet) by calling yarn localize.

 
 

Step 3: Using the locales in the application

The last remaining thing is to actually use these locales in the app. To do that, we’re going to use react-i18next. Let’s set up a file called i18next.ts and put the following code into it:

Here, you’ll probably want to configure the languages that you import, and the fallback language.
Now, import this file in App.tsx and we’re all set!

You can now use the translations in your components by getting the t function from useTranslation hook in the following way: