How to Localize your Mobile or Web App

With each year, the number of people using mobile and web apps is rising. Because of this, there’s an increasing need for app content translated into different languages to reach as many people as possible.

This article will review some of the non-trivial reasons for localizing an app, several tools and approaches to it, and offer an easy solution for React Native using Google Sheets.

 
 

👍 Reasons to localize your app

While the most obvious reason for translating the app content into different languages is to reach new audiences, reasons to localize your app are not limited just to this. Moreover, there are some benefits of app localization even if you’re using only 1 language within the application:

• Text content management. This means that content makers or business owners would be able to change/translate texts directly, without having to get in touch with the developers.
• Avoiding duplication of text content. This is especially relevant when you build native iOS and Android apps that share the same UI, but different codebases.
• Content synchronization. This means that, with the right tool, you’ll be able to change the text content of the app without rolling out a new build to the stores. Thus, your users will see changes immediately and without the need to update the application.

 
 

⚙️ Implementation with Google Sheets, React Native, and i18n

In some of our recent projects, we started using Google Sheets for localization — take a look at our Norsk Guardian project, which is a React Native app for checking the status of BLE-integrated batteries. To make this possible, we developed a library called [google-sheets-localization-helpers]{target=_blank rel="nofollow noopener"}, which you can also use in your own projects.

Now, we’re going to outline the main steps to implement localization with Google Sheets & React/React Native.

 
 

Step 1: Creating the spreadsheet & installing the dependencies

First of all, we need to create the spreadsheet itself, and get an API key in Google Console for that account (to get the key follow these steps). Let’s set up the following sheet structure with three languages and one tag column (will be used in the code):

For more information on how to change the languages, as well as to get the language of the user device, please refer to react-i18next documentation.

 
 

💡 Takeaways

Now, let’s summarize some of the main ideas of the article:

• There are many reasons for implementing app localization besides reaching new audiences: text content management, avoiding duplication in code, and content synchronization.
• A good way to implement localization is to use one of the localization platforms, though this might be an overkill for smaller projects.
• A simple yet effective solution is to use Google Sheets for managing text content.