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 !