feat!: improved android picker + remove variants

.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'
 

.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 '

.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.

.maestro/utils/swipe-wheel-1-down-ios.yml

@@ -0,0 +1,5 @@
+appId: com.rn071
+---
+- swipe:
+    start: 25%, 40%
+    end: 25%, 35%

.maestro/utils/swipe-wheel-1-down.yml

@@ -2,4 +2,4 @@ appId: com.rn071
 ---
 - swipe:
     start: 25%, 40%
-    end: 25%, 35%
+    end: 25%, 32%

.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%

.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%

.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%

.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%

.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%

.maestro/utils/swipe-wheel-4.yml

@@ -2,4 +2,4 @@ appId: com.rn071
 ---
 - swipe:
     start: 75%, 40%
-    end: 75%, 35%
+    end: 75%, 32%

README.md

@@ -135,16 +135,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.                                                                                                                                                                                                                                                               |
@@ -154,37 +150,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">
@@ -238,36 +210,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.

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'
 }

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];

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(){

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;
     }