{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-modal-datetime-picker"],"cli":null},"imports":["import DateTimePickerModal from 'react-native-modal-datetime-picker';","import type { DateTimePickerModalProps } from 'react-native-modal-datetime-picker';","import { useDatePicker } from 'react-native-modal-datetime-picker';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}