toLocaleString straight up doesn't work on Android

I have reviewed the documentation
I have searched existing issues

there are a bunch, but the most recent seems to have been unceremoniously closed 🤐
see also

I am using the latest React Native version

Description

I would like to render a number as a properly formatted currency string.

I would also like the implementation to behave the same across both iOS and Android.

Sample code:

const someNum = 1000;

const App = () => (
  <View style={styles.container}>
    <Text>
      {someNum.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
    </Text>
  </View>
);

// iOS: $1,000
// Android: 1000

Environment

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 10.1.0
  Yarn: 1.6.0
  npm: 6.0.1
  Watchman: 4.9.0
  Xcode: Xcode 9.3.1 Build version 9E501
  Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Steps to Reproduce

Expo Snack

Expected Behavior

I thought it would return '$1,000' on both iOS and Android.

Actual Behavior

This only works on iOS; in this example no formatting happens at all on Android.

Screenshots

Android

iOS

No temple gods answering yet i see...

The problem still there, sacrifice another goat? Maybe a bigger one?

Airbnb wrote a blog post that mentioned this issue. It seems to be caused by Android running an outdated version of JavaScriptCore.

There's another issue open that's discussing a potential JSC update: #19737

As a workaround, you can use this:
https://github.com/react-community/jsc-android-buildscripts

@rgabriel18

@rgabriel18 I lol'd a lot.

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

This issue still exists.

This is an issue with Javascript core used to run react native in Android and not with react native itself. To overcome this, you'll have to integrate latest javascript core into your android build or upgrade react native to 0.59.

The details are documented in JSC Android Buildscripts repo. You can actually close this issue.

Now for people who would like to do the locale string formatting without needing to integrate the entire javascript core, Javascript has Internationalization API which lets you format numbers to language sensitive format. Documentation available at MDN

This API is not available in android and needs to be polyfilled using Intl

In your project root, install the Intl library

yarn add intl

And then in your project's index file (index.js) add the following code at the top of the file:

if(Platform.OS === 'android') { // only android needs polyfill
  require('intl'); // import intl object
  require('intl/locale-data/jsonp/en-IN'); // load the required locale details
}

After doing the above two steps, you can now get locale string anywhere in your project using

new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(10000000);

In case you need to format number for another locale code, all the locale code details are available under the intl/locale-data/jsonp/ directory. Simply require the ones you need in your index.js file. Hope it helps.

And the fucking issue still exist

Since Facebook locked and closed
#15717 and this is being discussed elsewhere, I'm following suit and closing this off 🙇🏻‍♂️

06 : maj searchform : bug date.toLocaleDateString() : cf. react/react…


export function roundValue(value) {
  return _.round(value, 2).toLocaleString('eu', {
    style: 'currency',
    currency: 'EUR',
  });
}

Here is the function I used to display localized price for EUROPE. This only works on ios.

To make it work on Android
just install intl using npm install intl

And then in your project's index file (index.js) add the following code at the top of the file:

import { Platform } from 'react-native';

if (Platform.OS === 'android') {
  require('intl');
  require('intl/locale-data/jsonp/fr-BE');
  require('intl/locale-data/jsonp/nl-BE');
  require('intl/locale-data/jsonp/it-IT');
}

It now works for both android and ios.

Use this method instead of using toLocaleString :

number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

https://stackoverflow.com/a/45084376/9248521

Navigation Menu

Repository navigation

toLocaleString straight up doesn't work on Android #19410

Description

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Screenshots

Android

iOS

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

toLocaleString straight up doesn't work on Android #19410

Description

Description

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Screenshots

Android

iOS

Activity

rgabriel18 commented on Jun 8, 2018

bilalq commented on Jun 19, 2018

luco commented on Jul 24, 2018

stale commented on Oct 22, 2018

bilalq commented on Oct 24, 2018

DaniAkash commented on Oct 30, 2018

ardyfeb commented on Dec 7, 2018

jpdriver commented on Dec 7, 2018

maulikdhameliya commented on Mar 25, 2019

ehsunoo commented on Apr 25, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions