Update latest version

.github/workflows/android.yml → .github/workflows/android-detox.yml

@@ -1,12 +1,18 @@
-name: "Android: build & test"
+name: 'Build & Test'
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
 
 jobs:
-  build_and_test:
-    name: Build & test
+  javascript_unit_tests:
+    name: Unit tests - javascript
     runs-on: macos-latest
-    timeout-minutes: 30
+    timeout-minutes: 5
 
     steps:
       - name: Checkout
@@ -17,29 +23,73 @@ jobs:
       - name: Node
         uses: actions/setup-node@v1
 
+      - name: Install npm dependencies
+        run: |
+          yarn install --frozen-lockfile
+
+      - name: Run unit tests
+        run: |
+          yarn test
+
+  java_unit_tests:
+    name: Unit tests - java
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up JDK 1.8
+        uses: actions/setup-java@v1
+        with:
+          java-version: 1.8
+
+      - name: Install npm dependencies
+        working-directory: ./examples/detox
+        run: |
+          yarn install --frozen-lockfile
+
+      - name: Run unit tests
+        working-directory: ./examples/detox/android
+        run: ./gradlew testDebugUnitTest
+
+  end_to_end_tests:
+    name: End to end tests
+    runs-on: macos-latest
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+
+      - name: Node
+        uses: actions/setup-node@v2
+
       - name: Use specific Java version for sdkmanager to work
-        uses: joschi/setup-jdk@v1
+        uses: joschi/setup-jdk@v2
         with:
           java-version: 'openjdk8'
           architecture: 'x64'
 
+      - name: Install npm dependencies
+        working-directory: ./examples/detox
+        run: |
+          yarn install --frozen-lockfile --network-timeout 60000
+
       - name: Download Android Emulator Image
+        timeout-minutes: 15
         run: |
           echo "y" | $ANDROID_HOME/tools/bin/sdkmanager --install "system-images;android-29;google_apis;x86"
           echo "no" | $ANDROID_HOME/tools/bin/avdmanager create avd --force --name emu --device "Nexus 5X" -k 'system-images;android-29;google_apis;x86'
           $ANDROID_HOME/emulator/emulator -list-avds
 
-      - name: Install npm dependencies
-        working-directory: ./examples/detox
-        run: |
-          yarn install --frozen-lockfile
-
       - name: Build
         working-directory: ./examples/detox
         run: |
           yarn build:android-ci
 
       - name: Start android emulator
+        timeout-minutes: 5
         working-directory: ./examples/detox
         continue-on-error: true
         run: |
@@ -48,13 +98,14 @@ jobs:
           $ANDROID_HOME/platform-tools/adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed | tr -d '\r') ]]; do sleep 1; done; input keyevent 82'
           $ANDROID_HOME/platform-tools/adb devices
           echo "Emulator started"
-
-      - name: Run tests
+
+      - name: Run e2e tests
+        timeout-minutes: 30
         working-directory: ./examples/detox
         run: yarn start & yarn test:android-ci
-        
+
       - name: Upload artifacts
-        uses: actions/upload-artifact@v1
+        uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: Failing tests

README.md

@@ -1,6 +1,5 @@
 # React Native Date Picker [![npm](https://img.shields.io/npm/v/react-native-date-picker.svg)](https://www.npmjs.com/package/react-native-date-picker) [![Build status](https://img.shields.io/github/workflow/status/henninghall/react-native-date-picker/Android:%20build%20&%20test?label=tests)](https://github.com/henninghall/react-native-date-picker/actions) [![npm](https://img.shields.io/npm/dm/react-native-date-picker.svg)](https://www.npmjs.com/package/react-native-date-picker)
 
-
 This is a React Native Date Picker with following main features:
 
 📱 Supporting iOS and Android <br>
@@ -11,27 +10,37 @@ This is a React Native Date Picker with following main features:
 <table>
   <tr>
     <td align="center"><b>iOS</b></td>
-    <td align="center"><b>Android</b></td>  
   </tr>
    <tr>
     <td><img src="docs/react-native-date-picker.gif" alt="React Native Date Picker" title="React Native Date Picker" height="150px" />
     </td>
+  </tr>
+
+  <tr>
+    <td align="center" colspan="2"><b>Android</b><br>Choose from 2 different variants</td>
+  </tr>
+   <tr>
     <td><img src="docs/react-native-date-picker-android.gif" alt="React Native Date Picker Android" height="150px" style="margin-left:10px" />
-    </td>  
+    </td>
+        <td><img src="docs/react-native-date-picker-android-native.gif" alt="React Native Datepicker" height="150px" style="margin-left:10px" />
+        </td>  
   </tr>
       <tr>
-    <td align="center">A slightly improved DatePickerIOS.</td>
-    <td align="center">A custom made native component.</td>  
+  <td align="center"><code>androidVariant="iosClone"</code></td><td align="center"><code>androidVariant="nativeAndroid"</code></td>
   </tr>
-
   </table>
 
 ## Installation
 
-1. `npm install react-native-date-picker --save`
-2. `react-native link react-native-date-picker` (Only needed for React Native <= 0.59)
+1. ```npm install react-native-date-picker``` or ```yarn add react-native-date-picker```
+1. `(cd ios && pod install)` (If you're using CocoaPods)
+1. Rebuild the project (e.g. `react-native run-android` or `react-native run-ios`)
+
+If you're having troubles after following these steps, there might be a <a href="https://github.com/henninghall/react-native-date-picker/#user-content-linking">linking issue</a> or you're <a href="https://github.com/henninghall/react-native-date-picker/#user-content-can-i-use-expo">using Expo</a>. 
 
-Xcode 11 is required to run the latest version of the date picker. Xcode 10 is supported up to version 2.7.2. 
+## Requirements
+
+- Xcode >= 11.6
 
 ## Minimal Example
 
@@ -60,31 +69,42 @@ export default () => {
 | date                    | The currently selected date.                                                                                                                                                                                                                                                                                          |
 | onDateChange            | Date change handler                                                                                                                                                                                                                                                                                                   |
 | fadeToColor             | Android picker is fading towards this background color. {color, 'none'}                                                                                                                                                                                                                                               |
-| maximumDate             | Maximum selectable date.                                                                                                                                                                                                                                                                                              |
-| minimumDate             | Minimum selectable date                                                                                                                                                                                                                                                                                               |
+| 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'} (default: 'iosClone')                                                                                                                                                                                                                                                                         |                                                                                                                                           | <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.                                                                                                                                                                                 | <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" />                                                                                                                                                                     |
+| 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')                                                                                                                                                                                                                                       |
+## Linking
+This package supports automatic linking. Usually, the only thing you need to do is to install the package, the cocoapods dependencies (as descripted above). Then rebuild the project by running `react-native run-ios`, `react-native run-android` or start the build from within Xcode/Android Studio. If you'running a React Native version below 0.60 or your setup is having issues with automatic linking, you can run `npx react-native link react-native-date-picker` and rebuild. In some occations you'll have to manually link the package. Instructions in <a href="https://github.com/henninghall/react-native-date-picker/issues/40">this issue</a>.       
 
 ## About
 
 📅 &nbsp; React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particulary interesting if you looking for a way to avoid two different popup pickers on android.
 
 ## FAQ
 
+### How do I change the divider color?
+The color of the divider, separator (or whatever you choose to call it) can only be changed on android for the androidNative variant. To change it, add the following to your android AppTheme. The theme is often found in styles.xml. 
+```xml
+<item name="colorControlNormal">#ff0000</item>
+```
+
 ### Can I use expo?
 
 Unfortunately, expo does not support this date picker at the moment. Upvote <a href="https://expo.canny.io/feature-requests/p/support-react-native-date-picker">this feature request</a> if you would like to have it included.
 
 ### How do i change the date order? (To YYYY-MM-DD etc)
 
-The order is determined by the `locale` prop. Set for instance `locale='fr'`to get the France preference.
+The order is determined by the `locale` prop. Set for instance `locale='fr'`to get the french preference.
 
 ### How do i change the 12/24h or AM/PM format?
 
-On iOS the 12/24h preference is determined by the `locale` prop. Set for instance `locale='fr'`to get the France preference. On Android the 12/24h format is determined by the device setting. When using 12h mode the AM/PM part of the picker will be displayed.
+On iOS the 12/24h preference is determined by the `locale` prop. Set for instance `locale='fr'`to get the french preference. On Android the 12/24h format is determined by the device setting by default. Add `is24hourSource="locale"` to let the locale determine the device setting on android as well. When using 12h mode the AM/PM part of the picker will be displayed. It is NOT recommended to force any specific 12/24h format, but this can be achieved by, choosing a locale which has the desired 24h preference and add `is24hourSource="locale"`.
 
 ### Is it possible to show only month and year?
 
@@ -99,6 +119,36 @@ If you have enabled <a href="https://facebook.github.io/react-native/docs/signed
 -keep public class net.time4j.PrettyTime
 ```
 
+## 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="120px" />
+</td><td align="center">
+ <img src="docs/react-native-date-picker-android-native.gif" alt="date time picker" height="120px" />
+</td></tr>
+
+<tr><td>The so called "iOS clone" looks and works similar to the ios version. It shows normaly 5 lines of dates. It is enabled by default.</td><td>
+The "Android Native" version looks more like a standard native implementation on Android. The divider color can be changed by adding the following to you Android theme:
+<br><code>&lt;item name=&quot;colorControlNormal&quot;&gt;#03b6fc&lt;/item&gt;</code>
+</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

@@ -25,7 +25,7 @@ android {
 dependencies {
     implementation fileTree(include: ['*.jar'], dir: 'libs')
     implementation 'com.facebook.react:react-native:+'
-   implementation 'com.henninghall.android:NumberPickerView:1.1.2'
+    implementation 'com.henninghall.android:NumberPickerView:1.1.5'
     implementation 'org.apache.commons:commons-lang3:3.7'
     implementation group: 'net.time4j', name: 'time4j-android', version: '4.2-2018i'
 }

android/src/main/java/com/henninghall/date_picker/DatePickerManager.java

@@ -7,6 +7,9 @@
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.henninghall.date_picker.props.DividerHeightProp;
+import com.henninghall.date_picker.props.Is24hourSourceProp;
+import com.henninghall.date_picker.props.VariantProp;
 import com.henninghall.date_picker.props.DateProp;
 import com.henninghall.date_picker.props.FadeToColorProp;
 import com.henninghall.date_picker.props.LocaleProp;
@@ -41,7 +44,9 @@ public PickerView createViewInstance(ThemedReactContext reactContext) {
   }
 
   @ReactPropGroup(names = { DateProp.name, ModeProp.name, LocaleProp.name, MaximumDateProp.name,
-          MinimumDateProp.name, FadeToColorProp.name, TextColorProp.name, UtcProp.name, MinuteIntervalProp.name})
+          MinimumDateProp.name, FadeToColorProp.name, TextColorProp.name, UtcProp.name, MinuteIntervalProp.name,
+          VariantProp.name, DividerHeightProp.name, Is24hourSourceProp.name
+  })
   public void setProps(PickerView view, int index, Dynamic value) {
     updateProp("setProps", view, index, value);
   }