react-native: toLocaleString wrong format on Android

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

Open a fresh React Native project
Make sure you’re not debugging JS remotely
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',
  })

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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 25
Comments: 18 (1 by maintainers)

Commits related to this issue

fix: moment.js to avoid android toLocaleString issues https://github.com/facebook/react-native/issues/15717 https://github.com/facebook/react-native/issues/16867 — committed to echenley/coinography by echenley 6 years ago
fix: moment.js to avoid android toLocaleString issues https://github.com/facebook/react-native/issues/15717 https://github.com/facebook/react-native/issues/16867 — committed to echenley/coinography by echenley 6 years ago
solve issue with toLocateString in Android: https://github.com/facebook/react-native/issues/16867 - replace with a function which does the same thing — committed to anchetaWern/increment by anchetaWern 6 years ago
solve issue with toLocaleString on Android https://github.com/facebook/react-native/issues/16867 — committed to anchetaWern/increment by anchetaWern 6 years ago

Most upvoted comments

This issue must exist.

+24

oriharel on Jan 17, 2018

Issue still present in the latest version.

+17

kholiavko-roman on Feb 24, 2018

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.

+13

stale[bot] on Jan 16, 2018

Issue still present

erlike on Mar 4, 2018

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}

react-native-bot on Feb 24, 2018

Still having this issue.

luco on Jul 24, 2018

Still having the same issue

mohsinriaz17 on Sep 24, 2018

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, ",");

} `

AlirezaAkbarix on Jun 22, 2018

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;
}

anchetaWern on Apr 23, 2018

Pretty much same as https://github.com/facebook/react-native/issues/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

hey99xx on Nov 17, 2017