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 30
  • 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
  • Light theme prop not working with iOS

    Light theme prop not working with iOS

    Describe the bug When setting the theme prop to light, I'm still seeing a dark background with black text (see screenshot). My only solution is to set text to white but that's not a good approach because I'm risking certain instances opening the modal with the light background and white text.

    FYI I'm testing this in Metro, not sure if that has an impact.

    Expected behavior For the modal background to be light

    To Reproduce Add example code that reproduces the behavior.

    <DatePicker
            theme="light"
            modal={true}
            open={openPickerModal}
            date={date}
            mode="date"
            onConfirm={(newDate) => onDateConfirm(newDate, field)}
            onCancel={onDatePickerCancel}
            locale="en-US"
    />
    

    Smartphone:

    • OS: iOS
    • React Native version 0.66.1
    • react-native-date-picker version 4.2.5

    IMG_C1C10163210E-1

    opened by vxm5091 0
  • Light mode change from dark mode is broken

    Light mode change from dark mode is broken

    Describe the bug If you enable dark mode, open/close the modal, then go back to light mode and open the modal again, the text is black but the background is still dark gray so there's not enough contrast.

    In a recent update I saw that dark mode support was added and the text is working as expected, so I assume the callback handling the theme change should also handle the background color.

    Edit: If you close the app and open it again, it works as expected

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

    To Reproduce

    export default class App extends Component {
    
      state = { date: new Date() }
    
      render = () =>
        <DatePicker
            modal
            open={true}
            date={new Date()}
          />
    
    }
    

    Smartphone (please complete the following information):

    • OS: [Android]
    • React Native version [0.66.0]
    • react-native-date-picker version [4.2.5]
    opened by BrandonMA 0
  • method '+UIDatePickerMode:' in category from

    method '+UIDatePickerMode:' in category from "..." conflicts with same method from another category when archiving on IOS/xcode

    Describe the bug I am trying to archive my project using fastlane (gym) on circleCI. I'm getting the following error:

     ld: method '+UIDatePickerMode:' in category from /Users/distiller/Library/Developer/Xcode/DerivedData/myapp-afcitdfwjbmwxbbbhpiatfbfkjkg/Build/Intermediates.noindex/ArchiveIntermediates/myapp/BuildProductsPath/Staging-iphoneos/react-native-date-picker/libreact-native-date-picker.a(RNDatePickerManager.o) conflicts with same method from another category
    ...
    Running script 'Bundle React Native code and images'
    ▸ Generating 'myapp.app.dSYM'
    ** ARCHIVE FAILED **
    
    The following build commands failed:
        PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images /Users/distiller/Library/Developer/Xcode/DerivedData/myapp-afcitdfwjbmwxbbbhpiatfbfkjkg/Build/Intermediates.noindex/ArchiveIntermediates/myapp/IntermediateBuildFilesPath/myapp.build/Staging-iphoneos/myapp.build/Script-00DD1BFF1BD5951E006B06BC.sh (in target 'myapp' from project 'myapp')
    (1 failure)
    [14:26:45]: Exit status: 65
    

    Building locally is fine. I've tried Xcode cleans, plus my pods are re-installing fresh each time.

    Expected behavior The project should archive successfully

    To Reproduce The fastlane gym/build config I'm using is

        xcversion(version: "13.4.1")
        cocoapods(
          clean_install: true,
          podfile: "./ios/Podfile"
        )
    
        gymOptions = ({
          silent: true,
          clean: true,
          configuration: ENV['BUILD_CONFIGURATION'],
          export_team_id: ENV['IOS_TEAM_ID'],
          export_options: {
            signingStyle: "manual",
            provisioningProfiles: { 
              ENV['IOS_APP_ID'] => ENV[profile_env_name],
              ENV['PUSH_INTERCEPTOR_BUNDLE_ID'] => ENV[push_interceptor_profile_env_name],
              ENV['WIDGETS_BUNDLE_ID'] => ENV[widgets_profile_env_name],
            }
          }
        }).merge(
          File.directory?("../#{xcworkspace}") ?
            {workspace: xcworkspace} :
            {project: xcodeproj}
        )
        gym(gymOptions)
    
    

    Smartphone (please complete the following information):

    • OS: iOS
    • React Native version 0.63 (but also tried on 0.66 and had the same issue)
    • react-native-date-picker version 4.2.5 (I previously was on version 3.2.5 and had the same issue)
    • Fastlane 2.208.0

    Any ideas on things I can try? From reading around on similar issues this looks like something the library author usually needs to fix, but it seems odd no one else has experienced this.

    opened by matt-dalton 5
  • Plugin crashes an EAS Preview Build but works on development build

    Plugin crashes an EAS Preview Build but works on development build

    Describe the bug When built with eas development profile, the plugin runs well but when built with eas preview it fails to find the DatePicker element and crashes the app. Gives the following error

    **Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Expected behavior It should be able to access the DatePicker in the eas preview build

    To Reproduce eas build --platform android --local --profile preview

    Install the app on device and try to access the page with the datepicker

    My date picker code <DatePicker modal date={dob} open={showDatePicker} mode="date" onConfirm={handleConfirm} onCancel={hideDatePicker} />

    
    **Smartphone (please complete the following information):**
     - OS: Both Android and iOS
     - React Native version 0.68.2
     - react-native-date-picker version 4.2.2
    
    opened by pushparajsamant 1
  • Inline DatePicker's text becomes invisible after navigation.pop if transition animation is turned off

    Inline DatePicker's text becomes invisible after navigation.pop if transition animation is turned off

    Describe the bug The text on DatePicker becomes blank after navigating onto another screen and returning back, when transition animations are off.

    Expected behavior Excpected DatePicker's text to be still visible. Actually, if I try to log current selected date from state variable - it continues to work (gestures are working and changing current date), but just the text is not visible. Even setting textColor explicitly does not help.

    If I turn on transition animations (animationEnabled = true) everything works as expected.

    To Reproduce

    Dependencies in package.json:

    "dependencies": {
        "@react-navigation/native": "^6.0.10",
        "@react-navigation/stack": "^6.2.1",
        "react": "17.0.2",
        "react-native": "0.68.2",
        "react-native-date-picker": "^4.2.2",
        "react-native-gesture-handler": "^2.4.2",
        "react-native-safe-area-context": "^4.3.1"
      },
    

    Use this example App.tsx

    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator, StackScreenProps} from '@react-navigation/stack';
    import React, {useState} from 'react';
    import {SafeAreaView, TouchableOpacity} from 'react-native';
    import DatePicker from 'react-native-date-picker';
    
    type RootStackParamList = {
      ScreenOne: undefined;
      ScreenTwo: undefined;
    };
    
    const ScreenOne = ({
      navigation,
    }: StackScreenProps<RootStackParamList, 'ScreenOne'>) => {
      const [selectedDate, setSelectedDate] = useState(new Date());
    
      return (
        <SafeAreaView style={{flex: 1}}>
          <DatePicker
            textColor="black"
            maximumDate={new Date()}
            mode={'date'}
            date={selectedDate}
            onDateChange={date => {
              setSelectedDate(date);
            }}
          />
          <TouchableOpacity
            style={{width: 100, height: 100, backgroundColor: 'red'}}
            onPress={() => navigation.navigate('ScreenTwo')}
          />
        </SafeAreaView>
      );
    };
    
    const ScreenTwo = ({
      navigation,
    }: StackScreenProps<RootStackParamList, 'ScreenTwo'>) => {
      return (
        <SafeAreaView style={{flex: 1}}>
          <TouchableOpacity
            style={{width: 100, height: 100, backgroundColor: 'red'}}
            onPress={() => navigation.pop()}
          />
        </SafeAreaView>
      );
    };
    
    const Stack = createStackNavigator();
    
    const App = () => {
      return (
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName="ScreenOne"
            screenOptions={{animationEnabled: false}}>
            <Stack.Screen name="ScreenOne" component={ScreenOne} />
            <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    };
    
    export default App;
    
    

    Open app. Date picker looks like this: Screenshot from 2022-06-06 18-35-50

    Press the red square to navigate to the next screen. Then navigate back, pressing another red square. Now the screen looks like this: Screenshot from 2022-06-06 18-34-56

    I'd expect DatePicker to be visible again.

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version: 0.68.2
    • react-native-date-picker version: 4.2.2
    opened by AlexTaran 1
Releases(v4.2.5)
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 330 Sep 22, 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 Sep 30, 2022
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 346 Jul 30, 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 234 Jul 12, 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 931 Oct 2, 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 Sep 26, 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 86 Sep 19, 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 399 Sep 23, 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 348 Sep 23, 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
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 168 Sep 15, 2022
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 31 Sep 22, 2022
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 404 Oct 4, 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 15 Sep 30, 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 544 Sep 27, 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 467 Sep 23, 2022
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 81 Sep 26, 2022
react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

null 3 Dec 21, 2021