iOS keyboard input for mode="time" breaks the UI

[enagorny]

Environment

System:
OS: macOS 14.1.1
CPU: (10) arm64 Apple M1 Pro
Memory: 225.75 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.17.1
path: ~/.asdf/installs/nodejs/18.17.1/bin/node
Yarn: Not Found
npm:
version: 9.6.7
path: ~/.asdf/plugins/nodejs/shims/npm
Watchman:
version: 2023.08.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /Users/enagorny/.asdf/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.11090377
Xcode:
version: 15.1/15C65
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20.1
path: /opt/homebrew/opt/openjdk@11/bin/javac
Ruby:
version: 3.1.3
path: /Users/enagorny/.asdf/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: true
newArchEnabled: false

Platforms

iOS

Versions

• iOS: 17
• react-native-modal-datetime-picker: 17.1.0
• react-native-community/datetimepicker: 7.2.0
• react-native: 0.72.4
• react: 18.2.0

Description

Standard iOS picker in "time" mode allows keyboard input. To trigger it user needs to tap on the center (currently selected time).
The keyboard covers the picker.

I've already provided a patch for the date-time-picker react-native-datetimepicker/datetimepicker#852 but not sure if disabling keyboard input is the right way.

Reproducible Demo

      <DateTimePickerModal
        isVisible={Boolean(datePickerField)}
        mode="time"
        onConfirm={handleConfirm}
        onCancel={() => setDatePickerField(undefined)}
        is24Hour={false}
      />

[ravir-simform]

@enagorny Did you get any solution for this?

[enagorny]

it can be fixed by applying patch in react-native-datetimepicker react-native-datetimepicker/datetimepicker#852

[ravir-simform]

Great, let me take a look at it, thanks for the prompt response.