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

Ouverte
  • Quelque chose ne va pas ?
#985 1 commentaire 4 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
android, javascript, react-native
Domaine
mobile

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
JavaScript
Étoiles
2.9k
Forks
459
Merge moyen
4 j 16 h
PR mergées (30 j)
5

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react-native-datetimepicker/datetimepicker

Toutes les issues de react-native-datetimepicker/datetimepicker

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.