Describe the bug
On IOS tablets, when using DatePicker in modal mode with title={null}, the upper half of the confirm button becomes unclickable. Touches on the upper portion of the button trigger the time picker wheel scrolling instead of confirming the selection. Only the lower half of the button responds correctly to taps.
Expected behavior
The entire confirm button should be clickable and trigger the onConfirm callback, regardless of where on the button the user taps.
Workaround:
Setting title to any character or leaving it with the default value instead of explicitly setting title={null} fixes the issue. In my case, since I didn't want a visible title, I used a blank space string.
title={' '} // Works correctly - blank space
// or simply don't set title prop to use default value
To Reproduce
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'
export default () => {
const [date, setDate] = useState(new Date())
const [open, setOpen] = useState(false)
return (
<DatePicker
modal
mode="time"
open={open}
date={date}
onConfirm={(date) => {
setOpen(false)
setDate(date)
}}
onCancel={() => setOpen(false)}
title={null} // Bug occurs when title is null
/>
)
}
Operating System
React Native Version
0.81.4
Expo Version (if applicable)
No response
react-native-date-picker version
5.0.13
React Native Architecture
Relevant log output
No crash or error logs. The issue is purely a touch area conflict where the picker wheel's scrollable area overlaps with the button's clickable area.
Describe the bug
On IOS tablets, when using DatePicker in modal mode with
title={null}, the upper half of the confirm button becomes unclickable. Touches on the upper portion of the button trigger the time picker wheel scrolling instead of confirming the selection. Only the lower half of the button responds correctly to taps.Expected behavior
The entire confirm button should be clickable and trigger the onConfirm callback, regardless of where on the button the user taps.
Workaround:
Setting
titleto any character or leaving it with the default value instead of explicitly settingtitle={null}fixes the issue. In my case, since I didn't want a visible title, I used a blank space string.To Reproduce
Operating System
React Native Version
0.81.4
Expo Version (if applicable)
No response
react-native-date-picker version
5.0.13
React Native Architecture
Relevant log output
No crash or error logs. The issue is purely a touch area conflict where the picker wheel's scrollable area overlaps with the button's clickable area.