Datetimepicker: 3.0.8 - Display property appears to be broken ?

[angusmunro]

Bug report

Summary

I am trying to make my users who have iOS 14.2 have the same date time picking experience as before. To this end I was hoping to add the display property to my date time picker and set it to "spinner"

Display property appears to be broken - All date time pickers look the same in iOS 13.3 (All wheels) and also in iOS 14.2 (All pop over Calendars). However no matter what display property I choose, all date time pickers look the same.

Downgrading to 3.0.2 (I picked an earlier version at random) fixes my issue.

Reproducible sample code

import RNDateTimePicker from '@react-native-community/datetimepicker';
import * as React from 'react';
import { View } from 'react-native';
export class ExampleComponent extends React.Component<any, any> {
    public render() {
        return (
            <View style={{ paddingTop: 50 }} >

                <RNDateTimePicker display='compact' value={new Date()} style={{ height: 100, width: 400 }} />
                <RNDateTimePicker display='inline' value={new Date()} style={{ height: 100, width: 400 }} />
                <RNDateTimePicker display='spinner' value={new Date()} style={{ height: 100, width: 400 }} />
                <RNDateTimePicker display='default' value={new Date()} style={{ height: 100, width: 400 }} />
            </View >
        );
    }
}

Steps to reproduce

1. Run the above code in a react native app on iOS 13.3 or 14.2 (or presumably any other version?)

Describe what you expected to happen:

1. Some of the datetime pickers should look different in iOS 14.2

Environment info

System: OS: macOS 11.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 48.92 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 14.8.0 - /usr/local/bin/node Yarn: Not Found npm: 6.14.7 - ~/source/appdrift/dreamweavermobile/node_modules/.bin/npm Watchman: Not Found Managers: CocoaPods: 1.9.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1 Android SDK: API Levels: 28 Build Tools: 28.0.3 System Images: android-28 | Google APIs Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: Not Found Xcode: 12.2/12B45b - /usr/bin/xcodebuild Languages: Java: 1.8.0_265 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 npmGlobalPackages: *react-native*: Not Found

datetimepicker version: 3.0.8

iOS / Android version: iOS13.3 , iOS 14.2

I don't have any androids to hand to test, sorry.

[RublevD]

Have the same issue. I set display="compact" and got it displaying right (on iOS 14.2) in an emulator, but on real iPad (iOS 13.x) it displays like a spinner

[RublevD]

Ok, it seems that i figured out what's wrong. I found this code in datetimepicker.ios.js and as i can see spinner mode is hardcoded for iOS < 14
````
const getDisplaySafe = (display: IOSDisplay) => {
const majorVersionIOS = parseInt(Platform.Version, 10);
if (display === IOS_DISPLAY.inline && majorVersionIOS < 14) {
// inline is available since 14.0
return IOS_DISPLAY.spinner;
}
if (majorVersionIOS < 14) {
// NOTE this should compare against 13.4, not 14 according to https://developer.apple.com/documentation/uikit/uidatepickerstyle/uidatepickerstylecompact?changes=latest_minor&language=objc
// but UIDatePickerStyleCompact does not seem to work prior to 14
// only the spinner display (UIDatePickerStyleWheels) is thus available below 14
return IOS_DISPLAY.spinner;
}

return display;
};
```

[mmazzarolo]

Have the same issue. I set display="compact" and got it displaying right (on iOS 14.2) in an emulator, but on real iPad (iOS 13.x) it displays like a spinner

Isn't compact just supported on iOS 14? How is it supposed to show up on iOS 13?

[brandonballard]

Still an issue on version 3.0.9.

[ShanikaEdiriweera]

this seems a critical issue

[mmazzarolo]

Just FYI to the people who are experiencing this issue: in react-native-modal-datetime-picker, which uses react-native-datetimepicker under the hood, we had several reports of issues like this. Each one of these cases was solved by cleaning up node_modules and resetting the cache: https://github.com/mmazzarolo/react-native-modal-datetime-picker#the-picker-is-not-showing-the-right-layout-on-ios--14 -- so make sure to try to do that before bumping the issue 👍

Also, as far as I know, in react-native-modal-datetime-picker the display proberty of react-native-datetimepicker is being overridden without issues (both in iOS pre/post 14).

[mmazzarolo]

@worstestes did you already try isolating the issue with a minimal reproducible example?