Multi-language Support for Hospitality Platform

Overview

To enable localization support for the existing web and the hybrid application build using React Native. One fundamental requirement is to bring the localization support, keeping the flexibility in maintaining the translation services that require no frequent force release.

Implemented a pipeline that starts with extracting the localizable strings from the source and generating the JSON-based (PO) data out of it. These objects are maintained in the cloud for the translator to add the translations.

Challenge

This web + hybrid mobile SDK enables hotel management to manage the guest’s requests and provide smooth service. The requirement from the client is to bring the localization support for the mobile app, keeping the flexibility in maintaining the translation services that require no frequent force release. This hotel management application is a mixture of a few parts as a web application running in react-native web view and the rest as a react-native application. The language switching is built as part of a web application. The main challenge faced is creating a communication channel between react-native and web applications.

Complex available solutions - Though Localization is not supported by default in react-native, there are a few available third-party libraries like i10n that provides localization support for react-native apps.

Solution

We created a set of bridge JavaScript methods and injected them into the web view on application load. The web app triggers the methods of language change events, and the react-native listeners act on the callbacks.

Extraction - The application code was hard-coded with English strings throughout the project. We had to provide a mechanism to extract the hard-coded English strings from the project, export them into a human-readable format, and share it with the translators for generating the translated string.

We created a pipeline for this process with a set of grunt tasks for extracting the strings from the project using Regex, creating a human-readable JSON-based (PO) format, and generating a template out of the PO file, upload to the cloud where a translator can pick and provide translations. We also had the provision to read the cloud bucket for new language support and provide it to the User without publishing the application.

Outcome

Those solutions are complex and use heavy dependencies like redux etc, to achieve the goal. We proposed a simplistic solution that doesn’t involve any external library.