feat!: improved android picker + remove variants (#781)

Removed androidVariant prop. From now on only nativeAndroid variant is supported, iosClone is removed. Removed fadeToColor prop. No need for this since iosClone variant is no longer supported. Removed dividerHeight prop. No need for this since iosClone variant is no longer supported. Removed textColor prop. Use theme prop to make text dark or light if defaults aren't good enough. Remove because of inconsistent iOS support. Added buttonColor prop. Easier to use than the previously suggested method of changing Android xml config. Added dividerColor prop. Easier to use than the previously suggested method of changing Android xml config. Improvements Increased fling velocity of the previously called nativeAndroid picker. It roughly matches the previously called iosClone's fling velocity. Internally exposed an improved version of the core android NumberPicker component. Patched from Android source code. Enables more internal modifications of the core component than previously possible. Removed dependency of maven and NumberPickerView android component.
henninghall · Mar 23, 2024 · e5c65fc · e5c65fc
1 parent 26d2055
commit e5c65fc
Show file tree

Hide file tree

Showing 71 changed files with 3,919 additions and 1,025 deletions.
diff --git a/.maestro/ios.yml b/.maestro/ios.yml
@@ -9,7 +9,7 @@ tags:
     env:
       PROP: locale
       VALUE: vi-VN
-- runFlow: utils/swipe-wheel-1.yml
+- runFlow: utils/swipe-wheel-1-down-ios.yml
 - assertVisible:
     text: '2000-01-01 01:00:00'
 

diff --git a/.maestro/timezone-offset-in-minutes-daylight-saving.yml b/.maestro/timezone-offset-in-minutes-daylight-saving.yml
@@ -70,4 +70,4 @@ tags:
       VALUE: 180
 - runFlow: utils/swipe-wheel-3.yml
 - assertVisible: '2000-06-01 00:01:00'
-- assertVisible: 'Thu Jun 1101 AM '
+- assertVisible: 'Thu Jun 1 1 01 AM '
diff --git a/.maestro/timezone-offset-in-minutes.yml b/.maestro/timezone-offset-in-minutes.yml
@@ -39,7 +39,7 @@ tags:
       VALUE: 180
 - runFlow: utils/swipe-wheel-3.yml
 - assertVisible: '2000-01-01 00:01:00'
-- assertVisible: 'Sat Jan 1201 AM '
+- assertVisible: 'Sat Jan 1 2 01 AM '
 
 - runFlow: utils/reset.yml
 
@@ -51,7 +51,7 @@ tags:
       VALUE: -180
 - runFlow: utils/swipe-wheel-3.yml
 - assertVisible: '2000-01-01 00:01:00'
-- assertVisible: 'Fri Dec 31801 PM '
+- assertVisible: 'Fri Dec 31 8 01 PM '
 - runFlow: utils/reset.yml
 
 # test: timezoneOffsetInMinutes combined with maximumDate/minimumDate in another timezone than current device.

diff --git a/.maestro/utils/swipe-wheel-1-down-ios.yml b/.maestro/utils/swipe-wheel-1-down-ios.yml
@@ -0,0 +1,5 @@
+appId: com.rn071
+---
+- swipe:
+    start: 25%, 40%
+    end: 25%, 35%
diff --git a/.maestro/utils/swipe-wheel-1-down.yml b/.maestro/utils/swipe-wheel-1-down.yml
@@ -2,4 +2,4 @@ appId: com.rn071
 ---
 - swipe:
     start: 25%, 40%
-    end: 25%, 35%
+    end: 25%, 32%
diff --git a/.maestro/utils/swipe-wheel-1-up.yml b/.maestro/utils/swipe-wheel-1-up.yml
@@ -1,5 +1,5 @@
 appId: com.rn071
 ---
 - swipe:
-    start: 38%, 30%
-    end: 38%, 35%
+    start: 38%, 32%
+    end: 38%, 40%
diff --git a/.maestro/utils/swipe-wheel-2-up.yml b/.maestro/utils/swipe-wheel-2-up.yml
@@ -1,5 +1,5 @@
 appId: com.rn071
 ---
 - swipe:
-    start: 50%, 30%
-    end: 50%, 35%
+    start: 53%, 32%
+    end: 53%, 40%
diff --git a/.maestro/utils/swipe-wheel-2.yml b/.maestro/utils/swipe-wheel-2.yml
@@ -1,5 +1,5 @@
 appId: com.rn071
 ---
 - swipe:
-    start: 50%, 40%
-    end: 50%, 35%
+    start: 53%, 40%
+    end: 53%, 32%
diff --git a/.maestro/utils/swipe-wheel-3-up.yml b/.maestro/utils/swipe-wheel-3-up.yml
@@ -1,5 +1,5 @@
 appId: com.rn071
 ---
 - swipe:
-    start: 65%, 30%
-    end: 65%, 35%
+    start: 65%, 32%
+    end: 65%, 40%
diff --git a/.maestro/utils/swipe-wheel-3.yml b/.maestro/utils/swipe-wheel-3.yml
@@ -1,5 +1,5 @@
 appId: com.rn071
 ---
 - swipe:
-    start: 63%, 40%
-    end: 63%, 35%
+    start: 65%, 40%
+    end: 65%, 32%
diff --git a/.maestro/utils/swipe-wheel-4.yml b/.maestro/utils/swipe-wheel-4.yml
@@ -2,4 +2,4 @@ appId: com.rn071
 ---
 - swipe:
     start: 75%, 40%
-    end: 75%, 35%
+    end: 75%, 32%
diff --git a/README.md b/README.md
@@ -136,16 +136,12 @@ export default () => {
 | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `date`                    | The currently selected date.                                                                                                                                                                                                                                                                                          |
 | `onDateChange`            | Date change handler ( Inline only )                                                                                                                                                                                                                                                                                   |
-| `fadeToColor`             | Android picker is fading towards this background color. {color, 'none'}                                                                                                                                                                                                                                               |
 | `maximumDate`             | Maximum selectable date. <br/> Example: `new Date("2021-12-31")`                                                                                                                                                                                                                                                      |
 | `minimumDate`             | Minimum selectable date. <br/> Example: `new Date("2021-01-01")`                                                                                                                                                                                                                                                      |
-| `androidVariant`          | Choose from 2 android style variants. `"iosClone"`, `"nativeAndroid"`                                                                                                                                                                                                                                                 |                                                                                                                                                                                                                                                                | <img src="docs/datetime-mode-android.png" alt="Datepicker ios clone variant" height="120px" /><img src="docs/react-native-date-picker-android.png" alt="Datepicker android native variant"/>                                                                                                       |
 | `minuteInterval`          | The interval at which minutes can be selected.                                                                                                                                                                                                                                                                        | <img src="docs/minute-interval-ios.png" alt="Date picker minute interval IOS" height="120px" />                                                                                                                                                                | <img src="docs/minute-interval-android.png" alt="Date picker minute interval Android" height="120px" />                                                                                                                                                                                            |
 | `mode`                    | The date picker mode. `"datetime"`, `"date"`, `"time"`                                                                                                                                                                                                                                                                | <img src="docs/datetime-mode-ios.png" alt="React native date time picker" height="120px" /><img src="docs/date-mode-ios.png" alt="React native datepicker" height="120px" /><img src="docs/time-mode-ios.png" alt="React native time picker" height="120px" /> | <img src="docs/datetime-mode-android.png" alt="react native date time picker android" height="120px" /><img src="docs/date-mode-android.png" alt="react native datepicker android" height="120px" /><img src="docs/time-mode-android.png" alt="react native time picker android" height="120px" /> |
 | `locale`                  | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a <a title="react native datepicker locale id" href="https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html">Locale ID.</a> | <img src="docs/locale-ios.png" alt="React Native Date picker locale language ios" height="120px" />                                                                                                                                                            | <img src="docs/locale-android.png" alt="React Native Date picker locale language android" height="120px" />                                                                                                                                                                                        |
-| `textColor`               | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13 or higher.                                                                                                                                                                       | <img src="docs/colors-ios.png" alt="react native datepicker text color background color ios" height="120px" />                                                                                                                                                 | <img src="docs/colors-android.png" alt="Text color background color android" height="120px" />                                                                                                                                                                                                     |
 | `timeZoneOffsetInMinutes` | Timezone offset in minutes (default: device's timezone)                                                                                                                                                                                                                                                               |
-| `dividerHeight`           | Change the divider height (only supported for iosClone)                                                                                                                                                                                                                                                               |
 | `is24hourSource`          | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device')                                                                                                                                                                         |
 | `modal`                   | Boolean indicating if modal should be used. Default: `"false"`. When enabled, the other modal props needs to be used. <a href="#modal">See example</a>.                                                                                                                                                               |
 | `open`                    | Modal only: Boolean indicating if modal should be open.                                                                                                                                                                                                                                                               |
@@ -155,37 +151,13 @@ export default () => {
 | `confirmText`             | Modal only: Confirm button text.                                                                                                                                                                                                                                                                                      |
 | `cancelText`              | Modal only: Cancel button text.                                                                                                                                                                                                                                                                                       |
 | `theme`                   | Modal only: The theme of the modal. `"light"`, `"dark"`, `"auto"`. Defaults to `"auto"`.                                                                                                                                                                                                                              |
+| `buttonColor`             | Color of the confirm and cancel buttons. (android modal only)                                                                                                                                                                                                                                                         |                                                                                                                                                                                                                                                                | <img src="docs/button-colors.png" alt="date picker button colors on android" width="200px" />                                                                                                                                                                                                      |
+| `dividerColor`            | Color of the divider / separator. (android only)                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                | <img src="docs/divider-color.png" alt="react native date picker divider separator color" width="200px" />                                                                                                                                                                                          |
 | `onStateChange`           | Spinner state change handler. Triggered on changes between "idle" and "spinning" state (Android inline only)                                                                                                                                                                                                          |
 
-## Additional android styling
+## Font size
 
-There are some additional styling possibilities for the "androidNative" picker variant.
-
-### Divider color
-
-<img src="docs/divider-color.png" alt="react native date picker divider separator color" width="200px" />
-
-To change the divider color, open `styles.xml` and place this code right above the `</resources>`.
-
-```xml
-<style name="DatePickerTheme" parent="DatePickerBaseTheme">
-    <item name="android:colorControlNormal">#dd00ff</item>
-</style>
-```
-
-### Button colors
-
-<img src="docs/button-colors.png" alt="date picker button colors on android" width="200px" />
-
-To change the confirm and cancel button colors. Open `styles.xml` and place this code within your theme.
-
-```xml
-  <item name="colorAccent">#dd00ff</item>
-```
-
-### Font size
-
-To change the font size on Android `nativeAndroid` variant. Open `styles.xml` and place this code right above the `</resources>`. The font size is not possible to change in iOS out of the box, but there are some [iOS workarounds](https://github.com/henninghall/react-native-date-picker/discussions/171).
+To change the font size on Android. Open `styles.xml` and place this code right above the `</resources>`. The font size is not possible to change in iOS out of the box, but there are some [iOS workarounds](https://github.com/henninghall/react-native-date-picker/discussions/171).
 
 ```xml
 <style name="DatePickerTheme" parent="DatePickerBaseTheme">
@@ -239,36 +211,6 @@ const [state, setState] = useState("idle")
 <ConfirmButton disabled={state === "spinning"} />
 ```
 
-## Two different Android variants
-
-On Android there are two design variants to choose from:
-
-<table>
-<tr><td align="center"><b>iOS clone</b></td><td align="center"><b>Native Android</b></td>  
-  </tr><tr><td align="center">
- <img src="docs/react-native-date-picker-android.gif" alt="date time picker" height="150px" />
-</td><td align="center">
- <img src="docs/react-native-date-picker-android-native.gif" alt="date time picker" height="150px" />
-</td></tr>
-
-<tr><td>The so called "iOS clone" looks and works similar to the ios version. It shows normally 5 lines of dates. It is enabled by default.</td><td>
-The "Android Native" version looks more like a standard native implementation on Android.
-</td></tr>
-<tr><td>
-
-```js
-androidVariant = 'iosClone'
-```
-
-</td><td>
-
-```js
-androidVariant = 'nativeAndroid'
-```
-
-</td></tr>
-</table>
-
 ## Three different modes
 
 Here are some more info about the three different picker modes that are available.

diff --git a/android/build.gradle b/android/build.gradle
@@ -61,7 +61,6 @@ if (isNewArchitectureEnabled()) {
 dependencies {
     implementation fileTree(include: ['*.jar'], dir: 'libs')
     implementation 'com.facebook.react:react-native:+'
-    implementation 'com.github.henninghall:numberpickerview:v1.1.5'
     implementation 'org.apache.commons:commons-lang3:3.8'
     implementation group: 'net.time4j', name: 'time4j-android', version: '4.8-2021a'
 }

diff --git a/android/src/main/java/com/henninghall/date_picker/DatePickerManagerImpl.java b/android/src/main/java/com/henninghall/date_picker/DatePickerManagerImpl.java
@@ -59,8 +59,6 @@ public static void receiveCommand(final PickerView view, int commandId, final Re
     }
   }
 
-
-
   public static void updateProp(String methodName, PickerView view, int index, Dynamic value, Class<? extends com.henninghall.date_picker.DatePickerManager> aClass){
     String[] propNames = getMethodAnnotation(methodName, aClass).names();
     String propName = propNames[index];

diff --git a/android/src/main/java/com/henninghall/date_picker/DerivedData.java b/android/src/main/java/com/henninghall/date_picker/DerivedData.java
@@ -1,14 +1,10 @@
 package com.henninghall.date_picker;
 
-import android.text.format.DateFormat;
 import android.util.Log;
-import android.util.TimeUtils;
 
 import com.henninghall.date_picker.models.Mode;
-import com.henninghall.date_picker.models.Variant;
 import com.henninghall.date_picker.models.WheelType;
 
-import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Calendar;
@@ -99,23 +95,8 @@ private ArrayList<WheelType> getOrderedWheels() {
         return orderedWheels;
     }
 
-    public int getShownCount() {
-        int DP_PER_SHOW_SHOW_COUNT = 35;
-        int showCount = state.getHeight() / DP_PER_SHOW_SHOW_COUNT;
-        int oddShowCount = showCount % 2 == 0 ? showCount + 1 : showCount;
-        return oddShowCount;
-    }
-
-    public boolean hasNativeStyle() {
-        return state.getVariant() == Variant.nativeAndroid;
-    }
-
     public int getRootLayout() {
-        switch (state.getVariant()){
-            case nativeAndroid: return R.layout.native_picker;
-            case iosClone: return R.layout.ios_clone;
-            default: return R.layout.ios_clone;
-        }
+        return R.layout.native_picker;
     }
 
     public boolean usesAmPm(){

diff --git a/android/src/main/java/com/henninghall/date_picker/HourDisplayBugWorkaround.java b/android/src/main/java/com/henninghall/date_picker/HourDisplayBugWorkaround.java
@@ -1,7 +1,5 @@
 package com.henninghall.date_picker;
 
-import com.henninghall.date_picker.models.Variant;
-
 /**
  * This workaround prevents a bug existing in the NativeAndroid variant.
  * The bug displays duplicated "12" hours string when the current time is set to "1".
@@ -21,7 +19,6 @@ public HourDisplayBugWorkaround(State state) {
     }
 
     private boolean shouldApply(String displayValue) {
-        if(state.getVariant() != Variant.nativeAndroid) return false;
         if(displayValue.length() != 1) return false;
         return true;
     }