Skip to main content

Mobile internationalization

The mobile app supports i18n, this guide covers how to work with it.

Basic concepts​

  • We use Poeditor for the translations.
  • All the language files are located on the locales/ folder of the app.
  • The en.json is the base language to generate new terms, all the others are downloaded from Poeditor.
  • English is the fallback language in case a term is not found in the selected language.

Language files format and rules​

  • Languages are stored in JSON format.
  • We support 2 types of tags to replace: {{amount}} for texts and &{amount}& for react Text components.
  • Newline characters are forbidden in the translations (Split the text in many terms and add the newlines on the code).

en.json

{
 "wallet": {
     "title": "Wallet",
     "amount": "{{amount}} tokens",
     "withdraw": "&{amount}& withdraw {{text}}"
 },
 "date":{
   "formats":{
       "small":"%b %-d, %Y",
       "medium":"%a, %b %-d, %Y"
   }
 }
}

There is a pre commit hook in place to prevent the newline characters on the en.json file

Use​

Inside the app the i18n service is in charge of the translations.

import i18n from 'common/services/i18n.service';

// simple string
i18n.t('wallet.title');

// with a parameter
i18n.t('wallet.amount', {amount: ‘20’});

// embedded component
i18n.to('wallet.withdraw',
    {text: 'from your account ###'},
    {amount: <Text style={s.bold}>20</Text>});

// dates
i18n.l('date.formats.small', this.props.from)}

IMPORTANT: Keep the method and the term in the same line ir order to be detected by the unused terms search script

Workflow​

The syncronization of terms to Poeditor is included in our CI flow.

  • All the new terms merged to release/vX.X.X are pushed to Poeditor.
  • To prevent the removal of terms in use by other concurrent builds, only after the production build is cut the deleted terms of the en.json files are removed from Poeditor.

Module diagram Click to enlarge

Unused terms check​

We have a script to detect unused terms of the en.json file:

yarn unused-locales

Download languages files from Poeditor​

One language​

To download a translation from Poeditor just run:

yarn locale download **[language]** --poeditor-key=[poeditorAuthKey]

language: The language code (es, it)

yarn locale download es --poeditor-key="abcd1234...”

All the languages​

To download a translation from Poeditor just run:

yarn locale downloadAll --poeditor-key=[poeditorAuthKey]

yarn locale downloadAll --poeditor-key="abcd1234...”

Keep in mind that this will download even the partially translated languages.

Manually uploading terms to Poeditor​

In case you need to manually upload new terms to Poeditor you can use:

yarn locale upload --poeditor-key=[poeditorAuthKey] [--overwrite=1] [--sync_terms=1]

--overwrite=1: Will overwrite the english translations with the json values\ --sync_terms=1: Will delete from Poeditor the terms removed from the en.json file (The terms will be removed from all the languages)

yarn locale upload --poeditor-key="234sdfsdf...” --overwrite=1 --sync_terms=1