Registry / web-framework / react-native-modal-datetime-picker

react-native-modal-datetime-picker

library18.0.0jsnpmunverified

react-native-modal-datetime-picker is a declarative, cross-platform library that provides a unified user and developer experience for showing native date and time pickers within a modal in React Native applications. It is currently at stable version 18.0.0 and actively maintained, with frequent releases addressing bug fixes, new features, and breaking changes. This library acts as a wrapper around the `@react-native-community/datetimepicker` package, leveraging the underlying native module for iOS and Android while abstracting it into a convenient modal component. Its key differentiator is providing a modal overlay for the native pickers, which can be useful for applications requiring a clear, focused date/time selection interface, integrating seamlessly with both non-Expo and Expo projects.

web-framework

npm install react-native-modal-datetime-picker

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-MODAL

react-native-modal-datetime-picker

web-frameworkjavascriptv18.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DateTimePickerModal

✓ import DateTimePickerModal from 'react-native-modal-datetime-picker';

✗ import { DateTimePickerModal } from 'react-native-modal-datetime-picker'; const DateTimePickerModal = require('react-native-modal-datetime-picker');

The component is a default export, not a named export. ESM import syntax is preferred.

Props (e.g., DateTimePickerModalProps)

✓ import type { DateTimePickerModalProps } from 'react-native-modal-datetime-picker';

Import types explicitly using 'import type' for clarity and to avoid bundling type definitions in compiled JavaScript.

useDatePicker

✓ import { useDatePicker } from 'react-native-modal-datetime-picker';

While not in the quickstart, advanced usage might include hooks for more granular control. Check documentation for specific named exports.

Demonstrates how to integrate `DateTimePickerModal` to pick a date, manage its visibility with state, and handle confirmation or cancellation. Includes basic styling and platform-specific display options.

import React, { useState } from "react"; import { Button, View, Text, Platform } from "react-native"; import DateTimePickerModal from "react-native-modal-datetime-picker"; const DatePickerExample = () => { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const [selectedDate, setSelectedDate] = useState(new Date()); const showDatePicker = () => { setDatePickerVisibility(true); }; const hideDatePicker = () => { setDatePickerVisibility(false); }; const handleConfirm = (date) => { console.log("A date has been picked: ", date.toISOString()); setSelectedDate(date); hideDatePicker(); }; return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{ marginBottom: 20 }}>Selected Date: {selectedDate.toDateString()}</Text> <Button title="Show Date Picker" onPress={showDatePicker} /> <DateTimePickerModal isVisible={isDatePickerVisible} mode="date" date={selectedDate} // Set initial date onConfirm={handleConfirm} onCancel={hideDatePicker} headerTextIOS="Pick a Date" cancelTextIOS="Cancel" confirmTextIOS="Confirm" pickerContainerStyleIOS={{ backgroundColor: 'white' }} // Example iOS styling textColor="#000" // Example Android styling display={Platform.OS === 'ios' ? 'spinner' : 'default'} // Control picker display style /> </View> ); }; export default DatePickerExample;

Debug

Known issues

breakingThe `defaultProps` functionality has been completely removed. Any reliance on `defaultProps` for `DateTimePickerModal` components will now result in errors.

fix

Migrate all `defaultProps` declarations directly into component props or apply default values within the component logic itself. Ensure all required props are explicitly passed.

affects: >=18.0.0

breakingThe `onCancel` callback no longer receives a `date` parameter. If your `onCancel` handler was expecting a date object, it will now receive `undefined` or no arguments.

fix

Update `onCancel` handlers to remove any expectation or usage of a `date` parameter. The function should typically only handle hiding the picker.

affects: >=16.0.0

breakingChanges to type definitions for `customCancelButton` and `customConfirmButton` props may break existing TypeScript type-checking flows.

fix

Review and update TypeScript types for components that use `customCancelButton` or `customConfirmButton` to align with the new type declarations. Check the library's type definitions for the correct interface.

affects: >=14.0.0

gotchaThe underlying `@react-native-community/datetimepicker` is a native module that requires manual linking in non-Expo React Native projects. Failure to link can lead to runtime errors or the picker not appearing correctly.

fix

For non-Expo projects, ensure you follow the manual linking steps for `@react-native-community/datetimepicker` in your iOS and Android native projects. For Expo projects, use `npx expo install` which handles linking.

affects: >=1.0.0

gotchaOn iOS, ensuring the picker theme (light/dark) respects the device theme or displays correctly requires specific `app.json` configuration for Expo projects or manual AppDelegate setup for bare projects.

fix

For Expo, set `userInterfaceStyle: 'automatic'` in `app.json`. For bare iOS, consider adding locale forcing in `AppDelegate.m` to ensure proper 24h/12h format and theme alignment. Avoid 'forcing' a theme with `isDarkModeEnabled` if you want it to follow OS settings.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'defaultProps')

Attempting to access `defaultProps` on `DateTimePickerModal` which has been removed.

fix

Remove `defaultProps` usage and pass all props explicitly or handle defaults internally.

Argument of type 'Date | undefined' is not assignable to parameter of type 'Date'.

The `onCancel` callback no longer provides a `date` object, leading to type mismatches if your handler expects one.

fix

Adjust the `onCancel` handler signature to not expect a `date` parameter, or handle `undefined` explicitly.

Error: `RNDateTimePicker` module not found. Are you sure you've linked all the native dependencies and rebuilt your app?

The underlying native module `@react-native-community/datetimepicker` was not correctly linked or the app was not rebuilt after installation.

fix

For non-Expo projects, run `npx react-native link @react-native-community/datetimepicker` (if applicable for your RN version) or follow manual linking instructions, then rebuild your native project (`npx react-native run-ios` / `run-android`). For Expo, ensure `npx expo install` was used and clear cache if needed.

Upgrade

Version history

18.0.0latest on npm

Audit

Dependencies

@react-native-community/datetimepickerrequiredCore dependency for native date/time picker functionality.

react-nativerequiredFundamental framework for React Native applications.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/mmazzarolo/react-native-modal-datetime-picker ↗

packagehttps://www.npmjs.com/package/react-native-modal-datetime-picker ↗