@anasyd/react-native-modern-date-picker

Modern, fully-featured date and time picker for React Native & Expo with scroll-wheel time selection, age restrictions, time ranges, and custom theming.

Install

npm install @anasyd/react-native-modern-date-picker

Optional blur libs if you want a blur backdrop:

# Expo
npm install expo-blur

# Bare RN
npm install @react-native-community/blur

Changelog

See CHANGELOG.md for release notes.

Quick Start

import ModernDatePicker from "@anasyd/react-native-modern-date-picker";

<ModernDatePicker
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
/>;

Features

• 📅 Date Picker - Month view calendar with year/month selection
• ⏰ Time Picker - iOS-style scroll wheels for hours, minutes, and AM/PM
• 🔀 Multiple Modes - Date, time, or datetime combined
• 👤 Age Restrictions - minAge and maxAge props (e.g., 18+ only)
• ⏱️ Time Ranges - minTime and maxTime for business hours, etc.
• 📱 Haptic Feedback - Smart haptic feedback on iOS/Android
• 🎨 Full Theming - Semantic color tokens, palette system, dark/light presets
• 🌍 Internationalization - Locale support for dates and first day of week
• 🧪 TypeScript - Full type safety
• ⚡ Lightweight - No heavy dependencies

Picker Modes

Date Mode

Traditional calendar picker for selecting dates.

<ModernDatePicker
  mode="date"
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date()}
/>

Time Mode

Scrollable time picker with hour/minute wheels. Supports 12/24 hour formats.

<ModernDatePicker
  mode="time"
  is24Hour={false}
  minuteInterval={15}
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
  minTime={{ hour: 9, minute: 0 }}  // 9:00 AM
  maxTime={{ hour: 17, minute: 0 }} // 5:00 PM
/>

DateTime Mode

Combined date and time selection. Pick date first, then switch to time.

<ModernDatePicker
  mode="datetime"
  is24Hour={false}
  minuteInterval={15}
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
/>

Date & Time Constraints

Age Restrictions

Use minAge and maxAge to restrict birth date selection:

// Only allow ages 18-65
<ModernDatePicker
  mode="date"
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
  minAge={18}  // Must be at least 18 years old
  maxAge={65}  // Cannot be older than 65
/>

Date Range

Use minDate and maxDate for custom date ranges:

<ModernDatePicker
  mode="date"
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date()}  // Today
/>

Time Range

Use minTime and maxTime to restrict time selection (e.g., business hours):

<ModernDatePicker
  mode="time"
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
  minTime={{ hour: 9, minute: 0 }}   // 9:00 AM
  maxTime={{ hour: 17, minute: 30 }} // 5:30 PM
/>

Invalid times are visually disabled (crossed out with low opacity) and cannot be selected.

Theming

You can theme in two ways:

A) App-wide (recommended): ThemeProvider + createTheme

import {
  ThemeProvider,
  createTheme,
} from "@anasyd/react-native-modern-date-picker";

const theme = createTheme({
  preset: "light", // "light" | "dark"
  palette: {
    primary: "#ffffff",   // surfaces/background
    secondary: "#000000", // text/icons
    accent: "#2563eb",    // selection highlight
  },
  // optional fine tuning:
  // overrides: { colors: { divider: "#eaeaea" }, radii: { md: 14 } }
});

<ThemeProvider value={theme}>
  <ModernDatePicker
    open={open}
    onClose={() => setOpen(false)}
    value={value}
    onChange={setValue}
  />
</ThemeProvider>;

B) One-off: pass a theme input on the component

Useful for quick demos or if you don't want a provider.

<ModernDatePicker
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={setValue}
  theme={{
    preset: "dark",
    palette: {
      primary: "#1f2937",
      secondary: "#ffffff",
      accent: "#f59e0b",
    },
  }}
/>

Palette to Semantic Token Mapping

When you define a theme with createTheme({ preset, palette }), the palette colors map to semantic tokens:

Semantic color tokens

createTheme({ preset, palette, overrides }) computes these tokens for you and auto-contrasts text (WCAG-ish 4.5) to avoid unreadable combos.

Backdrop

Custom Blur Backdrop (Expo)

import { BlurView } from "expo-blur";
import { Animated, StyleSheet, Platform } from "react-native";

<ModernDatePicker
  open={open}
  onClose={onClose}
  renderBackdrop={(opacity) => (
    <Animated.View style={[StyleSheet.absoluteFill, { opacity }]}>
      <BlurView
        intensity={12}
        tint="dark"
        experimentalBlurMethod={
          Platform.OS === "android" ? "dimezisBlurView" : undefined
        }
        style={StyleSheet.absoluteFill}
      />
    </Animated.View>
  )}
/>;

Custom Blur Backdrop (Bare RN)

import { BlurView } from "@react-native-community/blur";
import { Animated, StyleSheet } from "react-native";

<ModernDatePicker
  open={open}
  onClose={onClose}
  renderBackdrop={(opacity) => (
    <Animated.View style={[StyleSheet.absoluteFill, { opacity }]}>
      <BlurView
        blurType="dark"
        blurAmount={12}
        style={StyleSheet.absoluteFill}
      />
    </Animated.View>
  )}
/>;

Backdrop Props

• renderBackdrop(opacity) – custom backdrop node.
• showDefaultBackdrop (default true) – toggle built-in dim.
• backdropColor (default #000) – dim overlay color.

Props

Haptic Feedback

The picker automatically provides haptic feedback on:

• Year scroll interactions (medium intensity)
• Time picker scroll selections (light intensity)
• AM/PM scroll changes (light intensity)

Platform Support

iOS:

• Uses Expo Haptics if available with proper intensity levels
• Falls back to native iOS HapticFeedback
• Last resort: Minimal vibration (5ms)

Android:

• Uses react-native-haptic-feedback if available for native haptic effects
• Falls back to native Android haptic feedback
• Last resort: Minimal vibration (3ms)

Optional Enhanced Haptics

For the best haptic experience, you can optionally install:

npm install react-native-haptic-feedback
# For React Native 0.60+, run:
cd ios && pod install

This provides native haptic effects like impactLight, impactMedium, and impactHeavy on both platforms.

Key Features:

• ✅ Smart triggering: Only on actual value changes, not every scroll event
• ✅ Proper haptics: Uses native haptic APIs, not loud vibration
• ✅ Graceful fallbacks: Works on all devices with appropriate intensity
• ✅ No spam: Prevents excessive haptic feedback during scrolling

Exports

import ModernDatePicker, {
  createTheme,
  extendTheme,
  ThemeProvider,
  useTheme,
} from "@anasyd/react-native-modern-date-picker";

• createTheme(input) → builds a WCAG-safe theme from preset + palette (+ optional overrides).
• extendTheme(base, overrides) → convenient theme layering (e.g., tweak accent for a section).
• ThemeProvider / useTheme() → share theme via context (global or nested).
• ModernDatePicker → the component.

License

MIT