fix(android): spinner buttons were invisible (#673)

Author: vonovak

android/src/main/java/com/reactcommunity/rndatetimepicker/MinuteIntervalSnappableTimePickerDialog.java

@@ -34,6 +34,7 @@ public MinuteIntervalSnappableTimePickerDialog(
             RNTimePickerDisplay display
     ) {
         super(context, listener, hourOfDay, minute, is24HourView);
+		setCanceledOnTouchOutside(true);
         mTimePickerInterval = minuteInterval;
         mTimeSetListener = listener;
         mDisplay = display;
@@ -51,6 +52,7 @@ public MinuteIntervalSnappableTimePickerDialog(
             RNTimePickerDisplay display
     ) {
         super(context, theme, listener, hourOfDay, minute, is24HourView);
+		setCanceledOnTouchOutside(true);
         mTimePickerInterval = minuteInterval;
         mTimeSetListener = listener;
         mDisplay = display;

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDismissableDatePickerDialog.java

@@ -40,6 +40,7 @@ public RNDismissableDatePickerDialog(
       int dayOfMonth,
       RNDatePickerDisplay display) {
     super(context, callback, year, monthOfYear, dayOfMonth);
+	setCanceledOnTouchOutside(true);
     fixSpinner(context, year, monthOfYear, dayOfMonth, display);
   }
 
@@ -52,6 +53,7 @@ public RNDismissableDatePickerDialog(
       int dayOfMonth,
       RNDatePickerDisplay display) {
     super(context, theme, callback, year, monthOfYear, dayOfMonth);
+	setCanceledOnTouchOutside(true);
     fixSpinner(context, year, monthOfYear, dayOfMonth, display);
   }
 

android/src/main/res/values/styles.xml

@@ -1,9 +1,10 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
-    <style name="SpinnerDatePickerDialog" parent="Theme.AppCompat.Light.Dialog" tools:targetApi="lollipop">
+    <style name="SpinnerDatePickerDialog" tools:targetApi="lollipop">
         <item name="android:datePickerStyle">@style/SpinnerDatePickerStyle</item>
+		<item name="android:windowIsFloating">true</item>
     </style>
 
-    <style name="SpinnerDatePickerStyle" parent="android:Widget.Material.Light.DatePicker" tools:targetApi="lollipop">
+    <style name="SpinnerDatePickerStyle" parent="android:Widget.Material.DatePicker" tools:targetApi="lollipop">
         <item name="android:datePickerMode">spinner</item>
     </style>
 
@@ -24,11 +25,12 @@
         <item name="android:timePickerMode">clock</item>
     </style>
 
-    <style name="SpinnerTimePickerDialog" parent="Theme.AppCompat.Light.Dialog" tools:targetApi="lollipop">
+    <style name="SpinnerTimePickerDialog" tools:targetApi="lollipop">
         <item name="android:timePickerStyle">@style/SpinnerTimePickerStyle</item>
+		<item name="android:windowIsFloating">true</item>
     </style>
 
-    <style name="SpinnerTimePickerStyle" parent="android:Widget.Material.Light.TimePicker" tools:targetApi="lollipop">
+    <style name="SpinnerTimePickerStyle" parent="android:Widget.Material.TimePicker" tools:targetApi="lollipop">
         <item name="android:timePickerMode">spinner</item>
     </style>
 </resources>

example/App.js

@@ -101,11 +101,16 @@ export const App = () => {
       setShow(false);
     }
     if (event.type === 'dismissed') {
-      Alert.alert('picker was dismissed', undefined, [
-        {
-          text: 'great',
-        },
-      ]);
+      Alert.alert(
+        'picker was dismissed',
+        undefined,
+        [
+          {
+            text: 'great',
+          },
+        ],
+        {cancelable: true},
+      );
       return;
     }