{"id":11785,"library":"react-native-modal-datetime-picker","title":"React Native Modal Datetime Picker","description":"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.","status":"active","version":"18.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mmazzarolo/react-native-modal-datetime-picker","tags":["javascript","react-native","react","native","date","time","picker","android","ios","typescript"],"install":[{"cmd":"npm install react-native-modal-datetime-picker","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-modal-datetime-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-modal-datetime-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for native date/time picker functionality.","package":"@react-native-community/datetimepicker","optional":false},{"reason":"Fundamental framework for React Native applications.","package":"react-native","optional":false}],"imports":[{"note":"The component is a default export, not a named export. ESM import syntax is preferred.","wrong":"import { DateTimePickerModal } from 'react-native-modal-datetime-picker';\nconst DateTimePickerModal = require('react-native-modal-datetime-picker');","symbol":"DateTimePickerModal","correct":"import DateTimePickerModal from 'react-native-modal-datetime-picker';"},{"note":"Import types explicitly using 'import type' for clarity and to avoid bundling type definitions in compiled JavaScript.","symbol":"Props (e.g., DateTimePickerModalProps)","correct":"import type { DateTimePickerModalProps } from 'react-native-modal-datetime-picker';"},{"note":"While not in the quickstart, advanced usage might include hooks for more granular control. Check documentation for specific named exports.","symbol":"useDatePicker","correct":"import { useDatePicker } from 'react-native-modal-datetime-picker';"}],"quickstart":{"code":"import React, { useState } from \"react\";\nimport { Button, View, Text, Platform } from \"react-native\";\nimport DateTimePickerModal from \"react-native-modal-datetime-picker\";\n\nconst DatePickerExample = () => {\n  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(new Date());\n\n  const showDatePicker = () => {\n    setDatePickerVisibility(true);\n  };\n\n  const hideDatePicker = () => {\n    setDatePickerVisibility(false);\n  };\n\n  const handleConfirm = (date) => {\n    console.log(\"A date has been picked: \", date.toISOString());\n    setSelectedDate(date);\n    hideDatePicker();\n  };\n\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Text style={{ marginBottom: 20 }}>Selected Date: {selectedDate.toDateString()}</Text>\n      <Button title=\"Show Date Picker\" onPress={showDatePicker} />\n      <DateTimePickerModal\n        isVisible={isDatePickerVisible}\n        mode=\"date\"\n        date={selectedDate} // Set initial date\n        onConfirm={handleConfirm}\n        onCancel={hideDatePicker}\n        headerTextIOS=\"Pick a Date\"\n        cancelTextIOS=\"Cancel\"\n        confirmTextIOS=\"Confirm\"\n        pickerContainerStyleIOS={{ backgroundColor: 'white' }} // Example iOS styling\n        textColor=\"#000\" // Example Android styling\n        display={Platform.OS === 'ios' ? 'spinner' : 'default'} // Control picker display style\n      />\n    </View>\n  );\n};\n\nexport default DatePickerExample;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The `defaultProps` functionality has been completely removed. Any reliance on `defaultProps` for `DateTimePickerModal` components will now result in errors.","severity":"breaking","affected_versions":">=18.0.0"},{"fix":"Update `onCancel` handlers to remove any expectation or usage of a `date` parameter. The function should typically only handle hiding the picker.","message":"The `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.","severity":"breaking","affected_versions":">=16.0.0"},{"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.","message":"Changes to type definitions for `customCancelButton` and `customConfirmButton` props may break existing TypeScript type-checking flows.","severity":"breaking","affected_versions":">=14.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"On 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Remove `defaultProps` usage and pass all props explicitly or handle defaults internally.","cause":"Attempting to access `defaultProps` on `DateTimePickerModal` which has been removed.","error":"TypeError: Cannot read properties of undefined (reading 'defaultProps')"},{"fix":"Adjust the `onCancel` handler signature to not expect a `date` parameter, or handle `undefined` explicitly.","cause":"The `onCancel` callback no longer provides a `date` object, leading to type mismatches if your handler expects one.","error":"Argument of type 'Date | undefined' is not assignable to parameter of type 'Date'."},{"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.","cause":"The underlying native module `@react-native-community/datetimepicker` was not correctly linked or the app was not rebuilt after installation.","error":"Error: `RNDateTimePicker` module not found. Are you sure you've linked all the native dependencies and rebuilt your app?"}],"ecosystem":"npm"}