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

Abierto
  • ¿Algo no está bien?
#1,030 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react-native
Área
mobile

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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>
    </>
  );
}
Lenguaje dominante
JavaScript
Estrellas
2.9k
Forks
459
Merge medio
4 d 16 h
PR fusionados (30 d)
5

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-native-datetimepicker/datetimepicker

Todos los issues de react-native-datetimepicker/datetimepicker

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.