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 ++code>toLocaleString()++/code> that transforms a number into a string representing a formatted number or date in the specified locale.

ex:

++pre>++code>// Number

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

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 ++code>toLocaleString()++/code> 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 ++code>toLocaleString()++/code> 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:

++pre>++code>def jscFlavor = 'org.webkit:android-jsc:+'
++/code>++/pre>

in your ++code>android/app/build.gradle++/code> into:

++pre>++code>def jscFlavor = 'org.webkit:android-jsc-intl:+'
++/code>++/pre>

Then you can just use ++code>toLocaleString()++/code> 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 :

++pre>++code>134k
230 123,45?
23.000
£ 25,000.45
6:58:43
++/code>++/pre>

Installation

++pre>++code>yarn add numbro
++/code>++/pre>++pre>++code>npm install numbro
++/code>++/pre>

Setup

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

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

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

++pre>++code>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
   }
 }
});
++/code>++/pre>

Usage

Numbro is now ready to be used in the code:

• Thousands and decimals delimitation:

++pre>++code>// xx-XX language

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

// Output: 23,425.45
++/code>++/pre>

• currencies:

++pre>++code>// xx-XX language

numbro(23425.45).formatCurrency();

// Output: $ 23.43k
++/code>++/pre>

• time:

++pre>++code>// xx-XX language

numbro(122).formatCurrency();

// Output: 0:02:02
++/code>++/pre>

• ordinal numbers:

++pre>++code>// 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
++/code>++/pre>

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

Numbro can also unformat with:

++pre>++code>numbro.unformat(...)
++/code>++/pre>

Finally?

In most projects ++code>toLocaleString()++/code> 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 !