Formatting Numbers in React Native

JavaScript

React Native

Android

bam

formatting

Numbro

toLocaleString

number

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 !

Articles similaires