# Feature Request: Expose scrolling events (`onScrollStart` / `onScrollEnd`) or `onScrollingChange` for DateTimePicker

[ttkien]

Feature request

Summary

When the native wheel picker is scrolling, host UIs (e.g., a BottomSheet with action buttons) cannot detect that the wheel is still moving. This may cause users to press Confirm while the wheel is still decelerating, resulting in an incorrect or unintended selection.

I’m requesting new APIs to expose the picker’s scroll state, such as:

• onScrollStart / onScrollEnd callbacks, or
• a single onScrollingChange(isScrolling: boolean) callback.

This would allow the host to temporarily disable buttons during scrolling to provide a smoother and safer UX.

Why it is needed

• Prevent accidental confirmation while the wheel is settling.
• Improve UX in modals and BottomSheets where confirm/cancel actions sit below the picker.
• Current APIs (onChange) only fire after a value has fully settled — not while scrolling.

Proposed API

Option A — Separate callbacks

<DateTimePicker
  value={value}
  mode="time"
  onChange={handleChange}
  onScrollStart={() => setPickerScrolling(true)}
  onScrollEnd={() => setPickerScrolling(false)}
/>

Option B — Single boolean callback

<DateTimePicker
  value={value}
  onScrollingChange={(isScrolling) => setPickerScrolling(isScrolling)}
/>

Code sample

function BottomSheet() {
  const [value, setValue] = useState(new Date());
  const [scrolling, setScrolling] = useState(false);

  return (
    <>
      <DateTimePicker
        mode="time"
        value={value}
        onChange={(event, newValue) => setValue(newValue)}
        onScrollStart={() => setScrolling(true)}
        onScrollEnd={() => setScrolling(false)}
      />

      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Button title="Cancel" disabled={scrolling} />
        <Button title="Confirm" disabled={scrolling} />
      </View>
    </>
  );
}