react-native-reanimated-datepicker

React Native DatePicker component for both Android and iOS, using new react native community date & time pickers

Install

npm install react-native-reanimated-datepicker --save

Or

yarn add react-native-reanimated-datepicker

Once the above package is installed, please install these other packages

yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-interactable-reanimated

Or

npm install react-native-gesture-handler --save
npm install react-native-reanimated --save
npm install react-native-interactable-reanimated --save

If you have react-native-gesture-handler and react-native-reanimated already installed just install react-native-interactable-reanimated

yarn add react-native-interactable-reanimated

Or

npm install react-native-interactable-reanimated --save

Usage

import React, { Component } from "react";
import DateTimePicker from "../src/index";
import { View, TouchableOpacity, Text, Platform } from "react-native";
import moment from "moment";
 
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      showDatepicker: false,
    };
  }
 
  onChange = (event, selectedDate) => {
    if (Platform.OS === "ios") {
      this.setState({
        date: moment(selectedDate, "YYYY-MM-DDTHH:mm:ss.sssZ").toDate(),
      });
    } else if (Platform.OS === "android") {
      //Here its a slight different to manage, because this function is called when ok or cancel button is pressed
      //Check if the selectedDate is undefined.
      if (selectedDate === undefined) {
        this.setState({
          showDatepicker: false,
        });
      } else {
        this.setState({
          date: moment(selectedDate, "YYYY-MM-DDTHH:mm:ss.sssZ").toDate(),
          showDatepicker: false,
        });
      }
    }
  };
 
  //NOTE: For iOS Only
  handleCancelButtonPressed = () => {
    this.setState({
      showDatepicker: false,
    });
  };
 
  //NOTE: For iOS Only
  handleConfirmButtonPressed = () => {
    this.setState({
      showDatepicker: false,
    });
  };
 
  render() {
    const { date, showDatepicker } = this.state;
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
        }}>
        <TouchableOpacity
          onPress={() => {
            this.setState({
              showDatepicker: true,
            });
          }}>
          <>
            <Text style={{ textAlign: "center" }}>Open date picker</Text>
            <Text style={{ textAlign: "center" }}>
              Selected Date: {date.toDateString()}
            </Text>
          </>
        </TouchableOpacity>
        {showDatepicker && (
          <DateTimePicker
            mode="date"
            display="default"
            handleDateChanged={this.onChange}
            date={this.state.date}
            cancelBtnText="Cancel"
            handleCancelBtnPress={this.handleCancelButtonPressed}
            confirmBtnText="Done"
            handleConfirmButtonPress={this.handleConfirmButtonPressed}
            iosBottomSheetInitialPosition="40%"
            iosBottomSheetSnapPoints={["40%"]}
            iosBottomSheetBackdrop={true}
            iosBottomSheetBackDropDismissByPress={false}
          />
        )}
      </View>
    );
  }
}
 
export default index;
 

You can check example folder for more details.

Properties

Prop	Default	Type	Required	Description
date	-	string | date	Yes	Specify the display date of DatePicker. string type value must match the specified YYYY-MM-DDTHH:mm:ss.SSSZ ISO 8601 format
ref (iOS only)	-	React Ref	Yes	Create a React.createRef() and pass it in the ref of the datepicker for iOS bottom Sheet
mode	'date'	enum	No	The enum of date, datetime and time
display	'default'	enum	No	The enum of default, calendar, clock and spinner (For Android) The enum of default, spinner, compact (iOS 14 only) and inline (iOS 14 only) (For iOS)
confirmBtnText	'Done'	string	No	Specify the text of confirm btn in ios.
cancelBtnText	'Cancel'	string	No	Specify the text of cancel btn in ios.
minDate	-	date	No	Should be a date object
maxDate	-	date	No	Should be a date object
minuteInterval	0	number	No	Specify the minutes interval (iOS only).
timeZoneOffsetInMinutes	0	number	No	Allows changing of the timeZone of the date picker. By default it uses the device's time zone. (iOS Only)
is24Hour	-	boolean	No	Set the TimePicker is24Hour flag. The default value depend on format. Only work in Android
iosBottomSheetContainerStyles (iOS only)	-	object	No	iOS Bottom Sheet container styles
iosBottomSheetHeaderStyles (iOS only)	-	object	No	iOS Bottom Sheet main header styles
iosBottomSheetContentStyles (iOS only)	-	object	No	iOS Bottom Sheet main content body styles
iosBottomSheetInitialPosition (iOS only)	40%	string	No	iOS Bottom Sheet initial snap point, the bottom sheet will snap to this point after rendering
iosBottomSheetSnapPoints (iOS only)	["40%"]	Array <string | number>	No	iOS Bottom Sheet snap points, the bottom sheet will snap onto these snap points
iosBottomSheetBackdrop (iOS only)	true	bool	No	iOS Bottom Sheet backdrop, which will display bottom sheet like an overlay on the screen
iosBottomSheetBackDropDismissByPress (iOS only)	false	bool	No	iOS Bottom Sheet will dismiss if touched out the bottom sheet
iosBottomSheetCustomHeader (iOS only)	-	React Node	No	You can render your own custom bottom sheet if you do not want to use the one provided in the bundle

Events

Event	Required	Description
handleDateChanged	Yes	This event is fired when the date is changed, In this callback you can have an event and date. Now you can use these two the way you want. onChange = (event, selectedDate), function onChange(event, selectedDate)
handleCancelBtnPress	Yes	You can perform any action on the cancel button is pressed, this callback will be fired by the bottom sheet. (If default header is used pass this prop)
handleConfirmButtonPress	Yes	You can perform any action on the confirm/done button is pressed, this callback will be fired by the bottom sheet. (If default header is used pass this prop)

Bottom Sheet Methods (iOS Only)

These methods will only be provided if Ref is set for the datepicker

Method	Params	Description
snapTo	number	Bottom Sheet provides this method to snap bottom sheet to any point on the screen
dismissBottomSheet	-	Bottom Sheet provides this method to dismiss the bottom sheet