react-native-smart-date-picker

A lightweight, customizable React Native wheel-style date and datetime picker with a consistent UI on iOS and Android.

Features

• Wheel columns for day, month, year, hour, and minute
• Modes: date, time, datetime (date then time)
• Optional center selection overlay row
• Initial value support and min/max date clamping
• Theme and style customization via props
• Custom row height with itemHeight

Installation

Install in your React Native project:

npm install react-native-smart-date-picker

Peer dependencies: react and react-native (see package.json).

Usage

Basic example (date then time flow):

import React, { useState } from 'react';
import SmartDatePicker from 'react-native-smart-date-picker';

function Example() {
	const [pickerVisible, setPickerVisible] = useState(false);
	const [selectedDate, setSelectedDate] = useState(new Date());

	return (
		<>
			<Button title="Open" onPress={() => setPickerVisible(true)} />

			<SmartDatePicker
				visible={pickerVisible}
				value={selectedDate}
				mode="datetime" // "date" | "time" | "datetime"
				onCancel={() => setPickerVisible(false)}
				onConfirm={(date) => {
					setSelectedDate(date);
					setPickerVisible(false);
					console.log('Selected Date:', date);
				}}
			/>
		</>
	);
}

Time-only example

<SmartDatePicker visible={true} mode="time" onConfirm={...} onCancel={...} />

Date-only example

<SmartDatePicker visible={true} mode="date" onConfirm={...} onCancel={...} />

Theme example

<SmartDatePicker
	visible={pickerVisible}
	value={selectedDate}
	mode="datetime"
	theme={{
		primaryColor: '#0f766e',
		backgroundColor: '#f8fafc',
		wheelBackgroundColor: '#ffffff',
		textColor: '#111827',
		buttonTextColor: '#0f766e',
	}}
	onCancel={() => setPickerVisible(false)}
	onConfirm={(date) => {
		setSelectedDate(date);
		setPickerVisible(false);
	}}
/>

Behavior

• In datetime mode, the picker shows the date wheels first and then transitions to time selection.
• In date mode, the picker renders day/month/year wheels only.
• In time mode, the picker renders hour/minute wheels only.
• value is clamped to minimumDate / maximumDate before confirmation.
• showSelectionOverlay defaults to true and renders a centered highlight bar.
• The modal slides up from the bottom using React Native Modal.

Props

Required

• visible: boolean — whether the picker is visible
• onConfirm: (date: Date) => void — called when the user taps Done
• onCancel: () => void — called when the user taps Cancel

Core picker props

• mode?: 'date' | 'time' | 'datetime' — which wheel UI to show (default: datetime)
• value?: Date — initial selected date/time (defaults to new Date())
• minimumDate?: Date — earliest selectable date/time
• maximumDate?: Date — latest selectable date/time
• showSelectionOverlay?: boolean — display the center selection overlay row (default: true)
• itemHeight?: number — custom row height for wheel items

Theme and styling

• theme?: Partial<SmartDatePickerTheme> — partial theme object for colors
• customTheme?: SmartDatePickerTheme — full theme object replacing default theme values
• minDateTheme?: Partial<SmartDatePickerTheme> — theme overrides when the selected date equals minimumDate
• maxDateTheme?: Partial<SmartDatePickerTheme> — theme overrides when the selected date equals maximumDate
• primaryColor?: string
• backgroundColor?: string
• textColor?: string
• buttonTextColor?: string
• overlayBorderColor?: string
• disabledTextColor?: string
• selectionOverlayColor?: string
• headerBackgroundColor?: string
• wheelBackgroundColor?: string

Style overrides

• containerStyle?: ViewStyle — style for the modal container
• wheelStyle?: ViewStyle — style for the wheel columns
• overlayStyle?: ViewStyle — style for the picker panel / overlay
• textStyle?: TextStyle — style for all wheel labels
• selectedTextStyle?: TextStyle — style for the selected wheel label

See src/types/index.ts for the full TypeScript interface.

Development

Build the library locally:

npm install
npm run build

For development with live compile:

npm run watch

TypeScript / Editor notes

• If your editor shows "Cannot use JSX unless the '--jsx' flag is provided", ensure tsconfig.json contains "jsx": "react-jsx" and restart the TypeScript server in VS Code: Command Palette → TypeScript: Restart TS Server.

License

MIT