Datetimepicker: Invariant Violation is not usable as a native method argument

Created on 22 Oct 2019  路  5Comments  路  Source: react-native-datetimepicker/datetimepicker

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

      ..........
picture mustafaskyer
👍1

Most helpful comment

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

picture bthuan on 11 Nov 2019
👍7

All 5 comments

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

bthuan picture bthuan on 11 Nov 2019
👍7

Did you guys manage to figure out a solution for this? I'm having this exact problem too.

petetastic picture petetastic on 22 Nov 2019

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.

davecalnan picture davecalnan on 16 Dec 2019
👍3 ❤1 🎉1

The issue because you're passing wrong value to DateTimePicker component, especially when handling onChange event.

<DateTimePicker
        value={date ? new Date(date) : new Date()}
        mode={mode}
        is24Hour={true}
        display="default"
        onChange={(event, date) => {
          onDateChange(date);
        }}
/>

onDateChange will set the date value when user select a new date.

hieuhoangtrung picture hieuhoangtrung on 5 Feb 2020

closing, I believe the solution was covered nicely in https://github.com/react-native-community/datetimepicker/issues/50#issuecomment-566041125

vonovak picture vonovak on 20 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nabati picture nabati  路  3Comments
danlugo92 picture danlugo92  路  5Comments
StarryFire picture StarryFire  路  3Comments
ctohster picture ctohster  路  3Comments
corradio picture corradio  路  5Comments