i18n-js and React Native to localize currency

Internationalization, in short, i18n is important for distributing product across world. We want to introduce how to internationalize currency visualization based on locale.

Motivation

When we start to implement i18n to our app, we found expo official document. It looks simple and works well but we could not find how to visualize currency for each locale. Unfortunately, it’s hard for us to search & find info because there is no deep document in official npm and GitHub. Therefore, we decided to write new blog post for helping other developers who is in similar situation.

Solution – Set currency format in i18n translations

You can define currency format in translations area described in in the expo official document. In detail, You just need to add number.currency.format. If You can refer other parts

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
// Set the key-value pairs for the different languages you want to support
i18n.translations = {
  ja: {
    number: {
      currency: {
        format: {
          delimiter: ',',
          format: '%n%u',
          precision: 0,
          separator: '.',
          unit: '円',
        },
      },
    },
  },
};
// Set the locale once at the beginning of your app.
i18n.locale = Localization.locale;

// Visualize text as currency
i18n.toCurrency(price)

Based on the official npm, you can find definition of each option.

Name	Description
precision	sets the level of precision
separator	sets the separator between the units
delimiter	sets the thousands delimiter
format	sets the format of the output string
unit	sets the denomination of the currency
strip_insignificant_zeros	defaults to false
sign_first	defaults to true

Of course, it is dull to research and define for each currencies, so you can consider to refer other language’s rich i18n example. We referred ja.yml and transform it as JavaScript format. You can find de-DE.yml, fr-FR.yml .. etc.

Reference

• GitHub issue to find what parameter toCurrency use
• Expo localization document
• Ricky’s blog post