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

Offen
  • Stimmt etwas nicht?
#1,030 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react-native
Bereich
mobile

Rechercherichtung

Start by reading the DateTimePicker component and its native iOS, Android, and Windows picker implementations to see where scrolling state can be observed and exposed. The issue proposes either start/end callbacks or a boolean callback but gives no file or test names. Done means host apps can detect when the wheel is scrolling and disable actions until it settles.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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>
    </>
  );
}
Vorherrschende Sprache
JavaScript
Sterne
2.9k
Forks
459
Ø Merge
4 T. 16 Std.
Gemergte PRs (30 T.)
5

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-native-datetimepicker/datetimepicker

Alle Issues in react-native-datetimepicker/datetimepicker

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.