Steps for Localizing React Native App

Intro

The localization itself seems difficult for a React Native app because a usual app consists of three projects: the main JavaScript, Xcode project for iOS, and Android files. But in reality, it is not that complex.

Necessary Packages

• i18next - localization framework (supports plurals, formatting, interpolation, etc.)
• react-i18next - React bindings and helpers
• moment - Date / time handling in JavaScript (contains a lot of locales out of the box)
• react-native-localize - toolbox for React Native
• e.g. react-native-calendars - Some other packages that should be localized

Steps

1. Set up i18next.

A simple setup could look like this. We load resources of the supported languages and provide default and fallback languages.

2. Set up other packages.

For example, moment has locales out of the box, so we don’t need to translate date/time formats again. Just import the desired language data.

Imagine we have a library that also needs localizing, e.g. react-native-calendars. The documentation states the package can be localized – that is good. To simplify and unify even more we can take moment’s locale data and use it for this package.

And then we need add an event listener for language change to be able to set the moment and other packages language reactively.

💡NOTE: Numbers or currency should also be localized, don’t forget about that.

3. Extract all UI strings to .json files.

You can either use one file or create many for every namespace. Just read the i18n docs, it supports plurals, context, interpolation, formatting, nesting, etc.

Then in the code you need to pass those keys to the t function.

4. Add keys for strings that come from backend, so they could be localized on frontend, e.g. Push Notifications.

One of challenges is to localize data which comes from backend. Ideally, the backend should not know the user’s locale. And all translation should happen in-app on the device. A solution to this is to send a key instead of plain text, and by that key provide a translated text using the t function. The same mechanism is used by Apple and Google for localizing Push Notifications. However, the downside is that all possible keys or Push Notifications text must be predefined beforehand.

Here you can find more details on how to localize Push Notifications for both platforms.

• Localised Push Notifications
• Push Notifications iOS
• Push Notifications Android

For backend requests that send some plain text to the mobile app, you can implement a similar system.

5. Extract platform specific keys to .strings (iOS) or .xml (Android) files. This is the case for Push Notifications or InfoPlist.

6. Set up continuous localization

The last step left is ability to continuously localize the app, it is better to accomplish this separately, so that the localization process could go independently. There are some tools and services for this. i18n supports plugins and utils to help automate everything. Third party tools help with connecting to translators and pushing translations on the go. If you need something simple take a look at LingoHub, GitLocalize. If you need some complex solutions with more features check out Smartling or transifex. The principles are alike. But in any case, be aware that some features are not very well supported in React Native.

General Flow

Here LingoHub is used for the example.

1. The platform automatically pulls source files (e.g. en.json) to the dashboard from a GitHub repo.
2. When the base en.json file is changed or new keys are added, provide translations for the changed keys using the platform. Please ask a translator or a native speaker. They can just use the platofrm’s UI to translate.
3. Download the translated and Approved files, it can be done by direct push or creating a PR into develop or masterfrom the translation platform.
4. When the new translations are merged, enable new languages in the app:
   1. for the UI, by importing a new locale into i18n resources.
   2. for the UI, by importing the needed moment locales into the translation setup file, more in the i18n section of the docs.
   3. for the iOS project, by going to Info tab -> Localizations and including the new languages
   4. for the iOS project, by attaching the new languages to the corresponding .strings files (e.g. InfoPlist.strings) using File Inspector on the right pane.
5. Then test the new languages! In some cases, remember to set the appropriate region to see correct date or number formats.

Tips

• moment supports localized formats (LTS, LL, lll), if you want a more custom localized format, take a look at Intl. If you do use Intl you will have to add a polyfill for Android (def jscFlavor = 'org.webkit:android-jsc-intl:+').
• moment can be locale aware, for example it supports first day of week (Monday or Sunday).
• i18n is very robust, has various plugins and utils for backend, linting, post-processing, etc.
• react-i18next has everything that a react app needs (HOCs, hooks, render props, SSR, etc.).
• LingoHub doesn’t allow a lot of formatting translation files; remember that these kind of tools are somewhat limited in terms of React Native. For example, every type of file should have its own project in the dashboard (1 for .json, 2 for .xml, etc.).

Conclusion

That’s pretty it! And remember to check out docs before starting to localize the app. It is possible to achieve almost everything without reinventing the wheel. Happy localizing!