React Native DatePicker

A flexible and customizable React Native datepicker component with bottom sheet modal, featuring smooth wheel scrolling.

Features

• 📅 Date and Time Picker support
• 🎨 Fully customizable styling
• 📱 Cross-platform (iOS & Android)
• 🎡 Smooth wheel scrolling animation
• 🔧 TypeScript support
• ⚡ Easy to use with ref API
• 🎯 Min/Max date range support
• ♿ Safe area support

Screenshots

Installation

npm install @purjayadi/react-native-datepicker

or

yarn add @purjayadi/react-native-datepicker

Peer Dependencies

This package requires the following peer dependencies to be installed:

npm install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet date-fns react-native-wheel-scrollview-picker react-native-safe-area-context

Make sure to follow the setup instructions for:

• @gorhom/bottom-sheet
• react-native-reanimated
• react-native-gesture-handler

Why date-fns?

This package uses date-fns for date manipulation, offering several advantages:

• ⚡ Tree-shakeable: Only bundle what you use (~13KB vs ~70KB with Moment.js)
• 🚀 Modern: Works with native JavaScript Date objects
• 🔧 Immutable: Functions always return new date instances
• 📦 Modular: Import only the functions you need

Usage

Basic Example

import React, { useRef } from "react";
import { View, Button } from "react-native";
import { DatePicker, DatePickerRef } from "@purjayadi/react-native-datepicker";

export default function App() {
  const datePickerRef = useRef<DatePickerRef>(null);
  const [selectedDate, setSelectedDate] = React.useState<string>("");

  return (
    <View style={{ padding: 20 }}>
      <DatePicker
        ref={datePickerRef}
        label="Select Date"
        placeholder="Choose a date"
        currentDate={selectedDate}
        onSetDate={setSelectedDate}
      />

      <Button
        title="Open Picker"
        onPress={() => datePickerRef.current?.show()}
      />
    </View>
  );
}

With Time Picker

<DatePicker
  ref={datePickerRef}
  label="Select Date & Time"
  value={selectedDateTime}
  onChange={setSelectedDateTime}
  showTimePicker={true}
/>

With Min/Max Date

<DatePicker
  ref={datePickerRef}
  label="Select Date"
  value={selectedDate}
  onChange={setSelectedDate}
  minDate="2020-01-01"
  maxDate="2025-12-31"
/>

With Custom Styling

<DatePicker
  ref={datePickerRef}
  label="Select Date"
  value={selectedDate}
  onChange={setSelectedDate}
  inputStyle={{
    backgroundColor: "#E8F5E9",
    borderRadius: 12,
  }}
  inputTextStyle={{
    fontSize: 18,
    color: "#1B5E20",
  }}
  highlightColor="#4CAF50"
  buttonStyle={{
    backgroundColor: "#4CAF50",
  }}
/>

With Validation Errors

<DatePicker
  ref={datePickerRef}
  label="Birth Date"
  value={birthDate}
  onChange={setBirthDate}
  errors={["Please select your birth date"]}
/>

With Custom Date Format

// ISO format: "2026-02-06"
<DatePicker
  ref={datePickerRef}
  label="Select Date"
  value={selectedDate}
  onChange={setSelectedDate}
  dateFormat="yyyy-MM-dd"
/>

// US format: "02/06/2026"
<DatePicker
  ref={datePickerRef}
  label="Select Date"
  value={selectedDate}
  onChange={setSelectedDate}
  dateFormat="MM/dd/yyyy"
/>

// Custom format with time: "Feb 06, 2026 3:30 PM"
<DatePicker
  ref={datePickerRef}
  label="Select Date & Time"
  value={selectedDateTime}
  onChange={setSelectedDateTime}
  showTimePicker
  dateFormat="MMM dd, yyyy h:mm a"
/>

Note: Date format uses date-fns format tokens. Common formats:

• yyyy-MM-dd → 2026-02-06
• dd/MM/yyyy → 06/02/2026
• MMM dd, yyyy → Feb 06, 2026
• MMMM dd, yyyy HH:mm → February 06, 2026 15:30

API Reference

Props

Prop	Type	Default	Description
value	string	undefined	Current selected date string
label	string	undefined	Label text above the input
placeholder	string	"Select Date"	Placeholder text when no date is selected
onChange	(date: string) => void	required	Callback when date is selected
minDate	string	undefined	Minimum selectable date (ISO format)
maxDate	string	undefined	Maximum selectable date (ISO format)
showTimePicker	boolean	false	Show time picker in addition to date
dateFormat	string	"dd MMMM yyyy" or "dd MMM yyyy HH:mm"	Custom date format (uses date-fns format)
subText	string | React.ReactNode	undefined	Subtitle text below label
errors	string[]	undefined	Array of error messages
inputStyle	ViewStyle	undefined	Custom style for input container
inputTextStyle	TextStyle	undefined	Custom style for input text
labelStyle	TextStyle	undefined	Custom style for label
errorStyle	TextStyle	undefined	Custom style for error text
subTextStyle	TextStyle	undefined	Custom style for subtitle text
highlightColor	string	"#E5E5E5"	Color of the picker highlight
buttonStyle	ViewStyle	undefined	Custom style for save button
buttonTextStyle	TextStyle	undefined	Custom style for save button text
cancelButtonStyle	ViewStyle	undefined	Custom style for cancel button
cancelButtonTextStyle	TextStyle	undefined	Custom style for cancel button text

Ref Methods

Method	Parameters	Description
show	initialDate?: string	Opens the date picker modal

Example App

Check out the example directory for a complete working Expo app demonstrating all features.

Run the Example

cd example
npm install
npm start

Scan the QR code with Expo Go app or press i for iOS simulator / a for Android emulator.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Your Name]

Credits

Built with:

• @gorhom/bottom-sheet
• react-native-wheel-scrollview-picker
• date-fns