The Material Time Picker component crashes on Android during app background/foreground cycle

Abierto
  • ¿Algo no está bien?
#985 1 comentario 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
android, javascript, react-native
Área
mobile

Línea de trabajo

Start by tracing the Android Material time picker flow in RNMaterialTimePicker.kt and MaterialTimePickerModule.kt, especially the show call in the stack trace and how opening is scheduled. Reproduce the background/foreground interruption on Android with the provided steps. Done means returning to the app after interrupting the dialog no longer crashes.

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

Descripción

Bug report

Summary

Using the Material Design time picker in my Android app causes a crash when the user switches to another app or locks the device while the time picker dialog is opening or open, and then go back to my app.

Expected Behavior:
The app should resume gracefully without crashing, even if the time picker dialog was interrupted or not fully shown.

Actual Behavior:
The app crashes when returning from background after attempting to open the time picker.

Steps to reproduce

  1. I open a screen with the time picker
  2. I tap a button that opens the time picker
  3. I press the home button before the picker fully appears
  4. When I return to my app, it crashes

Code -

const DateTimePicker: React.FC<DateTimePickerProps> = ({
  testID,
  value,
  mode,
  display,
  onChange,
  style,
  minimumDate,
  maximumDate,
  is24Hour = false,
  androidProps = {},
}) => {
  const {title, positiveButton, negativeButton} = androidProps;
  return (
    <View style={styles.container}>
      <DateTimeSelector
        testID={testID}
        value={value}
        mode={mode}
        display={display}
        design="material"
        onChange={onChange}
        title={title}
        positiveButton={positiveButton}
        negativeButton={negativeButton}
        style={style}
        minimumDate={minimumDate}
        maximumDate={maximumDate}
        is24Hour={is24Hour}
      />
    </View>
  );
};

now I'm using above component as in our app screen ->

 <DateTimePicker
        testID={'DATE_TIME_PICKER'}
        value={get.selectedDate}
        mode="time"
        display={get.isAndroid ? 'clock' : 'spinner'}
        maximumDate={get.maximumDate}
        onChange={set.handleTimeChange}
        is24Hour={get.is24HourFormat}
        style={styles.dateTimePicker}
        androidProps={{
          title: t('selectTime'),
          positiveButton: {label: t('Button.ok')},
          negativeButton: {label: t('Button.cancel')},
        }}
      />
Error
androidx.fragment.app.BackStackRecord.commitInternal (BackStackRecord.java:341)
androidx.fragment.app.BackStackRecord.commit (BackStackRecord.java:306)
androidx.fragment.app.DialogFragment.show (DialogFragment.java:507)
com.reactcommunity.rndatetimepicker.RNMaterialTimePicker.show (RNMaterialTimePicker.kt:109)
com.reactcommunity.rndatetimepicker.RNMaterialTimePicker.open (RNMaterialTimePicker.kt:29)
com.reactcommunity.rndatetimepicker.MaterialTimePickerModule.open$lambda$0 (MaterialTimePickerModule.kt:46)
com.reactcommunity.rndatetimepicker.MaterialTimePickerModule.$r8$lambda$Fd7Bz8i6zmNahyMJIHFgC8wqsHw
com.reactcommunity.rndatetimepicker.MaterialTimePickerModule$$ExternalSyntheticLambda0.run (D8$$SyntheticClass)
android.os.Handler.handleCallback (Handler.java:958)
android.os.Handler.dispatchMessage (Handler.java:99)
android.os.Looper.loopOnce (Looper.java:230)
android.os.Looper.loop (Looper.java:319)
Environment
  • @react-native-community/datetimepicker: 8.4.1
  • React Native: v0.76.6
  • Android: 14
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.