React Native Date Picker is an inline datepicker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.

Overview

React Native Date Picker npm Build status npm

This is a React Native Date Picker with following main features:

📱 Supporting iOS and Android
🕑 3 different modes: Time, Date, DateTime
🌍 Multiple languages
🎨 Customizable

iOS
React Native Date Picker
Android
Choose from 2 different variants
React Native Date Picker Android React Native Datepicker
androidVariant="iosClone" androidVariant="nativeAndroid"

Installation

  1. npm install react-native-date-picker or yarn add react-native-date-picker
  2. (cd ios && pod install) (If you're using CocoaPods)
  3. 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 linking issue or you're using Expo.

Requirements

  • Xcode >= 11.6

Minimal Example

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {

  const [date, setDate] = useState(new Date())

  return (
    <DatePicker
      date={date}
      onDateChange={setDate}
    />
  )
}

Properties

Prop Description Screenshots iOS Screenshot Android
date The currently selected date.
onDateChange Date change handler
fadeToColor Android picker is fading towards this background color. {color, 'none'}
maximumDate Maximum selectable date.
Example: new Date("2021-12-31")
minimumDate Minimum selectable date.
Example: new Date("2021-01-01")
androidVariant Choose from 2 android style variants. {'iosClone', 'nativeAndroid'} (default: 'iosClone') Datepicker ios clone variantDatepicker android native variant
minuteInterval The interval at which minutes can be selected. Date picker minute interval IOS Date picker minute interval Android
mode The date picker mode. {'datetime', 'date', 'time'} React native date time pickerReact native datepickerReact native time picker react native date time picker androidreact native datepicker androidreact native time picker android
locale The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID. React Native Date picker locale language ios React Native Date picker locale language android
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. react native datepicker text color background color ios Text color background color android
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 this issue.

About

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

<item name="colorControlNormal">#ff0000</item>

Can I use expo?

Unfortunately, expo does not support this date picker at the moment. Upvote this feature request 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 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 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?

This is unfortunately not possible due to the limitation in DatePickerIOS. You should be able to create your own month-year picker with for instance https://github.com/TronNatthakorn/react-native-wheel-pick.

Why does the Android app crash in production?

If you have enabled Proguard for Android you might need to ignore some classes to get the the picker to work propery in android production/release mode. Add these lines to you proguard file (often called proguard-rules.pro):

-keep public class net.time4j.android.ApplicationStarter
-keep public class net.time4j.PrettyTime

Two different Android variants

On Android there are two design variants to choose from:

iOS clone Native Android
date time picker date time picker
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. 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:
<item name="colorControlNormal">#03b6fc</item>
androidVariant="iosClone"
androidVariant="nativeAndroid"

Three different modes

Here are some more info about the three different picker modes that are available.

Date time picker

Using the datetime mode gives you a react native date time picker where both date and time can be selected at the same time. The todays date will be replays with the string "Today" translated to the desired language. This is the default mode and look like this.

iOS Android
date time picker date time picker

Add the optional datetime mode property to use this mode. Since datetime is default this could also be exclude.

<DatePicker
  ...
  mode="datetime"
/>

Datepicker

The date mode displays a react native datepicker with year month and date where the year-month-date order will be adjusted to the locale. If will look similar to this:

iOS Android
datepicker ios datepicker

Just add the value date to mode property:

<DatePicker
  ...
  mode="date"
/>

Time picker

The time mode can be used when only the time matters. AM/PM will be added depending on locale and user setting. It can be useful to add the timeInterval to only display the time with for instance 15min intervals. The react native time picker look like this:

iOS Android
react native time picker react native time picker android

Set mode property to time to show the time picker:

<DatePicker
  ...
  mode="time"
/>

Why another React Native datepicker?

One of the strongest reason to use react native is its cross platform compatibility. Most of the official components are working seamlessly on both platforms but there are some with single platform support only. The react native datepicker is one example where both DatePickerIOS and DatePickerAndroid are present. The reason for this is that the default date picker is implemented in seperate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.

If you want to use these pickers you can combile the official ones or a third party module that already done that for you. If you on the other hand want have a more unified design between your android and ios app, this module is for you. The datetime mode can be particularly helpful to avoid 2 separate picker dialogs on android.

Comments
  • null is not an object (evaluating '_reactNative.NativeModules.RNDatePicker.openPicker')

    null is not an object (evaluating '_reactNative.NativeModules.RNDatePicker.openPicker')

    Hi

    I'm new to react native and I have an expo app that I am trying to use this package in in order to get the date requested by the user to display information within that time frame. However I am getting this error that I cannot figure out "null is not an object (evaluating '_reactNative.NativeModules.RNDatePicker.openPicker')" may someone please assist

    opened by JamieDJ 33
  • Issue with AndroidX compatibility

    Issue with AndroidX compatibility

    Hi, I'm using the latest Android SDK as well the new RN0.59.8 , it seems your package is not compatible with this versions.

    I'm getting this errors

    > Task :react-native-date-picker:compileReleaseJavaWithJavac FAILED
    /Users/jglr/project/app/node_modules/react-native-date-picker/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java:3: error: package android.support.annotation does not exist
    import android.support.annotation.Nullable;
    

    thanks,

    opened by eggybot 24
  • Crash Android with `IllegalArgumentException`

    Crash Android with `IllegalArgumentException`

    Describe the bug My some Android devices crash when render DatePicker

    java.lang.IllegalArgumentException: Unterminated quote
        at java.text.SimpleDateFormat.compile(SimpleDateFormat.java:884)
        at java.text.SimpleDateFormat.initialize(SimpleDateFormat.java:684)
        at java.text.SimpleDateFormat.<init>(SimpleDateFormat.java:623)
        at com.henninghall.date_picker.wheels.Wheel.<init>(Wheel.java:35)
        at com.henninghall.date_picker.wheels.YearWheel.<init>(YearWheel.java:21)
        at com.henninghall.date_picker.ui.Wheels.<init>(Wheels.java:50)
        at com.henninghall.date_picker.ui.UIManager.<init>(UIManager.java:27)
        at com.henninghall.date_picker.PickerView.<init>(PickerView.java:27)
        at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:40)
        at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:25)
        at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:139)
        at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:83)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:270)
        at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:180)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:987)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:958)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1039)
        at android.view.Choreographer.doCallbacks(Choreographer.java:847)
        at android.view.Choreographer.doFrame(Choreographer.java:771)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1027)
        at android.os.Handler.handleCallback(Handler.java:809)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:166)
        at android.app.ActivityThread.main(ActivityThread.java:7555)
        at java.lang.reflect.Method.invoke(Method.java)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:469)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:963)
    

    Expected behavior Render DatePicker ok

    To Reproduce Add example code that reproduces the behavior.

    export default class App extends Component {
    
      state = { tempDate: new Date() }
    
      render = () =>
        <DatePicker
           mode={mode}
           date={tempDate}
           collapsable
           minuteInterval={1}
           minimumDate={minimumDate}
           maximumDate={maximumDate}
           locale="vi"
           style={{ alignSelf: 'center' }}
           onDateChange={this.onDateChange}
        />
    
    }
    

    Smartphone (please complete the following information):

    • OS: [Android or iOS] Android (only)
    • React Native version [e.g. 0.59.4]: 0.62.2
    • react-native-date-picker version [e.g. 2.5.1]: 2.7.9
    opened by tiendn 21
  • IOS 13 current date not there/visible - urgent help please

    IOS 13 current date not there/visible - urgent help please

    Describe the bug NOW I saw it is only when ios13 dark mode is set!

    Current date is not visible - or it is white not sure on IOS 13 the same code was working fine on IOS 12. On image you can see it's only current date I moved year down and even not in focus it's still white/not there. unnamed

    Expected behavior That current date is visible.

    To Reproduce

    <DatePicker
                    maximumDate={this.props.maximumDate}
                    textColor={this.props.pickerColor}
                    style={{width: this.props.screenWidth}}
                    date={this.state.date}
                    mode={this.props.mode}
                    locale={this.state.locale}
                    onDateChange={this.dateChanged}
                  />
    

    Smartphone (please complete the following information):

    • OS: IOS 13, android work fine
    • React Native version [e.g. 0.59.10]
    • react-native-date-picker version 2.7.0
    bug 
    opened by vvusts 20
  • [Android] Allow setting the 24 hour format instead follow user locale

    [Android] Allow setting the 24 hour format instead follow user locale

    I am really grateful this date picker has the consistent UI and behavior across the ios and android platform and this is what I need for my project. Really appreciate the effort and hard work of doing this. 😄

    Understand that for the android platform, the 24 format is following the user locale setting set in the phone. Is it possible to override user locale setting by adding a prop called is24Format?

    feature request 
    opened by richardtks 18
  • Loading is slow on Android

    Loading is slow on Android

    Hi Henning,

    Thanks for this great library, just what we've been looking for!

    We've tried implementing this in our app, but it seems to load slow on Android. After some debugging we've located the issue in PickerView.java

    Both in setMode and setLocale you call the applyOnAllWheels method, and we've measured this to take between 200 and 400 milliseconds each time on the emulator. They are of course faster on a device, but its still too slow in a production build. If commenting these out, the view loads fast (except it won't work of course). I'm not sure how to solve that, but maybe you have an idea?

    feature request 
    opened by kimhafr 18
  • 3.4.1 does not compile

    3.4.1 does not compile

    Describe the bug A clear and concise description of what the bug is.

    Does not compile:

    > Task :react-native-date-picker:compileReleaseJavaWithJavac FAILED
    
    node_modules/react-native-date-picker/android/src/main/java/com/henninghall/date_picker/pickers/
    AndroidNative.java:56: error: cannot find symbol
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    
    symbol:   variable Q
    location: class VERSION_CODES
    
    node_modules/react-native-date-picker/android/src/main/java/com/henninghall/date_picker/pickers/
    AndroidNative.java:57: error: incompatible types: int cannot be converted to String
                setTextColor(color);
    
    compileSdk = 30
    buildTools = "30.0.2"
    minSdk = 22
    targetSdk = 30
    

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version 0.65.1
    • react-native-date-picker version 3.4.1
    opened by tapz 17
  • IllegalArgumentException crash on Android

    IllegalArgumentException crash on Android

    Describe Since upgrading to RN 0.64 we encounter following crash on Android

    The weird part here is that in our project we use react-native-gesture-handle in other components but when we scroll to change the date from DatePickerField it starts to crash on Android and the log points out crash because of react-native-gesture-handler. I am not sure that i am right if i post this issue in here but in fact there are maybe related things between DatePickerField with this crash.

    Crash log:

    IllegalArgumentException. Unable to find JSIModule for class UIManager

    java.lang.IllegalArgumentException: 
      at com.facebook.react.bridge.JSIModuleRegistry.getModule (JSIModuleRegistry.java:39)
      at com.facebook.react.bridge.CatalystInstanceImpl.getJSIModule (CatalystInstanceImpl.java:2)
      at com.facebook.react.uimanager.UIManagerHelper.getUIManager (UIManagerHelper.java:81)
      at com.facebook.react.uimanager.UIManagerHelper.getUIManager (UIManagerHelper.java:1)
      at com.facebook.react.uimanager.UIManagerHelper.getUIManagerForReactTag (UIManagerHelper.java:4)
      at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent (NativeAnimatedNodesManager.java:17)
      at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch (NativeAnimatedNodesManager.java:6)
      at com.facebook.react.uimanager.events.EventDispatcherImpl.dispatchEvent (EventDispatcherImpl.java:27)
      at com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent (JSTouchDispatcher.java:58)
      at com.facebook.react.ReactRootView.dispatchJSTouchEvent (ReactRootView.java:49)
      at com.facebook.react.ReactRootView.onInterceptTouchEvent (ReactRootView.java)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2753)
      at com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView.dispatchTouchEvent (RNGestureHandlerEnabledRootView.java:12)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at com.android.internal.policy.DecorView.superDispatchTouchEvent (DecorView.java:697)
      at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent (PhoneWindow.java:1879)
      at android.app.Activity.dispatchTouchEvent (Activity.java:3487)
      at androidx.appcompat.view.WindowCallbackWrapper.dispatchTouchEvent (WindowCallbackWrapper.java:2)
      at com.android.internal.policy.DecorView.dispatchTouchEvent (DecorView.java:655)
      at android.view.View.dispatchPointerEvent (View.java:13732)
      at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent (ViewRootImpl.java:6131)
      at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess (ViewRootImpl.java:5909)
      at android.view.ViewRootImpl$InputStage.deliver (ViewRootImpl.java:5358)
      at android.view.ViewRootImpl$InputStage.onDeliverToNext (ViewRootImpl.java:5411)
      at android.view.ViewRootImpl$InputStage.forward (ViewRootImpl.java:5377)
      at android.view.ViewRootImpl$AsyncInputStage.forward (ViewRootImpl.java:5536)
      at android.view.ViewRootImpl$InputStage.apply (ViewRootImpl.java:5385)
      at android.view.ViewRootImpl$AsyncInputStage.apply (ViewRootImpl.java:5593)
      at android.view.ViewRootImpl$InputStage.deliver (ViewRootImpl.java:5358)
      at android.view.ViewRootImpl$InputStage.onDeliverToNext (ViewRootImpl.java:5411)
      at android.view.ViewRootImpl$InputStage.forward (ViewRootImpl.java:5377)
      at android.view.ViewRootImpl$InputStage.apply (ViewRootImpl.java:5385)
      at android.view.ViewRootImpl$InputStage.deliver (ViewRootImpl.java:5358)
      at android.view.ViewRootImpl.deliverInputEvent (ViewRootImpl.java:8420)
      at android.view.ViewRootImpl.doProcessInputEvents (ViewRootImpl.java:8353)
      at android.view.ViewRootImpl.enqueueInputEvent (ViewRootImpl.java:8306)
      at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent (ViewRootImpl.java:8535)
      at android.view.InputEventReceiver.dispatchInputEvent (InputEventReceiver.java:198)
      at android.os.MessageQueue.nativePollOnce (MessageQueue.java)
      at android.os.MessageQueue.next (MessageQueue.java:326)
      at android.os.Looper.loop (Looper.java:181)
      at android.app.ActivityThread.main (ActivityThread.java:7050)
      at java.lang.reflect.Method.invoke (Method.java)
      at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:494)
      at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)
    

    Smartphone

    • OS: Android
    • React Native version: 0.64.0
    • react-native-date-picker: 3.2.10
    • react-native-gesture-handler: 1.10.3
    opened by Trex28 17
  • Android app crash when open the datepicker

    Android app crash when open the datepicker

    Describe the bug When open the screen contains the date picker in App in Android, the app will instantly crash and exit

    Expected behavior The app should display the date picker without crashing

    To Reproduce Add example code that reproduces the behavior.

            <ReactDatePicker
              mode={mode}
              date={tempMomentValue.toDate()}
              onDateChange={(date) => {
                setTempMomentValue(moment(date))
              }}/>
    
    

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version :0.61.5
    • react-native-date-picker version : 2.7.6

    Error Log This is the error log in android studio

    2020-02-19 11:19:20.605 11528-11528/com.billiapprn6 E/AndroidRuntime: FATAL EXCEPTION: main Process: com.billiapprn6, PID: 11528 java.lang.NoClassDefFoundError: Failed resolution of: Lnet/time4j/android/ApplicationStarter; at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:32) at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:16) at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:139) at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:82) at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:269) at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:179) at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:972) at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:943) at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:28) at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:174) at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947) at android.view.Choreographer.doCallbacks(Choreographer.java:761) at android.view.Choreographer.doFrame(Choreographer.java:693) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:214) at android.app.ActivityThread.main(ActivityThread.java:7050) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965) Caused by: java.lang.ClassNotFoundException: Didn't find class "net.time4j.android.ApplicationStarter" on path: DexPathList[[zip file "/data/app/com.billiapprn6-jfs-cyvifH4UlZBlt6kj0Q==/base.apk"],nativeLibraryDirectories=[/data/app/com.billiapprn6-jfs-cyvifH4UlZBlt6kj0Q==/lib/arm64, /data/app/com.billiapprn6-jfs-cyvifH4UlZBlt6kj0Q==/base.apk!/lib/arm64-v8a, /system/lib64, /system/vendor/lib64]] at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:134) at java.lang.ClassLoader.loadClass(ClassLoader.java:379) at java.lang.ClassLoader.loadClass(ClassLoader.java:312)

    opened by sindu12jun 16
  • Expo EAS compilation error (iOS only)

    Expo EAS compilation error (iOS only)

    Describe the bug Since updating to the latest version (4.1.3) I can't compile for iOS anymore. Android still compiles without error.

    (node_modules/react-native-date-picker/ios/RNDatePicker/DatePicker.m:15:29)
    
      13 | @interface DatePicker ()
      14 | 
    > 15 | @property (nonatomic, copy) RCTBubblingEventBlock onChange;
         |                             ^ declaration of 'RCTBubblingEventBlock' must be imported from module 'React.RCTComponent' before it is required
      16 | @property (nonatomic, assign) NSInteger reactMinuteInterval;
      17 | 
      18 | @end 
    

    Expected behavior Should compile.

    To Reproduce Create Project Install react-native-date-picker 4.1.3 eas build --profile development

    Smartphone:

    • OS: iOS
    • React Native version 0.64.12
    • react-native-date-picker version 4.1.3
    opened by VolkerLieber 15
  • NullPointerException in Android at java.util.Calendar.setTime (Calendar.java:1749)

    NullPointerException in Android at java.util.Calendar.setTime (Calendar.java:1749)

    It looks like the Picker can cause a NullPointerException if a "far future" date is picked, i.e. set the year to 2100 - maybe related to a Android/Java Date/Time limitation?. Maybe the issue is not the "pick" but the the update of the picker after the picked value has been send to the app.

    Stack trace is:

    java.lang.NullPointerException: 
      at java.util.Calendar.setTime (Calendar.java:1749)
      at java.text.SimpleDateFormat.format (SimpleDateFormat.java:981)
      at java.text.SimpleDateFormat.format (SimpleDateFormat.java:974)
      at java.text.DateFormat.format (DateFormat.java:341)
      at com.henninghall.date_picker.wheels.Wheel.setValue (Wheel.java:74)
      at com.henninghall.date_picker.wheelFunctions.SetDate.apply (SetDate.java:17)
      at com.henninghall.date_picker.PickerView.applyOnAllWheels (PickerView.java:208)
      at com.henninghall.date_picker.PickerView.setDate (PickerView.java:137)
      at com.henninghall.date_picker.DatePickerManager.onAfterUpdateTransaction (DatePickerManager.java:84)
      at com.henninghall.date_picker.DatePickerManager.onAfterUpdateTransaction (DatePickerManager.java:15)
      at com.facebook.react.uimanager.ViewManager.updateProperties (ViewManager.java:33)
      at com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:269)
      at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute (UIViewOperationQueue.java:200)
      at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:1085)
      at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:1056)
      at com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:29)
      at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame (ReactChoreographer.java:134)
      at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame (ChoreographerCompat.java:105)
      at android.view.Choreographer$CallbackRecord.run (Choreographer.java:909)
      at android.view.Choreographer.doCallbacks (Choreographer.java:723)
      at android.view.Choreographer.doFrame (Choreographer.java:655)
      at android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:897)
      at android.os.Handler.handleCallback (Handler.java:789)
      at android.os.Handler.dispatchMessage (Handler.java:98)
      at android.os.Looper.loop (Looper.java:164)
      at android.app.ActivityThread.main (ActivityThread.java:6944)
      at java.lang.reflect.Method.invoke (Native Method)
      at com.android.internal.os.Zygote$MethodAndArgsCaller.run (Zygote.java:327)
      at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1374)
    
    bug 
    opened by hwde 13
  • chore(deps): bump json5 from 2.1.3 to 2.2.3

    chore(deps): bump json5 from 2.1.3 to 2.2.3

    Bumps json5 from 2.1.3 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump json5 from 2.1.3 to 2.2.3 in /examples/detox

    chore(deps): bump json5 from 2.1.3 to 2.2.3 in /examples/detox

    Bumps json5 from 2.1.3 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • when I pass prop mode='time 'then how we get time from date and set into date picker react-native

    when I pass prop mode='time 'then how we get time from date and set into date picker react-native

    Describe the bug A clear and concise description of what the bug is.

    Expected behavior A clear and concise description of what you expected to happen.

    To Reproduce Add example code that reproduces the behavior.

    export default class App extends Component {
    
      state = { date: new Date() }
    
      render = () =>
        <DatePicker
          date={this.state.date}
          onDateChange={date => this.setState({ date })}
        />
    
    }
    

    Smartphone (please complete the following information):

    • OS: [Android or iOS]
    • React Native version [e.g. 0.59.4]
    • react-native-date-picker version [e.g. 2.5.1]
    opened by MuhammadKashifAslam 0
  • Date type

    Date type

    Describe the bug A clear and concise description of what the bug is.

    Expected behavior A clear and concise description of what you expected to happen.

    To Reproduce <Button title="Datum" onPress={() => setOpen(true)} /> <DatePicker modal mode={'date'} theme={'light'} open={open} date={date} onConfirm={(date) => { setOpen(false) setDate(date) }} onCancel={() => { setOpen(false) }} />

    
    mode date is not producing only date without Time, i have set mode  date but not worked
    
    opened by ENGR-MANSOOR 0
  • Cannot set the input date value with appium and webdriver.io

    Cannot set the input date value with appium and webdriver.io

    Describe the bug

    There is no input, thus this package cannot be tested with uiautomator2 xcuitest, through appium and webdriver.io

    Expected behavior

    We expect to be able to set the input date value in e2e testing

    To Reproduce

    State is stored not as an input value, but in a state, causing the impossibility to set it without gesture

    export default class App extends Component {
    
      state = { date: new Date() }
    
      render = () =>
        <DatePicker
          date={this.state.date}
          onDateChange={date => this.setState({ date })}
        />
    
    }
    

    Smartphone (please complete the following information):

    • OS: Android and iOS
    • React Native version : 0.68.5
    • react-native-date-picker version : 4.2.2
    opened by kopax-polyconseil 0
Releases(v4.2.6)
  • v4.2.6(Nov 2, 2022)

    What's Changed

    • Add NL + FR accessibility strings on android by @JorenVos in https://github.com/henninghall/react-native-date-picker/pull/577

    Full Changelog: https://github.com/henninghall/react-native-date-picker/compare/v4.2.5...v4.2.6

    Source code(tar.gz)
    Source code(zip)
  • v4.2.5(Jul 18, 2022)

    • Allow changing android picker theme https://github.com/henninghall/react-native-date-picker/pull/548
      • Divider color
      • Modal button colors
      • Font size
    Source code(tar.gz)
    Source code(zip)
  • v4.2.4(Jul 17, 2022)

  • v4.2.3(Jul 16, 2022)

  • v4.2.2(May 22, 2022)

    • Add import to fix builds failing on iOS https://github.com/henninghall/react-native-date-picker/pull/512
    • Remove unused import https://github.com/henninghall/react-native-date-picker/pull/515
    Source code(tar.gz)
    Source code(zip)
  • v4.2.1(Apr 19, 2022)

  • v4.2.0(Feb 23, 2022)

  • v4.1.5(Feb 14, 2022)

  • v4.1.4(Feb 12, 2022)

  • v4.1.3(Dec 6, 2021)

  • v4.1.2(Nov 26, 2021)

  • v4.1.1(Oct 22, 2021)

  • v4.1.0(Oct 2, 2021)

    • feat: improved spoken feedback https://github.com/henninghall/react-native-date-picker/pull/390 @mika-lindell
    • fix: date changes for all mounted android modal pickers https://github.com/henninghall/react-native-date-picker/pull/399
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(Sep 3, 2021)

    ✅ No breaking changes

    • feat: modal https://github.com/henninghall/react-native-date-picker/pull/376
    • fix: talkback read display value on scroll value change https://github.com/henninghall/react-native-date-picker/pull/373
    • fix: android compilation error https://github.com/henninghall/react-native-date-picker/pull/377
    • chore: make date prop required in typescript + move d.ts file to root https://github.com/henninghall/react-native-date-picker/pull/375
    Source code(tar.gz)
    Source code(zip)
  • v3.4.3(Aug 28, 2021)

  • v3.4.2(Aug 24, 2021)

  • v3.4.1(Aug 22, 2021)

  • v3.4.0(Aug 20, 2021)

    • migrate away from jcenter to support React Native 0.65 https://github.com/henninghall/react-native-date-picker/pull/363
    • buxfix: prevent crash when using non-gregorian calendar https://github.com/henninghall/react-native-date-picker/pull/364
    • RTL support https://github.com/henninghall/react-native-date-picker/pull/365
    Source code(tar.gz)
    Source code(zip)
  • v3.3.2(Jun 22, 2021)

    • Added Hebrew screen reader support (#341)
    • Remove unnecessary app_name string (https://github.com/henninghall/react-native-date-picker/pull/347)
    Source code(tar.gz)
    Source code(zip)
  • v3.3.1(Jun 1, 2021)

  • v3.3.0(May 4, 2021)

  • v3.2.10(Feb 20, 2021)

  • v3.2.9(Jan 24, 2021)

  • v3.2.8(Jan 17, 2021)

  • v3.2.7(Dec 28, 2020)

  • v3.2.6(Dec 28, 2020)

  • v3.2.5(Oct 18, 2020)

  • v3.2.4(Oct 12, 2020)

  • v3.2.3(Sep 10, 2020)

  • v3.2.2(Aug 29, 2020)

Owner
Henning Hall
Henning Hall
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 336 Dec 15, 2022
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Tomas Roos 6.8k Dec 31, 2022
A button React Native component supporting showing different states with animations

React Native Awesome Button An <AwesomeButton /> component that creates a button depicting different states in terms of e.g. color and label text. Whe

Lars Vinter 233 Dec 21, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 1000 Jan 9, 2023
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 345 Nov 11, 2022
Blend-mode-demo-using-react-p5-wrapper - React+p5.js app demonstrating p5.js blend modes, Uses react-p5-wrapper

React + p5.js blend mode demonstrator This is a React + p5.js app which demonstr

null 0 Jan 29, 2022
react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

react-native-datepicker React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS Insta

X  Fruit Team 2.1k Dec 24, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 96 Jan 2, 2023
Provide solutions to make your app flexible for different screen sizes, different devices.

react-native-size-scaling Provide solutions to make your app flexible for different screen sizes, different devices, based on your device's pixel rati

Hoà Phan 33 Dec 23, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 398 Nov 11, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 354 Dec 26, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 180 Jan 2, 2023
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 432 Dec 27, 2022
🚀 Easy to use time and date picker with lots of options for React Native 🥳

Documentation Getting Started Usage Configuration Localization Localization Contribution Installation Add the dependency: npm i react-native-time-date

FreakyCoder 22 Dec 21, 2022
React Native date and time pickers for Android

react-native-date React Native date and time pickers for Android Installation and How to use Step 1 - NPM Install npm install --save react-native-date

Igor Adrov 45 Apr 10, 2019
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 543 Dec 22, 2022
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 487 Jan 4, 2023
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 82 Dec 20, 2022
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 21 Dec 13, 2022