by Khoa Pham
React Native can be very easy to get started with, and then at some point problems occur and we need to dive deep into it.
The other day we had a strange bug that was only occurring in production build, and in iOS only. A long backtrace in the app revealed that it was due to
Date constructor failure.
const date = new Date("2019-01-18 12:00:00")
This returns the correct
Date object in debug mode, but yields
Invalid Date in release. What’s special about
Date constructor? Here I’m using react native 0.57.5 and no
Dateinstance that represents a single moment in time.
Dateobjects use a Unix Time Stamp, an integer value that is the number of milliseconds since 1 January 1970 UTC.
Pay attention to how Date can be constructed by dateString:
dateStringString value representing a date. The string should be in a format recognized by the
Date.parse()method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).
Date constructor uses static method
Date.parse under the hood. This has very specific requirement about the format of date string that it supports
The standard string representation of a date time string is a simplification of the ISO 8601 calendar date extended format (see Date Time String Format section in the ECMAScript specification for more details). For example,
"2011-10-10T14:48:00"(date-time form), or
"2011-10-10T14:48:00.000+09:00"(date-time form with milliseconds and time zone) can be passed and will be parsed. When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.
The ECMAScript specification states: If the String does not conform to the standard format the function may fall back to any implementation–specific heuristics or implementation–specific parsing algorithm. Unrecognizable strings or dates containing illegal element values in ISO formatted strings shall cause
React Native also uses Babel and some polyfills to have some nice syntax transformers, so some of the code that we write may not be necessarily supported natively by
Now it is clear that while we debug our app via Chrome debugger, it works because V8 engine handles that. Now try turning off Remote JS Debugging: we can see that the above Date constructor fails, which means it is using
Date constructor to confirm that it fails:
What are legit date string formats?
And it was fully confirmed a year later in JSC 💕 ES6
ECMAScript defines a string interchange format for date-times based upon a simplification of the ISO 8601 Extended Format. The format is as follows:
Where the fields are as follows:
"T" appears literally in the string, to indicate the beginning of the time element.
const date = new Date("2019-01-18 12:00:00".replace(' ', 'T'))
And now it returns correct