{"_id":"@anasyd/react-native-modern-date-picker","_rev":"4-9f104220e7cf6e7aba22d37c89d91288","name":"@anasyd/react-native-modern-date-picker","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"@anasyd/react-native-modern-date-picker","version":"1.0.0","keywords":["react-native","date-picker","calendar","bottom-sheet","blur","ios","android"],"author":{"name":"Anas Syed","email":"me@anasyd.com"},"license":"MIT","_id":"@anasyd/react-native-modern-date-picker@1.0.0","maintainers":[{"name":"anasyd","email":"anasyd2002@gmail.com"}],"homepage":"https://github.com/anasyd/react-native-modern-date-picker/tree/main/packages/bare#readme","bugs":{"url":"https://github.com/anasyd/react-native-modern-date-picker/issues"},"dist":{"shasum":"3704394ff9d82151dc3d1a458d105cbace1fafa0","tarball":"https://registry.npmjs.org/@anasyd/react-native-modern-date-picker/-/react-native-modern-date-picker-1.0.0.tgz","fileCount":10,"integrity":"sha512-KKgikplkvQx82OHrMuI/vslPbKK7JjumJvDuMs02tnGHob+oNYmIM/7/zBxgHeVhQVnNz8BbD6bBlxqoFD59KA==","signatures":[{"sig":"MEYCIQDSuCbAyd8uBZtPC9KRfPbAzrg+3w+2U8LIQR/veN/yoQIhAMRDuqG7BvBzGCCH2n+uYz+BFKxD+QvPFwkbjtJ2dDej","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56581},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"158b31b0efc0c1dc10d959cc8705850c95b28c68","scripts":{"build":"tsc -p tsconfig.json","prepack":"npm run build","dev:types":"tsc -w -p tsconfig.json","postinstall":"node ./scripts/postinstall.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"anasyd","email":"anasyd2002@gmail.com"},"repository":{"url":"git+https://github.com/anasyd/react-native-modern-date-picker.git","type":"git","directory":"packages/bare"},"_npmVersion":"10.9.3","description":"A modern, customizable date picker for bare React Native (uses @react-native-community/blur)","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^19.1.13","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=19.0.0","react-native":">=0.81.0","@react-native-community/blur":">=4.5.0"},"peerDependenciesMeta":{"@react-native-community/blur":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-native-modern-date-picker_1.0.0_1758127904681_0.39736854456151516","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@anasyd/react-native-modern-date-picker","version":"1.1.0","keywords":["react-native","date-picker","calendar","bottom-sheet","blur","ios","android"],"author":{"name":"Anas Syed","email":"me@anasyd.com"},"license":"MIT","_id":"@anasyd/react-native-modern-date-picker@1.1.0","maintainers":[{"name":"anasyd","email":"anasyd2002@gmail.com"}],"homepage":"https://github.com/anasyd/react-native-modern-date-picker#readme","bugs":{"url":"https://github.com/anasyd/react-native-modern-date-picker/issues"},"dist":{"shasum":"b70f3f5a1da17cf296e397cc5d2cc862817b4e92","tarball":"https://registry.npmjs.org/@anasyd/react-native-modern-date-picker/-/react-native-modern-date-picker-1.1.0.tgz","fileCount":5,"integrity":"sha512-tGC9A/HfYpNizvPcaUxrO6QRPe3cN15R9bBPuG6KCuF3+AuSGVsPwcmDeXPtaiyAqxN7SlIqMwYFcK9ymyBsDw==","signatures":[{"sig":"MEUCIQCTHaRgxCi31jrMYfEk21+LXFvhEIK8le2kLIQiAbdX3wIgXTk8JR9/rs0R5uL3771Xo2MR7gESTJ44ZMBb/BMwEJ0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70166},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"158b31b0efc0c1dc10d959cc8705850c95b28c68","scripts":{"build":"tsc -p tsconfig.json","prepack":"npm run build","dev:types":"tsc -w -p tsconfig.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"anasyd","email":"anasyd2002@gmail.com"},"repository":{"url":"git+https://github.com/anasyd/react-native-modern-date-picker.git","type":"git","directory":"package"},"_npmVersion":"10.9.3","description":"A modern, customizable date picker for React Native & Expo (optional blur via expo-blur or @react-native-community/blur)","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^19.1.13","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=19.0.0","react-native":">=0.81.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-modern-date-picker_1.1.0_1758159013681_0.8657680064810838","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@anasyd/react-native-modern-date-picker","version":"1.1.1","keywords":["react-native","date-picker","calendar","bottom-sheet","blur","ios","android"],"author":{"name":"Anas Syed","email":"me@anasyd.com"},"license":"MIT","_id":"@anasyd/react-native-modern-date-picker@1.1.1","maintainers":[{"name":"anasyd","email":"anasyd2002@gmail.com"}],"homepage":"https://github.com/anasyd/react-native-modern-date-picker#readme","bugs":{"url":"https://github.com/anasyd/react-native-modern-date-picker/issues"},"dist":{"shasum":"a61c6e798587632818a5a86e2932c68a500c6ce4","tarball":"https://registry.npmjs.org/@anasyd/react-native-modern-date-picker/-/react-native-modern-date-picker-1.1.1.tgz","fileCount":5,"integrity":"sha512-4bzVcD2ff1AMFY6byqjjA6oNBbhTKRh+afFvYd+YKbvjpJZ1CLBj8pRWbvAijYk74kogYkhnNZS+WPZ6HY8+EQ==","signatures":[{"sig":"MEUCIQDYtURXW8WKNVFOBoY8pULtZiQ5h8db1iklHxdrtXjknwIgScrGBIOxyOcEKTGhnAeOwTVofAoAtibf1rVLwnzjffM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84396},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"5c1d5bbb5d2a84e3c78af36d838ce04a98e5c6dc","scripts":{"build":"tsc -p tsconfig.json","prepack":"npm run build","dev:types":"tsc -w -p tsconfig.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"anasyd","email":"anasyd2002@gmail.com"},"repository":{"url":"git+https://github.com/anasyd/react-native-modern-date-picker.git","type":"git","directory":"package"},"_npmVersion":"10.9.3","description":"A modern, customizable date picker for React Native & Expo (optional blur via expo-blur or @react-native-community/blur)","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^19.1.13","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=19.0.0","react-native":">=0.81.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-modern-date-picker_1.1.1_1758220229086_0.16422170120047497","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@anasyd/react-native-modern-date-picker","version":"1.2.1","description":"A modern, customizable date picker for React Native & Expo with haptic feedback support (optional blur via expo-blur or @react-native-community/blur)","repository":{"type":"git","url":"git+https://github.com/anasyd/react-native-modern-date-picker.git","directory":"package"},"author":{"name":"Anas Syed","email":"me@anasyd.com"},"license":"MIT","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","dev:types":"tsc -w -p tsconfig.json","prepack":"npm run build","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.65.0"},"devDependencies":{"@types/react":"^19.1.13","@types/react-native":"^0.73.0","typescript":"^5.9.2"},"homepage":"https://github.com/anasyd/react-native-modern-date-picker#readme","bugs":{"url":"https://github.com/anasyd/react-native-modern-date-picker/issues"},"keywords":["react-native","date-picker","calendar","time-picker","datetime-picker","haptic-feedback","bottom-sheet","blur","ios","android"],"publishConfig":{"access":"public"},"sideEffects":false,"_id":"@anasyd/react-native-modern-date-picker@1.2.1","gitHead":"295b2826e6c022d445f2fbe651aa158929f9f8d5","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-LhuCX0M1rDsvFRgSRRCKiHEXeRAxXmyqG9yp2KW9sMRmM420mof6LzDqCvTDe64apjM4tWoO3IEFrZAGJz5NDQ==","shasum":"0ce83af53f6c1f50e2db58a5fc5d21160a8fdab0","tarball":"https://registry.npmjs.org/@anasyd/react-native-modern-date-picker/-/react-native-modern-date-picker-1.2.1.tgz","fileCount":5,"unpackedSize":120084,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFa1l1vkxVWEG108X96nKMe2wNOHgtTuSpsjZ1AEVwYGAiACqEam1FQFTVH4p4N17N3gRfR55JF0mbX724AqzgVfUA=="}]},"_npmUser":{"name":"anasyd","email":"anasyd2002@gmail.com"},"directories":{},"maintainers":[{"name":"anasyd","email":"anasyd2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-modern-date-picker_1.2.1_1759250670995_0.2771466274260077"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-17T16:51:44.594Z","modified":"2025-09-30T16:44:31.356Z","1.0.0":"2025-09-17T16:51:44.895Z","1.1.0":"2025-09-18T01:30:13.910Z","1.1.1":"2025-09-18T18:30:29.260Z","1.2.1":"2025-09-30T16:44:31.171Z"},"bugs":{"url":"https://github.com/anasyd/react-native-modern-date-picker/issues"},"author":{"name":"Anas Syed","email":"me@anasyd.com"},"license":"MIT","homepage":"https://github.com/anasyd/react-native-modern-date-picker#readme","keywords":["react-native","date-picker","calendar","time-picker","datetime-picker","haptic-feedback","bottom-sheet","blur","ios","android"],"repository":{"type":"git","url":"git+https://github.com/anasyd/react-native-modern-date-picker.git","directory":"package"},"description":"A modern, customizable date picker for React Native & Expo with haptic feedback support (optional blur via expo-blur or @react-native-community/blur)","maintainers":[{"name":"anasyd","email":"anasyd2002@gmail.com"}],"readme":"# @anasyd/react-native-modern-date-picker\r\n\r\nModern, fully-featured date and time picker for React Native & Expo with scroll-wheel time selection, age restrictions, time ranges, and custom theming.\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @anasyd/react-native-modern-date-picker\r\n```\r\n\r\nOptional blur libs if you want a blur backdrop:\r\n\r\n```sh\r\n# Expo\r\nnpm install expo-blur\r\n\r\n# Bare RN\r\nnpm install @react-native-community/blur\r\n```\r\n\r\n## Changelog\r\n\r\nSee [CHANGELOG.md](./CHANGELOG.md) for release notes.\r\n\r\n---\r\n\r\n## Quick Start\r\n\r\n```tsx\r\nimport ModernDatePicker from \"@anasyd/react-native-modern-date-picker\";\r\n\r\n<ModernDatePicker\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n/>;\r\n```\r\n\r\n---\r\n\r\n## Features\r\n\r\n- 📅 **Date Picker** - Month view calendar with year/month selection\r\n- ⏰ **Time Picker** - iOS-style scroll wheels for hours, minutes, and AM/PM\r\n- 🔀 **Multiple Modes** - Date, time, or datetime combined\r\n- 👤 **Age Restrictions** - `minAge` and `maxAge` props (e.g., 18+ only)\r\n- ⏱️ **Time Ranges** - `minTime` and `maxTime` for business hours, etc.\r\n- 📱 **Haptic Feedback** - Smart haptic feedback on iOS/Android\r\n- 🎨 **Full Theming** - Semantic color tokens, palette system, dark/light presets\r\n- 🌍 **Internationalization** - Locale support for dates and first day of week\r\n- 🧪 **TypeScript** - Full type safety\r\n- ⚡ **Lightweight** - No heavy dependencies\r\n\r\n---\r\n\r\n## Picker Modes\r\n\r\n### Date Mode\r\n\r\nTraditional calendar picker for selecting dates.\r\n\r\n```tsx\r\n<ModernDatePicker\r\n  mode=\"date\"\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n  minDate={new Date(2020, 0, 1)}\r\n  maxDate={new Date()}\r\n/>\r\n```\r\n\r\n### Time Mode\r\n\r\nScrollable time picker with hour/minute wheels. Supports 12/24 hour formats.\r\n\r\n```tsx\r\n<ModernDatePicker\r\n  mode=\"time\"\r\n  is24Hour={false}\r\n  minuteInterval={15}\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n  minTime={{ hour: 9, minute: 0 }}  // 9:00 AM\r\n  maxTime={{ hour: 17, minute: 0 }} // 5:00 PM\r\n/>\r\n```\r\n\r\n### DateTime Mode\r\n\r\nCombined date and time selection. Pick date first, then switch to time.\r\n\r\n```tsx\r\n<ModernDatePicker\r\n  mode=\"datetime\"\r\n  is24Hour={false}\r\n  minuteInterval={15}\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n/>\r\n```\r\n\r\n---\r\n\r\n## Date & Time Constraints\r\n\r\n### Age Restrictions\r\n\r\nUse `minAge` and `maxAge` to restrict birth date selection:\r\n\r\n```tsx\r\n// Only allow ages 18-65\r\n<ModernDatePicker\r\n  mode=\"date\"\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n  minAge={18}  // Must be at least 18 years old\r\n  maxAge={65}  // Cannot be older than 65\r\n/>\r\n```\r\n\r\n### Date Range\r\n\r\nUse `minDate` and `maxDate` for custom date ranges:\r\n\r\n```tsx\r\n<ModernDatePicker\r\n  mode=\"date\"\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n  minDate={new Date(2020, 0, 1)}\r\n  maxDate={new Date()}  // Today\r\n/>\r\n```\r\n\r\n### Time Range\r\n\r\nUse `minTime` and `maxTime` to restrict time selection (e.g., business hours):\r\n\r\n```tsx\r\n<ModernDatePicker\r\n  mode=\"time\"\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n  minTime={{ hour: 9, minute: 0 }}   // 9:00 AM\r\n  maxTime={{ hour: 17, minute: 30 }} // 5:30 PM\r\n/>\r\n```\r\n\r\nInvalid times are visually disabled (crossed out with low opacity) and cannot be selected.\r\n\r\n---\r\n\r\n## Theming\r\n\r\nYou can theme in **two ways**:\r\n\r\n### A) App-wide (recommended): `ThemeProvider` + `createTheme`\r\n\r\n```tsx\r\nimport {\r\n  ThemeProvider,\r\n  createTheme,\r\n} from \"@anasyd/react-native-modern-date-picker\";\r\n\r\nconst theme = createTheme({\r\n  preset: \"light\", // \"light\" | \"dark\"\r\n  palette: {\r\n    primary: \"#ffffff\",   // surfaces/background\r\n    secondary: \"#000000\", // text/icons\r\n    accent: \"#2563eb\",    // selection highlight\r\n  },\r\n  // optional fine tuning:\r\n  // overrides: { colors: { divider: \"#eaeaea\" }, radii: { md: 14 } }\r\n});\r\n\r\n<ThemeProvider value={theme}>\r\n  <ModernDatePicker\r\n    open={open}\r\n    onClose={() => setOpen(false)}\r\n    value={value}\r\n    onChange={setValue}\r\n  />\r\n</ThemeProvider>;\r\n```\r\n\r\n### B) One-off: pass a theme **input** on the component\r\n\r\nUseful for quick demos or if you don't want a provider.\r\n\r\n```tsx\r\n<ModernDatePicker\r\n  open={open}\r\n  onClose={() => setOpen(false)}\r\n  value={value}\r\n  onChange={setValue}\r\n  theme={{\r\n    preset: \"dark\",\r\n    palette: {\r\n      primary: \"#1f2937\",\r\n      secondary: \"#ffffff\",\r\n      accent: \"#f59e0b\",\r\n    },\r\n  }}\r\n/>\r\n```\r\n\r\n### Palette to Semantic Token Mapping\r\n\r\nWhen you define a theme with `createTheme({ preset, palette })`, the palette colors map to semantic tokens:\r\n\r\n| Palette Property | Maps To Semantic Token | Purpose                              |\r\n| ---------------- | ---------------------- | ------------------------------------ |\r\n| `primary`        | `background`, `surface`, `header` | Surfaces and backgrounds  |\r\n| `secondary`      | `foreground`, `mutedForeground` | Text and icon colors         |\r\n| `accent`         | `accent`, `onAccent`   | Selection highlights and their text  |\r\n\r\n### Semantic color tokens\r\n\r\n| Token                | Purpose                        |\r\n| -------------------- | ------------------------------ |\r\n| `background`         | Main sheet background          |\r\n| `surface`            | Calendar body surface          |\r\n| `header`             | Header surface                 |\r\n| `foreground`         | Primary text color on surfaces |\r\n| `mutedForeground`    | Subdued text                   |\r\n| `border`             | Border color                   |\r\n| `divider`            | Hairline dividers              |\r\n| `accent`             | Selection chip background      |\r\n| `onAccent`           | Text on top of `accent`        |\r\n| `disabledForeground` | Disabled text                  |\r\n\r\n`createTheme({ preset, palette, overrides })` computes these tokens for you and **auto-contrasts** text (WCAG-ish 4.5) to avoid unreadable combos.\r\n\r\n---\r\n\r\n## Backdrop\r\n\r\n### Custom Blur Backdrop (Expo)\r\n\r\n```tsx\r\nimport { BlurView } from \"expo-blur\";\r\nimport { Animated, StyleSheet, Platform } from \"react-native\";\r\n\r\n<ModernDatePicker\r\n  open={open}\r\n  onClose={onClose}\r\n  renderBackdrop={(opacity) => (\r\n    <Animated.View style={[StyleSheet.absoluteFill, { opacity }]}>\r\n      <BlurView\r\n        intensity={12}\r\n        tint=\"dark\"\r\n        experimentalBlurMethod={\r\n          Platform.OS === \"android\" ? \"dimezisBlurView\" : undefined\r\n        }\r\n        style={StyleSheet.absoluteFill}\r\n      />\r\n    </Animated.View>\r\n  )}\r\n/>;\r\n```\r\n\r\n### Custom Blur Backdrop (Bare RN)\r\n\r\n```tsx\r\nimport { BlurView } from \"@react-native-community/blur\";\r\nimport { Animated, StyleSheet } from \"react-native\";\r\n\r\n<ModernDatePicker\r\n  open={open}\r\n  onClose={onClose}\r\n  renderBackdrop={(opacity) => (\r\n    <Animated.View style={[StyleSheet.absoluteFill, { opacity }]}>\r\n      <BlurView\r\n        blurType=\"dark\"\r\n        blurAmount={12}\r\n        style={StyleSheet.absoluteFill}\r\n      />\r\n    </Animated.View>\r\n  )}\r\n/>;\r\n```\r\n\r\n### Backdrop Props\r\n\r\n- `renderBackdrop(opacity)` – custom backdrop node.\r\n- `showDefaultBackdrop` (default `true`) – toggle built-in dim.\r\n- `backdropColor` (default `#000`) – dim overlay color.\r\n\r\n---\r\n\r\n## Props\r\n\r\n| Prop                  | Type                                           | Default  | Description                                                   |\r\n| --------------------- | ---------------------------------------------- | -------- | ------------------------------------------------------------- |\r\n| `open`                | `boolean`                                      | —        | Show/hide the picker.                                         |\r\n| `onClose`             | `() => void`                                   | —        | Called when the picker requests to close.                     |\r\n| `value`               | `Date \\| null`                                 | —        | Selected date (controlled).                                   |\r\n| `defaultValue`        | `Date`                                         | —        | Default date (uncontrolled).                                  |\r\n| `onChange`            | `(date: Date) => void`                         | —        | Fired on selection.                                           |\r\n| **Date Constraints**  |                                                |          |                                                               |\r\n| `minDate`             | `Date`                                         | —        | Minimum selectable date.                                      |\r\n| `maxDate`             | `Date`                                         | —        | Maximum selectable date.                                      |\r\n| `minAge`              | `number`                                       | —        | Minimum age in years (e.g., `18` for adults only).            |\r\n| `maxAge`              | `number`                                       | —        | Maximum age in years (e.g., `65`).                            |\r\n| **Time Constraints**  |                                                |          |                                                               |\r\n| `minTime`             | `{ hour: number; minute: number }`             | —        | Minimum time (e.g., `{ hour: 9, minute: 0 }` for 9:00 AM).   |\r\n| `maxTime`             | `{ hour: number; minute: number }`             | —        | Maximum time (e.g., `{ hour: 17, minute: 0 }` for 5:00 PM).  |\r\n| **Picker Mode**       |                                                |          |                                                               |\r\n| `mode`                | `'date' \\| 'time' \\| 'datetime'`               | `'date'` | Picker mode: date only, time only, or both.                   |\r\n| `is24Hour`            | `boolean`                                      | `true`   | Use 24-hour format for time picker.                           |\r\n| `minuteInterval`      | `1\\|2\\|3\\|4\\|5\\|6\\|10\\|12\\|15\\|20\\|30`         | `1`      | Minute interval for time picker.                              |\r\n| **Theming**           |                                                |          |                                                               |\r\n| `theme`               | `Theme \\| CreateThemeInput`                    | —        | Provide a full theme or palette input. Uses provider/default. |\r\n| **Localization**      |                                                |          |                                                               |\r\n| `locale`              | `string`                                       | platform | Locale (e.g., `\"en-US\"`).                                     |\r\n| `firstDayOfWeek`      | `0…6`                                          | `0`      | 0=Sun, 1=Mon, …                                               |\r\n| **Other**             |                                                |          |                                                               |\r\n| `testID`              | `string`                                       | —        | Test identifier.                                              |\r\n| `style`               | `StyleProp<ViewStyle>`                         | —        | Container style.                                              |\r\n| `animationSpeed`      | `number`                                       | `220`    | Show/hide animation speed (ms).                               |\r\n| `renderBackdrop`      | `(opacity: Animated.Value) => React.ReactNode` | —        | Custom backdrop.                                              |\r\n| `showDefaultBackdrop` | `boolean`                                      | `true`   | Show built-in dim overlay.                                    |\r\n| `backdropColor`       | `string`                                       | `#000`   | Color for built-in dim overlay.                               |\r\n\r\n---\r\n\r\n## Haptic Feedback\r\n\r\nThe picker automatically provides haptic feedback on:\r\n\r\n- Year scroll interactions (medium intensity)\r\n- Time picker scroll selections (light intensity)\r\n- AM/PM scroll changes (light intensity)\r\n\r\n### Platform Support\r\n\r\n**iOS**:\r\n- Uses Expo Haptics if available with proper intensity levels\r\n- Falls back to native iOS HapticFeedback\r\n- Last resort: Minimal vibration (5ms)\r\n\r\n**Android**:\r\n- Uses `react-native-haptic-feedback` if available for native haptic effects\r\n- Falls back to native Android haptic feedback\r\n- Last resort: Minimal vibration (3ms)\r\n\r\n### Optional Enhanced Haptics\r\n\r\nFor the best haptic experience, you can optionally install:\r\n\r\n```bash\r\nnpm install react-native-haptic-feedback\r\n# For React Native 0.60+, run:\r\ncd ios && pod install\r\n```\r\n\r\nThis provides native haptic effects like `impactLight`, `impactMedium`, and `impactHeavy` on both platforms.\r\n\r\n**Key Features:**\r\n\r\n- ✅ **Smart triggering**: Only on actual value changes, not every scroll event\r\n- ✅ **Proper haptics**: Uses native haptic APIs, not loud vibration\r\n- ✅ **Graceful fallbacks**: Works on all devices with appropriate intensity\r\n- ✅ **No spam**: Prevents excessive haptic feedback during scrolling\r\n\r\n---\r\n\r\n## Exports\r\n\r\n```ts\r\nimport ModernDatePicker, {\r\n  createTheme,\r\n  extendTheme,\r\n  ThemeProvider,\r\n  useTheme,\r\n} from \"@anasyd/react-native-modern-date-picker\";\r\n```\r\n\r\n- `createTheme(input)` → builds a WCAG-safe theme from `preset` + `palette` (+ optional `overrides`).\r\n- `extendTheme(base, overrides)` → convenient theme layering (e.g., tweak accent for a section).\r\n- `ThemeProvider` / `useTheme()` → share theme via context (global or nested).\r\n- `ModernDatePicker` → the component.\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT","readmeFilename":"README.md"}