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

Aperta
  • Qualcosa non va?
#1,030 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react-native
Ambito
mobile

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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>
    </>
  );
}
Lingua principale
JavaScript
Stelle
2.9k
Fork
459
Merge medio
4g 16h
PR unite (30g)
5

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-native-datetimepicker/datetimepicker

Tutte le issue di react-native-datetimepicker/datetimepicker

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.