Formatting Numbers in React Native

Introduction

Small details are what make the difference between an average app and a great one, aren't they ? This article will give you solutions to display properly formatted figures in order to help your React Native app look professional.

Easiest way : Use toLocaleStRing()

JavaScript provides a method toLocaleString() that transforms a number into a string representing a formatted number or date in the specified locale.

ex:

// Number

const number = 123456.789;
console.log(number.toLocaleString("fr-FR")); // output: 123 456,789

Troubles using toLocaleString() with React Native on Android...

By default React Native doesn’t handle this method properly on Android. It just returns a non-formatted number. On iOS toLocaleString() just works fine with its default settings.

Why this issue on Android ?

In order to build an app, React Native uses a virtual machine JavaScriptCore.

• On iOS, it uses the JavaScriptCore provided by the iOS platform that already includes the toLocaleString() method.
• On Android it bundles the JavaScriptCore along with the application. In order to limit the app size, React Native uses a flavor that doesn’t include all JavaScript methods.

How to have toLocaleString() work on React Native Android ?

In order to use toLocaleString() on Android, you need to update the JavaScriptCore flavour used to build your Android app. To do so, all you need is to replace:

def jscFlavor = 'org.webkit:android-jsc:+'

in your android/app/build.gradle into:

def jscFlavor = 'org.webkit:android-jsc-intl:+'

Then you can just use toLocaleString() method as described in Mozilla’s doc and it will work fine on both iOS and Android apps !

To go further: use Numbro.js

Numbro.js is a reliable library that helps format numbers in numerous different formats, and that enables locales customization.

Example of formatted numbers with Numbro :

134k
230 123,45€
23.000
£ 25,000.45
6:58:43

Installation

yarn add numbro

npm install numbro

Setup

First, one needs to config Numbro’s language by binding it to the app’s locale.

switch (appLocale) {
  case "fr":
    numbro.setLanguage("fr-FR");
    break;
  default:
    numbro.setLanguage("en-GB");
    break;
}

Existing language formats can be modified, and custom language can even be created:

numbro.registerLanguage({
  languageTag: "xx-XX",
  delimiters: {
    thousands: ",",
    decimal: "."
  },
  abbreviations: {
    thousand: "k",
    million: "m",
    billion: "b",
    trillion: "t"
  },
  ordinal: () => {
    return "";
  },
  currency: {
    symbol: "€",
    position: "postfix",
    code: "EUR"
  },
  formats: {
    fourDigits: {
      totalLength: 4,
      spaceSeparated: true,
      average: true
    },
    fullWithTwoDecimals: {
      output: "currency",
      mantissa: 2,
      spaceSeparated: true,
      thousandSeparated: true
    },
    fullWithTwoDecimalsNoCurrency: {
      mantissa: 2,
      thousandSeparated: true
    },
    fullWithNoDecimals: {
      output: "currency",
      spaceSeparated: true,
      thousandSeparated: true,
      mantissa: 0
    }
  }
});

Usage

Numbro is now ready to be used in the code:

• Thousands and decimals delimitation:

// xx-XX language

numbro(23425.45).format({
  thousandSeparated: true,
  mantissa: 2 // number of decimals displayed
});

// Output: 23,425.45

• currencies:

// xx-XX language

numbro(23425.45).formatCurrency();

// Output: $ 23.43k

• time:

// xx-XX language

numbro(122).formatCurrency();

// Output: 0:02:02

• ordinal numbers:

// xx-XX language

numbro(1).format({ output: "ordinal" });
numbro(2).format({ output: "ordinal" });
numbro(3).format({ output: "ordinal" });
numbro(122).format({ output: "ordinal" });

// Outputs: 1st / 2nd / 3rd / 122th

And some other features, such as negative numbers handling, binary numbers, percentages…

Numbro can also unformat with:

numbro.unformat(...)

Finally…

In most projects toLocaleString() will be enough to format numbers. But if you want to use more specific formats or to customize your locales, Numbro.js will be a great support !