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

Offen
  • Stimmt etwas nicht?
#985 1 Kommentar 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
android, javascript, react-native
Bereich
mobile

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
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.