Styling bug with inline display in datetime mode

[ajimae]

Environment

MacBook, Running MacOS 12.5.1

Platforms

iOS

Versions

• Android:
• iOS: 16.1
• react-native-modal-datetime-picker: 14.0.0
• react-native-community/datetimepicker: [6.1.3, 6.7.0, 6.3.2]
• react-native: 0.70.4
• react: 18.1.0

Description

There is a bug with the styling for time in inline display mode.

This is a related issue, however downgrading didn't fix the issue for me.

Reproducible Demo

[felippewick]

Same here

[marcofuentes05]

Same here, it even looks worse because the user can't even see the time

[mmazzarolo]

I know I sound like a broken record, but please, see the README:

And the ISSUE_TEMPLATE:

NOTE: Under the hood react-native-modal-datetime-picker uses [react-native-community/datetimepicker](https://github.com/react-native-community/datetimepicker).
Before reporting a bug, swap react-native-datetime-picker with [react-native-community/datetimepicker](https://github.com/react-native-community/datetimepicker) to check if the problem persists. If it does please report the issue in the [react-native-community/datetimepicker](https://github.com/react-native-community/datetimepicker) repo instead. -->
Please notice that WE WON'T SUPPORT ISSUE IF YOU HAVEN'T TRIED USING THE COMMUNITY COMPONENT ALONE. 

Did you already swap the components and verified the issue is not happening? Also, there's not minimal reproducible demo. I don't mark issues as invalid because it's fun, but because I don't have enough free time to investigate issues that don't fullfil the requirements.

[fobos531]

Hey @mmazzarolo !

After some investigation, I've tracked down the issue to this react-native-datetimepicker/datetimepicker#693 <-- the linked PR provides the means to fix it. I'm not exactly sure what broke it, but it seems in the more recent versions it is necessary to specify the height of the native inline datetime picker for the time to be displayed correctly. For example, this is the unwanted behaviour without any modifications

And If I do this:

   <PickerComponent
              display={display || "spinner"}
              {...otherProps}
              value={this.state.currentDate}
              onChange={this.handleChange}
              style={{ height: otherProps.mode === "datetime" && display === "inline" ? 370 : undefined }}
            />

in DateTimePickerModal.ios.js, then it seems to produce the desired behaviour, as seen below:

I've found the 370 height to be a sweet spot for the datetime picker to correctly display the time component of the picker. Also, this only seems to be an issue when the underlying datetime picker is shown within a react-native Modal, in other cases it works fine without this workaround.

Do you feel this is a "good-enough" solution for this issue? If yes, I'd be happy to submit a PR proposing this change.

[mmazzarolo]

Hey @fobos531 ! Thanks so much for the investigation, great detective work!
Yeah, your solution feels good-enough for this issue and a PR would be awesome. I'll release it as a major breaking change.
Two things to take into account when submitting a PR:

• Let's bump the community picker peer dep version to be at least >= to the one shipped by the PR you linked (just to make sure we're not breaking the experience on older versions of the community picker.
• If you could add some comments on the 370 magic number to explain that it seems to be a sweetspot and link this issue in the comments, that would be awesome.

For a moment I even thought about making that number a prop, but I think this is something we should take care ourselves in this lib.

Again, thanks so much for your investigation 🙇

[mmazzarolo]

Fixed by #697

[JestemTrzcinska]

Hi! I still encounter this bug...

Simulator iPhone 15 Pro Max:

Simulator iPad Pro:

"react-native-modal-datetime-picker": "^17.1.0"

[cunneen]

For those (like me) still encountering this issue, adding this prop helped me:

    pickerComponentStyleIOS={{ height: 420}}