Invariant Violation is not usable as a native method argument

Bug

Environment info

React native info output:

info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 745.78 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.10.0 - /usr/local/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.12.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
      Android SDK:
        API Levels: 23, 25, 26, 27, 28, 29
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0
        System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Android Wear Intel x86 Atom, android-26 | Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 11.0/11A420a - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.0 => 16.8.6 
      react-native: ^0.59.10 => 0.59.10 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Library version: “^2.1.0”

Steps To Reproduce

1. passing date moment().format('YYYY-MM-DD') as a prop to child component contains RNDateTimePicker

2. <RNDateTimePicker date={new Date(props.date)} .... />

3. Issue dosen’t appear in Debugger mode && in Release mode value is always today even so after changes many times

return:

Invariant Violation: [1657,"RNDateTimePicker",21,{"height":216,"date":"<<NaN>>","locale":"ar","maximumDate":1587513600000,"minimumDate":1571777438667,"mode":"datetime","minuteInterval":15,"onChange":true}] is not usable as a native method argument

This error is located at:
    in RNDateTimePicker (at datetimepicker.ios.js:81)
    in RCTView (at View.js:45)
    in View (at datetimepicker.ios.js:80)
    in Picker (at ModalDatePicker.js:35)
    in RCTView (at View.js:45)
    in View (at ModalDatePicker.js:21)
    in RCTView (at View.js:45)
    in View (at ModalDatePicker.js:86)
    in RCTView (at View.js:45)
    in View (at ModalDatePicker.js:85)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at Modal.js:244)
    in RCTView (at View.js:45)
    in View (at Modal.js:264)
    in RCTModalHostView (at Modal.js:252)
    in Modal (at ModalDatePicker.js:84)
    in ModalDateTimePicker (at Add/index.js:498)
    in RCTView (at View.js:45)
    in View (at Add/index.js:489)
    in RCTSafeAreaView (at SafeAreaView.js:45)
    in SafeAreaView (at Add/index.js:325)
    in AddScreeen (created by Connect(AddScreeen))
    in Connect(AddScreeen) (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:899)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at DrawerView.js:149)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:20)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:16)
    in ResourceSavingScene (at DrawerView.js:148)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at DrawerView.js:138)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at DrawerLayout.js:446)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at DrawerLayout.js:445)
    in PanGestureHandler (at DrawerLayout.js:501)
    in DrawerLayout (at DrawerView.js:165)
    in DrawerView (at createNavigator.js:61)
    in Navigator (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:61)
    in Navigator (at SceneView.js:9)
    in SceneView (at FluidTransitioner.js:377)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at TransitionRouteView.js:45)
    in TransitionRouteView (at FluidTransitioner.js:368)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at TransitionItemsView.js:119)
    in RCTView (at View.js:45)
    in View (at TransitionItemsView.js:113)
    in TransitionItemsView (at FluidTransitioner.js:223)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at FluidTransitioner.js:73)
    in FluidTransitioner (at createFluidNavigator.js:38)
    in FluidNavigationView (at createNavigator.js:61)
    in Navigator (at createAppContainer.js:429)
    in NavigationContainer (at AppNavigation.js:249)
    in SharedElements (at Navigator.js:141)
    in RCTView (at View.js:45)
    in View (at Navigator.js:139)
    in Nav (created by Connect(Nav))
    in Connect(Nav) (at App.js:67)
    in PersistGate (at App.js:66)
    in Provider (at App.js:65)
    in App (at CodePush.js:578)
    in CodePushComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

enqueueNativeCall
    index.bundle?platform=ios&dev=true&minify=false:2488:20
fn
    index.bundle?platform=ios&dev=true&minify=false:2101:40
createInstance
    index.bundle?platform=ios&dev=true&minify=false:13752:29
completeWork
    index.bundle?platform=ios&dev=true&minify=false:20848:48
completeUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:23007:44
performUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:23170:36
workLoop
    index.bundle?platform=ios&dev=true&minify=false:23180:47
renderRoot
    index.bundle?platform=ios&dev=true&minify=false:23246:21
performWorkOnRoot
    index.bundle?platform=ios&dev=true&minify=false:23984:23
performWork
    index.bundle?platform=ios&dev=true&minify=false:23911:30
performSyncWork
    index.bundle?platform=ios&dev=true&minify=false:23887:20
batchedUpdates$1
    index.bundle?platform=ios&dev=true&minify=false:24072:28
batchedUpdates
    index.bundle?platform=ios&dev=true&minify=false:12803:37
_receiveRootNodeIDEvent
    index.bundle?platform=ios&dev=true&minify=false:12860:23
receiveTouches
    index.bundle?platform=ios&dev=true&minify=false:12890:34
__callFunction
    index.bundle?platform=ios&dev=true&minify=false:2587:49
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:2344:31
__guard
    index.bundle?platform=ios&dev=true&minify=false:2541:15
callFunctionReturnFlushedQueue
    index.bundle?platform=ios&dev=true&minify=false:2343:21
callFunctionReturnFlushedQueue
    [native code]:0

…

Describe what you expected to happen:

1. running without issues

Reproducible sample code

        <ModalDateTimePicker
          visible={visibleTo}
          done={d => {
            console.log("@date", d);
          }}
          close={() => setVisibleTo(st => (st = false))}
          date={returnDate}
          getSelectedDate={d => console.log("@d", d)}
          title={'demo'}
          key={`${returnDate}----`}
        />

const ModalDateTimePicker = props => {
  // console.log("@propsDate", props.date);
  const [date, setDate] = useImmer(new Date(moment().format('YYYY-MM-DD HH:mm')))


          <DateTimePicker
            value={new Date(date)}
            minimumDate={new Date()}
            maximumDate={new Date(moment().add(6, "months").format('YYYY-MM-DD'))}
            mode={ props.onlyTime ? "time" : "datetime"}
            onChange={(e,d) => {
              setDate(st => st = d)
            }}
            minuteInterval={15}
            locale={props.currentLang}
          />

      ..........

[bthuan]

I have exactly the same problem. The strange thing it seems to go away when running in debug mode

[davecalnan]

I think I’ve figured it out. The issue for us came from the fact that in debug mode your JS code is executed in Chrome’s JS environment, whereas when it runs on iOS without debug mode it runs in Safari’s JS environment (JavaScriptCore).

This article explains it a bit more.

The cause for this particular error is that JavaScriptCore doesn’t accept the same kind of strings to the new Date() constructor as Chrome does. You can prove this by running this code Chrome’s console and then Safari’s:

new Date('2019-12-16 04:14:26');
// Chrome -> Mon Dec 16 2019 04:14:26 GMT+0000 (Greenwich Mean Time)
// Safari -> Invalid Date

The solution for me was to change how I’m formatting the datetime string:

- moment.format('YYYY-MM-DD HH:mm:ss')
+ moment.format('YYYY-MM-DDTHH:mm:ss')

See if you can make your formatted string match the format outline in the spec.