toLocaleString wrong format on Android

[filipboev]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Mojave 10.14.1
Node: v11.1.0
Yarn: 1.12.3
npm: 6.4.1
Watchman: 4.9.0
Xcode: Xcode 10.0 Build version 10A255
Android Studio: 3.1.3 Build #AI-173.4819257

Packages: (wanted => installed)
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0

Target Platform: Android (8.0)

Steps to Reproduce

1. Open a fresh React Native project
2. Make sure you're not debugging JS remotely
3. Try to use toLocaleString on a Date() object

  let formatted = new Date('2017-11-17T10:59:30.527Z').toLocaleString('de-DE', {
    timeZone: 'Europe/Zurich',
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
  })

4. Either write up a simple component to display text or do an alert/console.log with the aforementioned variable.

Expected Behavior

The expected string should be as follows:

Imput: 2017-11-17T10:59:30.527Z -> Output: 17.11.2017, 11:59

Actual Behavior

The resulting string is as follows:

Imput: 2017-11-17T10:59:30.527Z -> Output: Fri Nov 17 11:59:30 2017

My contention is that this is an issue with the underlying JS engine that Android uses, and handles it differently as opposed to the integrated JS engine on iOS, hence the variance in the date format. For this reason if you open a remote debugged, say on Chrome, you will actually get the correct format, due to the different JS engine handling it, but if you switch off the debugger and resume using the application whilst not debugging remotely, the incorrect format will be shown.

Reproducible Demo

Here's an example Expo project that shows the behaviour, toggle between iOS and Android to see the difference in the output.

https://snack.expo.io/Bk3unwhyM

EDIT: Updated environment in which this is still reproducible.

[hey99xx]

Pretty much same as #12597 So yes, it's JSC version on Android being old and not supporting localization methods to the full extent. If you're ambitious about it maybe you can try https://github.com/SoftwareMansion/jsc-android-buildscripts#international-variant-1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[oriharel]

This issue must exist.

[aayushis12]

The same issue is with me
I am making a react-native project in which I have a function which is like this
console.log("Formatter",(2500).toLocaleString('en-US', { style: "currency", currency: "USD", minimumFractionDigits: 0, }))
The expected output should be "$2,500"
But what I get on my console is "Formatter 2500"

[rgabriel18]

Using react-native 0.50.4
The problem is here alright, cannot format a number to currency.

Could get arround the issue by using Currency Formatter

Still, would be nice to have this working

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[kholiavko-roman]

Issue still present in the latest version.

[erlike]

Issue still present

[anchetaWern]

I also encountered this issue. Too bad I was only testing on iOS so I got puzzled when things are breaking for Android. Turns out toLocaleString() isn't working for Android.

Had to use the following function as an alternative for formatting the date:

getLocalDateTime(new Date());

function getLocalDateTime(date) {

  let hours = date.getHours();
  if (hours < 10) hours = '0' + hours;

  let minutes = date.getMinutes();
  if (minutes < 10) minutes = '0' + minutes;

  let timeOfDay = hours < 12 ? 'AM' : 'PM';

  return date.getMonth() + '/' + date.getDate() + '/' +
         date.getFullYear() + ', ' + hours + ':' + minutes + " " + timeOfDay;
}

[AlirezaAkbarix]

Guys nothing to do?

[AlirezaAkbarix]

It's a real shame, to those who are using toLocaleString() method for Currency you can use this code for now:

`
_getPriceValue() {

if (Platform.OS === 'ios')

  return (+this.props.number).toLocaleString(fa ? 'fa-IR' : 'en-US', {maximumFractionDigits: 0});

else

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

}
`

[luco]

Still having this issue.

[mohsinriaz17]

Still having the same issue

[eshinkawa]

Same issue here as well. This should be prioritised considering the fact that this is a basic platform feature.

[KotiJocki]

Same issue.

[lukewlms]

@kern3lpan1c It's been requested by the FB bot to open a new issue with same content, are you up for doing that and just pasting in the same content?

(Replying in this thread looks like it will not come to maintainers' attention at all.)

[filipboev]

@lukewlms , I've opened a new ticket here. Hopefully a bot won't decide the ticket's fate this time and actually catch the attention of human maintainers.

[KotiJocki]

I believe this is a problem with the JavaScriptCore that comes with Android and not a React Native bug. It should be resolved by shipping an alternative core:
https://github.com/react-community/jsc-android-buildscripts#how-to-use-it-with-my-react-native-app
with the international variant:
https://github.com/react-community/jsc-android-buildscripts#international-variant