Showing a spinner time picker with custom minute interval crashes on Android R (API 30)

Bug report

Summary

I was trying to import the latest version of this library to Expo so it’s available for all Expo users in SDK 39, but I encountered a bug — when I tried to show the spinner time picker with custom minute interval it crashed (I was testing on Android API 30). The same has not crashed on Android API 24.

The crash exception was:

2020-08-04 15:32:31.293 24226-24226/? E/AndroidRuntime: FATAL EXCEPTION: main
    Process: host.exp.exponent, PID: 24226
    java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.NumberPicker.setMinValue(int)' on a null object reference
        at versioned.host.exp.exponent.modules.api.components.datetimepicker.MinuteIntervalSnappableTimePickerDialog.setSpinnerDisplayedValues(MinuteIntervalSnappableTimePickerDialog.java:248)
        at versioned.host.exp.exponent.modules.api.components.datetimepicker.MinuteIntervalSnappableTimePickerDialog.setupPickerDialog(MinuteIntervalSnappableTimePickerDialog.java:234)
        at versioned.host.exp.exponent.modules.api.components.datetimepicker.MinuteIntervalSnappableTimePickerDialog.onAttachedToWindow(MinuteIntervalSnappableTimePickerDialog.java:223)
        at versioned.host.exp.exponent.modules.api.components.datetimepicker.RNDismissableTimePickerDialog.onAttachedToWindow(RNDismissableTimePickerDialog.java:37)
        at com.android.internal.policy.DecorView.onAttachedToWindow(DecorView.java:1722)
        at android.view.View.dispatchAttachedToWindow(View.java:20461)
        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3417)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2391)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1934)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:8127)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:972)
        at android.view.Choreographer.doCallbacks(Choreographer.java:796)
        at android.view.Choreographer.doFrame(Choreographer.java:731)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:957)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7523)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:941)

Environment info

react-native info output:

Note: I’m running this command inside the expo workspace so I don’t need to have some of the global packages installed.

System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 98.12 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /var/folders/d8/g79s05qd0_121z3r66jj72br0000gn/T/yarn--1596547640590-0.9953800870508187/node
    Yarn: 1.22.4 - /var/folders/d8/g79s05qd0_121z3r66jj72br0000gn/T/yarn--1596547640590-0.9953800870508187/yarn
    npm: 6.14.5 - ~/.asdf/installs/nodejs/14.4.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.9.3 - /Users/sjchmiela/Applications/expo/.direnv/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 2.6.1

Steps to reproduce

1. Open the example app on an Android API 30 emulator
2. Tap on the <kbd>Show time picker as spinner (with 5 min interval)!</kbd> button.
3. See the app crash.

Describe what you expected to happen:

1. I expected a spinner time picker to be shown.

Reproducible sample code

<DateTimePicker
  value={new Date()} // required, doesn't matter
  minuteInterval={5} // without this prop the app does not crash
  mode="time"
  display="spinner"
/>

[vonovak]

hello @sjchmiela I cannot reproduce it even with Pixel 3 XL without Play Store. Can you please try reproducing it with the example project from this repo so we’re certain no expo-specific stuff is interfering (I find it unlikely but 🤷‍♂️ )

did you use compileSdkVersion and targetSdkVersion 29? (I tried both 29 and 30, no luck reproducing)

Thanks!

[ajacquierbret]

Hey @sjchmiela and @vonovak !

I’m still facing this issue with Expo Bare Workflow SDK 40.0.1 (React 17 & Native 0.64) and @react-native-community/datetimepicker v3.4.2. I tried to use expo install which installed the v3.0.4, but it doesn’t solve the problem.

Also tried to apply the followig patch to both v3.0.4 and v3.4.2 versions of the library but it keeps crashing Android devices :

diff --git a/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java b/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java
index 3466848..03b8eed 100644
--- a/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java
+++ b/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java
@@ -71,8 +71,8 @@ public class RNDatePickerDialogFragment extends DialogFragment {
         case CALENDAR:
         case SPINNER:
           String resourceName = display == RNDatePickerDisplay.CALENDAR
-                  ? "CalendarDatePickerDialog"
-                  : "SpinnerDatePickerDialog";
+                  ? "ReactAndroidCalendarDatePickerDialog"
+                  : "ReactAndroidSpinnerDatePickerDialog";
           return new RNDismissableDatePickerDialog(
                   activityContext,
                   activityContext.getResources().getIdentifier(
diff --git a/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java b/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java
index 0df49a2..f00b3a6 100644
--- a/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java
+++ b/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java
@@ -76,8 +76,8 @@ public class RNTimePickerDialogFragment extends DialogFragment {
         case CLOCK:
         case SPINNER:
           String resourceName = display == RNTimePickerDisplay.CLOCK
-                  ? "ClockTimePickerDialog"
-                  : "SpinnerTimePickerDialog";
+                  ? "ReactAndroidClockTimePickerDialog"
+                  : "ReactAndroidSpinnerTimePickerDialog";
           return new RNDismissableTimePickerDialog(
                   activityContext,
                   activityContext.getResources().getIdentifier(

Any help would be greatly appreciated ! 👍

Oh and if I set display="default" instead of display="spinner" it doesn’t crash the app.