React Native Modal Datetime Picker

Common errors

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

  cause 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'.

  cause 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?

  cause 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.

Warnings

• breaking The `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.
• breaking 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.
  Fix: Update `onCancel` handlers to remove any expectation or usage of a `date` parameter. The function should typically only handle hiding the picker.
• breaking Changes 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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-native-modal-datetime-picker npm
• yarn add react-native-modal-datetime-picker yarn
• pnpm add react-native-modal-datetime-picker pnpm

Imports

• DateTimePickerModal
  wrong:

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

  correct:

  import DateTimePickerModal from '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.

Quickstart

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;