React-native-modal-datetime-picker: Issue with iOS 14

[zstuder25]

Ask your Question

It seems your library is having issues with iOS 14 and is not quite working as expected. When my Xcode updated today to 12 and iOS 14, we no longer have a spinner available. I've tried using @react-native-community/datetimepicker's display prop to set it to spinner but to no avail, which may have something to do with this library using an older version of the datetimepicker library. Any help would be appreciated.

[ricokahler]

I'm also experiencing an issue here. I'm using expo un-ejected.

Edit: oh this might actually be a dark mode issue. I can still feel the spinners if I move it.

[mmazzarolo]

Hola! could you please fill in the issue template?

this library using an older version of the datetimepicker library

@react-native-community/datetimepicker is a peer-dependency, so you can/should update it as needed 👍

[mmazzarolo]

oh this might actually be a dark mode issue. I can still feel the spinners if I move it.

Yep. It's likely the issue here. (We do support dark-mode out of the box in the latest version btw). In your case this is a different issue.

[mmazzarolo]

Might be related to: https://github.com/react-native-community/datetimepicker/issues/280
Can't test it on iOS 14 right now unfortunately :/

[mmazzarolo]

Testing it, I'll create a PR soonish setting the default display mode to spinner on iOS. In the future we might also wanna support the new date/time picker though.

[mmazzarolo]

Mind checking https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/474

[praveens96]

received a single row in bottom sheet. upgraded to 9.0.0 to get it right.

[RupamShaw]

upgraded this to 9.0.0 but still having same issue upgraded "@react-native-community/datetimepicker": "^3.0.2",

[mmazzarolo]

Make sure you completely clean the cache

[mmazzarolo]

Also https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/474#issuecomment-696175144

[sunwooz]

I was able to fix this by adding a few lines to AppDelegate.m

if (@available(iOS 14, *)) {
    UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels
 }

inside the didFinishLaunchingWithOptions function.

[nescroft]

@sunwooz i tried this but it seems to have no effect.. edit: GOT IT... had to set display = 'spinner'

[gopikasireddy202]

@sunwooz i tried this but it seems to have no effect.. edit: GOT IT... had to set display = 'spinner'

Please tell me which react-native version you can used?

[nescroft]

@gopikasireddy202 i am using react native version 0.61.5.. i got it working by setting display = 'spinner' and i also added the code @sunwooz recommends above into the xcode AppDelegate.m file inside the didFinishLaunchingWithOptions function.

[sunwooz]

@gopikasireddy202 I'm using React Native 0.59.10. DId you remember to rebuild the project?

[gopikasireddy202]

@Sunwoo can you please send any documention for this ?

On Sat, 24 Oct 2020, 12:18 am Sunwoo Yang, [e-mail] wrote:

@gopikasireddy202 https://github.com/gopikasireddy202 I'm using React
Native 0.59.10. DId you remember to rebuild the project?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/473#issuecomment-715517119,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKMLYJ5GWRBFXI7HJAJAKZDSMHFWTANCNFSM4RSQL43Q
.

[sunwooz]

@gopikasireddy202 https://developer.apple.com/documentation/uikit/uidatepicker/3526124-preferreddatepickerstyle?language=objc

[hzburki]

I was able to fix this by adding a few lines to AppDelegate.m

if (@available(iOS 14, *)) {
    UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels
 }

inside the didFinishLaunchingWithOptions function.

@sunwooz you missed a trailing comma on the second line. Thanks for the code! 👍

[imshreyansh]

@hzburki can you tell me please where exactly we need to add that trailing comma ?

[mmazzarolo]

Pretty sure he meant the semicolon on picker.preferredDatePickerStyle = UIDatePickerStyleWheels

[resting]

if (@available(iOS 14, *)) {
    UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels
 }

Works, but how do I center it?
On 6.0.0

Looking like this currently

Ended up applying a style to it.
Is there a better solution?

datePickerContainerStyleIOS={{paddingHorizontal: 40}}

[mmazzarolo]

hm, it should already be centered... what device/logs etc are you using?

[imshreyansh]

how to resolve this issue in expo ?

[komelabbbas]

how to resolve this issue in expo ?

[komelabbbas]

I have try many things but not work.
Plz give me any solution to solve ios 14 date picker in expo

[s-rayed]

I have try many things but not work.
Plz give me any solution to solve ios 14 date picker in expo

+1 i have the issue in prod. Got users complaining, not sure where to go with this

[imshreyansh]

@s-rayed I think the best you can do right now is to have different libraries on both the Platforms (IOS & Android),
for time being on IOS you can use library react-native-modal-datetime-picker example:
isVisible={this.state.dateVisible}
mode='date'
onConfirm={(date) => this.handleDatePicked(date, 'dateVisible')}
onCancel={() => this.hideDateTimePicker('dateVisible')}
display={Platform.OS === "ios" ? "inline" : "default"} //don't forget to add this line on IOS
/>
and for Android you can use library @react-native-community/datetimepicker
testID="dateTimePickerTwo"
value={this.state.date ? new Date(this.state.date) : new Date()}
mode="date"
is24Hour={true}
display="default"
onChange={(date) => this.handleDatePicked(date, 'dateVisible')}
/>

[s-rayed]

@s-rayed I think the best you can do right now is to have different libraries on both the Platforms (IOS & Android),
for time being on IOS you can use library react-native-modal-datetime-picker example:
isVisible={this.state.dateVisible}
mode='date'
onConfirm={(date) => this.handleDatePicked(date, 'dateVisible')}
onCancel={() => this.hideDateTimePicker('dateVisible')}
display={Platform.OS === "ios" ? "inline" : "default"} //don't forget to add this line on IOS
/>
and for Android you can use library @react-native-community/datetimepicker
testID="dateTimePickerTwo"
value={this.state.date ? new Date(this.state.date) : new Date()}
mode="date"
is24Hour={true}
display="default"
onChange={(date) => this.handleDatePicked(date, 'dateVisible')}
/>

Unfortunately my problem is with ios, android works fine, I suppose I could replace ios with the community version. Thank you

[komelabbbas]

Now it working perfectly.
I have upgrade expo sdk to latest and also update react-native-modal-datetime-picker.

[abdulrahman18]

@mmazzarolo same issue happen in IOS 14.4 using expo

Date Time Picker :
"@react-native-community/datetimepicker": "3.0.9",
"react-native-modal-datetime-picker": "^9.1.0",

Expo version :
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",

This is my code

isVisible={endDatePickerVisible}
headerTextIOS="Pick a Date"
minimumDate={new Date(createEventObject.startsAt)}
display={Platform.OS === "ios" ? "spinner" : "default"}
mode="date"
date={new Date(createEventObject.endsAt)}
onConfirm={handleEndConfirm}
onCancel={hideDatePicker}
isDarkModeEnabled={colorTheme === "dark"}
/>

[methineeinkan]

I'm also experiencing an issue here. I'm using expo un-ejected.

Edit: oh this might actually be a dark mode issue. I can still feel the spinners if I move it.

howto fix

[abdulrahman18]

@methineeinkan update your modal date picker library.

[mynameisafzal]

hm, it should already be centered... what device/logs etc are you using?

iphone 12 and ios 14.4

[Sargnec]

if (@available(iOS 14, *)) {
    UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels
 }

Works, but how do I center it?
On 6.0.0

Looking like this currently

Ended up applying a style to it.
Is there a better solution?

datePickerContainerStyleIOS={{paddingHorizontal: 40}}

Mine worked with pickerContainerStyleIOS={{justifyContent:"center",paddingHorizontal:40}}