React-native-modal-datetime-picker: v8.0.0 release (@react-native-community pickers support)

Created on 17 Oct 2019  Β·  74Comments  Β·  Source: mmazzarolo/react-native-modal-datetime-picker

πŸ‘‹As you may already know, the react-native date and time pickers have recently been moved to a new @react-native-community repository.

The original react-native date and time pickers (used by react-native-modal-datetime-picker < 8.0.0) are now deprecated.
The v8 of react-native-modal-datetime-picker takes care of this by starting to use the new pickers.
You can install it by following the instructions on this branch README.

Please notice that there are breaking changes and deprecations, and that we did our best to report them trough yellow warning.
We also took a chance to remove react-native-modal in favour of a lighter solution (that provides the same functionality).

Deprecated props:
A few prop names are going to be changed (the old name will still work for some time though).
-Β titleIOS β†’Β headerTextIOS
-Β customTitleContainerIOS β†’Β customHeaderIOS
-Β onHideAfterConfirm β†’Β onHide
-Β customDatePickerIOS β†’Β customPickerIOS

Breaking changes:
The following props are not supported anymore:

  • cancelTextStyle β†’ Please use customCancelButtonIOS to override the component instead
  • confirmTextStyle β†’ Please use customConfirmButtonIOS to override the component instead
  • datePickerModeAndroid β†’ Please use the display prop of @react-native-community/react-native-datetimepicker instead
  • dismissOnBackdropPressIOS β†’ This is now the default behaviour on iOS
  • hideTitleContainerIOS β†’ Please set customHeaderIOS to null instead
  • neverDisableConfirmIOSβ†’ This behaviour was causing a few issues with the new picker
  • pickerRefCbβ†’ Not supported by the new picker
  • reactNativeModalPropsIOS β†’ react-native-modal is not being used anymore

If you tested v8 and it worked well for you please add a πŸ‘ to this post.
Otherwise, if you've noticed an issue, please report it in a comment below.
Thank you! ❀️

enhancement

Most helpful comment

Resolved the issue, for some reason when i was calling 2 asynchronous functions one after other - 1. api call, 2. setState({isDatePickerVisible: false}) -> on click date picker ok, it would dismiss and show again, but when i put api call, as callback to set state it works ok. Strange. On version 7.6.0 version it was working ok. Maybe it is community date picker issue. Anyway thanks for your help

All 74 comments

@Barney4242 thank you for reporting, I updated the README: it's @react-native-community/datetimepicker

Hi, I am having an issue on iOS, the dates do not show up on the picker, the rest of the shape is fine. I thought I may be missing a new style object or something.
Bellow is the component:
IMG_5931

<DateTimePickerModal
        isVisible={this.state.hidePicker}
        onConfirm={this.handleDatePicked}
        onCancel={this.hideDatePicker}
        headerTextIOS='EXPIRE DATE'
        date={selectedDateUpper}
        cancelTextStyle={style.cancelTextStyle}
        confirmTextStyle={style.confirmTextStyle}
        titleStyle={style.titleStyle}
        minimumDate={minimumDateUpper}
        maximumDate={maxDateUpper} />

Hey @OshaFoster !
That issue is caused by the iOS dark mode.
See the README for a fix/workaround and the other related issues:

  • #293
  • #283
  • #294
  • #296

Thanks mmazzarolo, I look through the issues posted. The rest of my app does not support dark mode, I would like to use the picker in light mode only, is there a solution for this, can you point me to it? From what I read it seems like you have to switch it to dark mode to be visible, did I miss something?

Thanks, I am using expo so I don't have access to that appDelegate file, adding "UIUserInterfaceStyle": "Light" to the app.json worked, I just had to do a build. Thanks!

@OshaFoster You can use this solution

I have issue with android mode={'datetime'} after update to version 8.0.0. It opens time picker twice, so first it shows date picker, after confirm it displays time picker and after confirm it diplays time picker again.

@pani7 thanks for reporting, mind showing the code for the picker? The issue sounds similar to another one that was reported last month that I wasn't able to reproduce.

Nothing special, just:

<DateTimePicker isVisible={isDatePickerVisible} onConfirm={this.handleDatePicked} onCancel={this.toggleDatePicker} date={moment().toDate()} mode={'datetime'} />

Also, i suppose on RN 0.62.1 i do not need to link manually, just npm install both packages and then pod install without updating manually podfile and that is it?

Thanks for fast response

Also, i suppose on RN 0.62.1 i do not need to link manually, just npm install both packages and then pod install without updating manually podfile and that is it?

That's correct.

Thanks for reporting the issue, I'll try to investigate a bit more (could you try the example in your own app using datetime to see if it works? it does for me)

Resolved the issue, for some reason when i was calling 2 asynchronous functions one after other - 1. api call, 2. setState({isDatePickerVisible: false}) -> on click date picker ok, it would dismiss and show again, but when i put api call, as callback to set state it works ok. Strange. On version 7.6.0 version it was working ok. Maybe it is community date picker issue. Anyway thanks for your help

No worries, thanks for reporting back what was causing the issue!

I just integrated this with my work project via the @next-major tag - all seems fine

Might be nice to have a quick migration guide from v7->v8 (I think it's just the yarn dependencies that change? an add for the new one, and a remove for the modal?)

Nice work!

Might be nice to have a quick migration guide from v7->v8 (I think it's just the yarn dependencies that change? an add for the new one, and a remove for the modal?)

Regarding the dependencies, installing the updated version + the new community pickers is enough (the modal was a built-in dependency, so you don't have to explicitly remove it). This means that the update install is the same as a brand-new installation.

There are some deprecations and breaking changes that I included at the top of the post, do you think I should highlight them more? (The top post is already linked in the README.md).

Thanks for the feedback!

This means that the update install is the same as a brand-new installation.

That explains why I couldn't find any part to remove :-), excellent I'm all set then and the docs seem fine as well then

There are some deprecations and breaking changes that I included at the top of the post, do you think I should highlight them more? (The top post is already linked in the README.md).

No - I thought the call-out for breaking changes was in a good spot and seemed fine to me

Cheers

Hey,
Can't figure out this error:

Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNDatePickerAndroid.open'

refrence to @react-native-community\datetimepicker liabrary.

installed and linked react-native-modal-datetime-picker and @react-native-community/datetimepicker

what am i doing wrong?

@itaygolbary does using the datetimepicker alone work?
Also, did you reset your metro server and reinstalled the app after installing the datetimepicker?

@itaygolbary does using the datetimepicker alone work?
Also, did you reset your metro server and reinstalled the app after installing the datetimepicker?

Tried react-native-modal-datetime-picker alone, although the version was 8.0.1. Do you think I should try v7?

Forgot to mentioned I'm using expo and my android device.

Forgot to mentioned I'm using expo and my android device.

πŸ€” hm... I guess that's probably what is causing the issue.
I took a quick look at the Expo planning and it looks like the community datetimepicker will be added on SDK36.
The current one seems to be SDK35, so I guess you'll need to use react-native-modal-datetime-picker V7 for now.
Once SDK36 is available, I guess you can move to V8 and skip the community datetimepicker setup since it will be included in Expo (I'll update the docs accordingly). Thanks for reporting!

Thought it was referring to a different library. Thanks.

Please take a look at line 49 in file DateTimePickerModal.android.js. You should use getDate() instead of getDay(). It returns wrong date when I use datetime mode in android. getDay func to get day of week, no get day of month. @mmazzarolo

Nice catch @kaisv7n , thanks!
The fix is now available on v8.0.2.

What should be the correct usage of customCancelButtonIOS and customConfirmButtonIOS? In v7 and the Typescript and PropType definitions it states it should contain a node / JSX.Element, though the code and the documentation state that it should contain a Component.

Though I expect this to be a typing issue, I'd like to verify this before filing a PR.

@thabemmz yeah, I think we're just using the wrong terminology somewhere.
You can see from here that they should be React components (classes/functions). They should not be instances of components.

A PR would be great. Thank you!

@mmazzarolo PR can be found with the link above.

merged! thank you.
Published in v8.0.3

@mmazzarolo The cancel or confirm button cannot be clicked on v.8.0.3

image

image

@addingama strangely it's working for me though when I integrated it I did notice an oddity I couldn't pin down https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/262#issuecomment-536017873 - I'm definitely using 8.0.3 with success on android+ios dark mode or not

πŸ‘‹ @addingma what do you mean by "cannot be pressed"? Is it not showing the Alert?
Does the README example work for you?

Also, could you try refactoring your cancel onCancel by moving the callback in a class method and see if it fixes your issue?

e.g.:

handleCancel = () => {
  Alert.alert('error', 'cancel');
};

I'm not saying this is a valid solution, I'm just trying to understand what is causing the issue, because I can't reproduce it.

@addingama can you try without Debug JS Remotely, I had the same issue

@mikehardy FYI I think the issues you had in #262 might be related to https://github.com/react-native-community/react-native-datetimepicker/issues/54

@mmazzarolo can we add to README stating to hide picker first and do rest of the stuffπŸ€”πŸ€”πŸ€”

@chakrihacker πŸ€” you mean as a workaround for the datetimepicker issue that I posted? Can you confirm that the issue is there?
(I just pinged the author of that lib)

Yes, issue 54 where picker appears twice and it's happening when the mode is time or date also. I tried to reproduce in the fresh app but not able to do it. In my case I am calling prop which triggers render with state visible true and then second render with state visible false

handleConfirm = (date) => {
    if(someBool) {
        this.props.someRandomeProp(date)
    }
    if(anotherBool) {
        this.props.anotherProp(date)
    }   
    this.setState({visible: false})

}

My function is something like this with few conditionals
and if I do setState first and then call props the issue will not occur

When i change date and click cancel and then reopen the picker the default value is the last changed one, is there an option to make the picker shows every time the initial value i gave to it?

When i change date and click cancel and then reopen the picker the default value is the last changed one, is there an option to make the picker shows every time the initial value i gave to it?

iOS/Android? does it also happen if you directly use the community picker? https://github.com/react-native-community/react-native-datetimepicker

Hi mmazzarolo, thank you for your work.
Just to let you know, i had an issue with the v8, with multiple datepicker.
I have a startTime and endTime, and when the startTime is modified, i have to keep the interval between those dates, and update on the fly the endTime.
My issue was that the endTime was modified in my store, but the component kept the old value when the datepicker modal was opened. I tried many things, and finally i had to revert to the current stable version

hey @arnaultBreuil : Android/iOS? Are you able to share a reproducible repo?

test.zip

Here are the 2 files concerned. I do not know if it is of any use.
Same issue on both android/ios

Hey mmazzarolo, thanks for your amazing work!
After this update I am with an issue on Android where I cant get the confirm and cancel buttons:
image

Code:

<InputContainer
            datepicker
            isVisible={isDatePickerVisible}
            mode="date"
            label="Date"
            minimumDate={today}
            onPress={() => this.handleDateTimePicker('date')}
            onConfirm={(newDate) => this.handleDatePicked(newDate, 'date')}
            onCancel={() => this.hideDateTimePicker('date')}
            dateTimeSelect={date}
            style={{ marginRight: 40 }}
          />

(InputContainer tag here results in DateTimePicker tag)

Can you tell me what am I doing wrong?

Thank you,
MΓ‘rio

@MarioSilvaPrada does it also happen if you directly use the community picker? https://github.com/react-native-community/react-native-datetimepicker

react-native-modal-datetime-picker is not changing the picker behaviour on Android, so it could be a problem of the library used underneath :/

@mmazzarolo apparently the buttons are there if you look closely. The color of the font is almost the same as the background. Do we have any way to change this color?

@MarioSilvaPrada react-native-modal-datetime-picker is not changing the style of the picker on Android. Please try using directly the community pickers (https://github.com/react-native-community/react-native-datetimepicker) to see if the issue is persists.

@mmazzarolo hi! Can you please merge my last PR (export props) into 8.. branch as well?

@Alex-Bond done! Available in v8.0.4

Expo SDK 36 is not available. Can anyone test it?

Just a quick update.
I'm on vacation, but @brentvatne and @satya164 had a chance to give v8 on Expo SDK36 (the version which includes the community pickers) a try and it seems to be working fine (thanks πŸ™!)
Once I'm back from vacation I'll test and prepare the release:
https://twitter.com/notbrent/status/1210748246148046848

Again, thanks to everyone who contributed, helped and tested it so far πŸ™Œ

@mmazzarolo - might be worth updating the readme to suggest expo install react-native-modal-datetime-picker @react-native-community/datetimepicker when using expo-cli because this will pick the compatible version of datetimepicker :)

customConfirmButtonIOS, customCancelButtonIOS, customHeaderIOS and customPickerIOS props are typed incorrectly. React.ComponentType accepts type parameter for Props, which should be specified because it is clearly defined what kind of props are being passed to these components: https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/next-major/src/DateTimePickerModal.ios.js#L195, https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/next-major/src/DateTimePickerModal.ios.js#L201, https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/next-major/src/DateTimePickerModal.ios.js#L187, https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/next-major/src/DateTimePickerModal.ios.js#L189.
So for example customConfirmButtonIOS should be typed something like React.ComponentType<{ isDisabled: boolean, onPress: (event: GestureResponderEvent) => void, label: string }>. Ideally it could be a separate interface which would be used by our custom components

As of now I'm getting Type '({ isDisabled, label, ...props }: ButtonProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'. or Type 'FC<ButtonProps>' is not assignable to type 'FunctionComponent<{}>

@mmazzarolo - might be worth updating the readme to suggest expo install react-native-modal-datetime-picker @react-native-community/datetimepicker when using expo-cli because this will pick the compatible version of datetimepicker :)

Done, thanks!

@simonasdev thanks for reporting... wanna tackle it with a PR? that would be great!

sure, the PR should target next-major branch, right?

@simonasdev yes! Thank you!

Just a heads up. @react-native-community/datetimepicker does not seem to support non-AndroidX projects (react-native < 0.60):
https://github.com/react-native-community/react-native-datetimepicker/issues/11

EDIT
@mikehardy starting from 1.0.0 source code RNDatePickerDialogFragment.java imports from androidx java package:

import androidx.fragment.app.DialogFragment;

@eightyfive I'd be surprised if that was actually the case, though if you want to stay on support libraries at this point you've got to get savvy with jetifier in reverse mode

https://github.com/mikehardy/jetifier#to-reverse-jetify--convert-node_modules-dependencies-to-support-libraries

Awesome work! Works great for me.

Only issue I found is this work around for hiding the title container on IOS:

  • hideTitleContainerIOS β†’ Please set customHeaderIOS to null instead

The header is determined with the following lines (165-166 in DateTimePickerModal.ios.js):

const HeaderComponent =
    customTitleContainerIOS || customHeaderIOS || Header;

So setting customHeaderIOS to null does not remove the header as null is a falsy value and the HeaderComponent will resolve to the default Header anyway

the component is no longer working ios, any new updates?

@AnasAlamin what do you mean? Mind adding some more details?

v8 is not out of beta :) Thanks to anyone who contributed to it!

@mmazzarolo Sir, I have thoroughly readout all of Issues Created then SomeOne In above have same issue that I'm faCing right now.
I have CorreCtly installed this library in my expo project using
expo install react-native-modal-datetime-picker @react-native-community/datetimepicker v8.1
And i'm using SDK35 right now with
Can't figure out this error:

Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNDatePickerAndroid.open'

@zain148 , react-native-modal-datetime-picker v8 works only on Expo SDK36.
If you can't upgrade you can still use v7 though.

@mmazzarolo In above bugs someOne asked you to fixed an error in v7 probably it was getDay in DateTimePickerAndroid.js
Is't resolved for v7 for now?

@zain148 please check the release page to see the current state of the release.
Please notice that from now on only > v8 will be actively supported/maintained.

_In info.plist file add this lines_

<key>UIUserInterfaceStyle</key>
<string>Light</string>

I have started getting this error now -
1- not using expo, using android sdk emulator
2- "@react-native-community/datetimepicker": "^2.4.0", "react-native-modal-datetime-picker": "^8.6.0"
3- and the datepicker (mode="date") doesn't show up on button click

Possible Unhandled Promise Rejection (id: 1):
TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNDatePickerAndroid.open')
open$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:153696:96
tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:26952:23
invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27128:32
tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:26952:23
invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27028:30
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27058:19
tryCallTwo@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28899:9
doResolve@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:29063:25
Promise@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28922:14
callInvokeWithMethodAndArg@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27057:33
enqueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27062:157
async@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27079:69
open@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:153690:42
RNDateTimePicker@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:153532:60
renderWithHooks@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:16140:33
mountIndeterminateComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:18335:34
beginWork$$1@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23958:31
performUnitOfWork@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23107:30
workLoopSync@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23089:45
performSyncWorkOnRoot@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22784:29
performSyncWorkOnRoot@[native code]

I have started getting this error now -
1- not using expo, using android sdk emulator
2- "@react-native-community/datetimepicker": "^2.4.0", "react-native-modal-datetime-picker": "^8.6.0"
3- and the datepicker (mode="date") doesn't show up on button click

Possible Unhandled Promise Rejection (id: 1):
TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNDatePickerAndroid.open')
open$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:153696:96
tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:26952:23
invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27128:32
tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:26952:23
invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27028:30
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27058:19
tryCallTwo@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28899:9
doResolve@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:29063:25
Promise@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28922:14
callInvokeWithMethodAndArg@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27057:33
enqueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27062:157
async@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27079:69
open@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:153690:42
RNDateTimePicker@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:153532:60
renderWithHooks@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:16140:33
mountIndeterminateComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:18335:34
beginWork$$1@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23958:31
performUnitOfWork@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23107:30
workLoopSync@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23089:45
performSyncWorkOnRoot@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22784:29
performSyncWorkOnRoot@[native code]

same issue here!

@abdulghanitech Classic failure to correctly link in the native module, could be for a variety of reasons, but is project-specific

@abdulghanitech Classic failure to correctly link in the native module, could be for a variety of reasons, but is project-specific

I had to edit the datepicker.android.js file. It was having RNDatePicker.open had to change it to DatePicker.open (similiar method)

I don't remember the exact line numbers but this what I had to do to get it running!

@abdulghanitech that sounds like a much much more serious issue, if the underlying object names changed - could you open a new issue? Also, you may want to use https://github.com/ds300/patch-package to persist your change locally if you've never seen patch-package before

@abdulghanitech that sounds like a much much more serious issue, if the underlying object names changed - could you open a new issue? Also, you may want to use https://github.com/ds300/patch-package to persist your change locally if you've never seen patch-package before

Yes! I've used patch-package for persisting my local changes πŸ™ŒπŸ».
Sure, I'll open a new issue.

I had to edit the datepicker.android.js file. It was having RNDatePicker.open had to change it to DatePicker.open (similiar method)

There's no trace of RNDatePicker.open in DateTimePickerModal.android.js πŸ€” ... also, datepicker.android.js is the name the file had before v8... so I guess it's something that didn't work correctly during the npm/yarn update of the component, unless you mean the community one

npx react-native-clean-project and try again is my goto there

πŸ‘‹As you may already know, the react-native date and time pickers have recently been moved to a new @react-native-community repository.

The original react-native date and time pickers (used by react-native-modal-datetime-picker < 8.0.0) are now deprecated.
The v8 of react-native-modal-datetime-picker takes care of this by starting to use the new pickers.
You can install it by following the instructions on this branch README.

Please notice that there are breaking changes and deprecations, and that we did our best to report them trough yellow warning.
We also took a chance to remove react-native-modal in favour of a lighter solution (that provides the same functionality).

Deprecated props:
A few prop names are going to be changed (the old name will still work for some time though).
-Β titleIOS β†’Β headerTextIOS
-Β customTitleContainerIOS β†’Β customHeaderIOS
-Β onHideAfterConfirm β†’Β onHide
-Β customDatePickerIOS β†’Β customPickerIOS

Breaking changes:
The following props are not supported anymore:

  • cancelTextStyle β†’ Please use customCancelButtonIOS to override the component instead
  • confirmTextStyle β†’ Please use customConfirmButtonIOS to override the component instead
  • datePickerModeAndroid β†’ Please use the display prop of @react-native-community/react-native-datetimepicker instead
  • dismissOnBackdropPressIOS β†’ This is now the default behaviour on iOS
  • hideTitleContainerIOS β†’ Please set customHeaderIOS to null instead
  • neverDisableConfirmIOSβ†’ This behaviour was causing a few issues with the new picker
  • pickerRefCbβ†’ Not supported by the new picker
  • reactNativeModalPropsIOS β†’ react-native-modal is not being used anymore

If you tested v8 and it worked well for you please add a πŸ‘ to this post.
Otherwise, if you've noticed an issue, please report it in a comment below.
Thank you! ❀️

Link to the Readme file is broken, can you please update with working one?

Was this page helpful?
0 / 5 - 0 ratings