React Native code doesn't work without Remote

Question

This a weird question, but since I'm really curious about this I wanted to ask. I have a piece of code that works in the iOS Simulator when I enable Remote Debugging but it stops working without it. This is the code:

      let filtered = []
      let dueDate
      const dateNow = new Date(Date.now())

      for (let item of this.props.listData) {
        dueDate = new Date(item.dueDate)
        if (!item.paid && (dueDate < dateNow)) {
          filtered.push(item)
        }
      }
      if (filtered.length > 0) {          
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(filtered)
        })
      }

(item.dueDate is a string like "12.02.2016")

Obviously the code would work (and it works) if I supplied the date in a correct format (like ISO "2016-02-12"). What interests me is why does it work even with the wrong format when I enable Remote Debugging (which fires up a Google Chrome instance)? Because when I console.log the dates in Chrome they are converted normally. Thanks in advance!

Answer 1

This is most likely due to subtle differences between the JavaScript execution environments on the device, and in your remote debugger.

In this case, the Date constructor seems to accept the locale-specific date formats in the Chrome remote debugging environment, but not on the device. This probably due to your computer's locale having been set to a culture that uses the dd.MM.yyyy format, and the emulator to something else, such as en-US. The ISO format works on both, because it's supported regardless of the locale.

When you run the code on the device or simulator, the code executes in a JavaScriptCore on the device itself. This is the JavaScript engine React Native uses internally to run the application scripts

When you turn remote debugging on, the React Native packager will instead execute the code in your computer's Chrome's JavaScript engine, V8, and send messages between the browser and the device/simulator over WebSockets.

You've run into one of the many edge cases that make remote debugging in React Native unreliable. You should always test all features on a real device without the debugger.

Answer 2

I had the same problem at first, I thought there might be something wrong within the device. Further digging into it I found it had something to do with the new Date() library.

I used below piece of code to solve the problem :

  convDate(dateStr) {
    // From mm-dd-yyyy to yyyy-mm-ddThh:MM:ssZ
    var dArr = dateStr.split("-");
    return dArr[2] + "-" + dArr[0] + "-" + dArr[1] + "T00:00:00"; //2017-09-13T00:13:28
  }  

I called the method like this:

const check = new Date(this.convDate(givenDate));