-
-
Notifications
You must be signed in to change notification settings - Fork 392
Open
Labels
bugSomething isn't workingSomething isn't working
Description
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
- Android
- iOS
React Native Version
0.81.4
Expo Version (if applicable)
No response
react-native-date-picker version
5.0.13
React Native Architecture
- Old Architecture (Paper)
- New Architecture (Fabric)
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.Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working