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

[keshav-dev21]

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