{"_id":"@0610studio/expo-skia-date-wheel-picker","_rev":"2-c9f0b87fcf6b5c1fe815cd0a6cb3d0ef","name":"@0610studio/expo-skia-date-wheel-picker","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@0610studio/expo-skia-date-wheel-picker","version":"0.1.0","keywords":["react-native","expo","expo-skia-date-wheel-picker","date-wheel-picker","date-picker","skia"],"author":{"name":"righthot","email":"0610studio@naver.com"},"license":"MIT","_id":"@0610studio/expo-skia-date-wheel-picker@0.1.0","maintainers":[{"name":"suuuk3","email":"suuuk3@naver.com"}],"homepage":"https://github.com/0610studio/expo-skia-date-wheel-picker#readme","bugs":{"url":"https://github.com/0610studio/expo-skia-date-wheel-picker/issues"},"dist":{"shasum":"bee08e4fff6e5844c79e3d62c0f68946a3a0213d","tarball":"https://registry.npmjs.org/@0610studio/expo-skia-date-wheel-picker/-/expo-skia-date-wheel-picker-0.1.0.tgz","fileCount":33,"integrity":"sha512-+OwyALV35UfB4yaigNpl7PlmipeeoasfCM848nsRL2iv8ykLHUWFtV2hjSgxTOc8SzadnzzqXTii3uVM9gqo2g==","signatures":[{"sig":"MEQCIGApxNXCCn+KK9M1HJ4cn+bjz9+puitLfquLjNQzGwBCAiBmtSN1nZ4gB0UGYqhBh3vkigxypU4upo6+7pbBZBxZ0g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3005127},"main":"build/index.js","type":"commonjs","types":"build/index.d.ts","exports":{".":{"types":"./build/index.d.ts","default":"./build/index.js"}},"gitHead":"274df3dfdaadfd75d323d7ea2c1f4fccdc95a772","private":false,"scripts":{"lint":"expo-module lint","test":"expo-module test","build":"expo-module build","clean":"expo-module clean","prepare":"expo-module prepare","expo-module":"expo-module","prepublishOnly":"expo-module prepublishOnly"},"_npmUser":{"name":"suuuk3","email":"suuuk3@naver.com"},"repository":{"url":"git+https://github.com/0610studio/expo-skia-date-wheel-picker.git","type":"git"},"_npmVersion":"11.4.2","description":"Skia-powered date wheel picker for Expo and React Native","directories":{},"_nodeVersion":"24.3.0","dependencies":{},"installConfig":{"hoistingLimits":"workspaces"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"expo":"^55.0.16","jest":"^29.7.0","react":"19.1.1","eslint":"^9.24.0","prettier":"^3.0.0","@babel/core":"^7.24.0","@types/react":"~19.1.1","expo-haptics":"~15.0.7","react-native":"0.82.1","expo-module-scripts":"^55.0.2","react-test-renderer":"19.1.1","@shopify/react-native-skia":"2.2.12"},"peerDependencies":{"expo":"*","react":"*","expo-haptics":"*","react-native":"*","@shopify/react-native-skia":">=2.2.12"},"peerDependenciesMeta":{"expo":{"optional":false},"react":{"optional":false},"expo-haptics":{"optional":false},"react-native":{"optional":false},"@shopify/react-native-skia":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/expo-skia-date-wheel-picker_0.1.0_1777975448821_0.7451282830814512","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@0610studio/expo-skia-date-wheel-picker","version":"0.1.1","private":false,"description":"Skia-powered date wheel picker for Expo and React Native","type":"commonjs","main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"keywords":["react-native","expo","expo-skia-date-wheel-picker","date-wheel-picker","date-picker","skia"],"exports":{".":{"types":"./build/index.d.ts","default":"./build/index.js"}},"repository":{"type":"git","url":"git+https://github.com/0610studio/expo-skia-date-wheel-picker.git"},"bugs":{"url":"https://github.com/0610studio/expo-skia-date-wheel-picker/issues"},"author":{"name":"righthot","email":"0610studio@naver.com"},"license":"MIT","homepage":"https://github.com/0610studio/expo-skia-date-wheel-picker#readme","publishConfig":{"access":"public"},"dependencies":{},"devDependencies":{"@babel/core":"^7.24.0","@shopify/react-native-skia":"2.2.12","@types/react":"~19.1.1","eslint":"^9.24.0","expo":"^55.0.16","expo-haptics":"~15.0.7","expo-module-scripts":"^55.0.2","jest":"^29.7.0","prettier":"^3.0.0","react":"19.1.1","react-native":"0.82.1","react-test-renderer":"19.1.1"},"peerDependencies":{"@shopify/react-native-skia":">=2.2.12","expo":"*","expo-haptics":"*","react":"*","react-native":"*"},"peerDependenciesMeta":{"@shopify/react-native-skia":{"optional":false},"expo":{"optional":false},"expo-haptics":{"optional":false},"react":{"optional":false},"react-native":{"optional":false}},"installConfig":{"hoistingLimits":"workspaces"},"gitHead":"3390d25e34ef3a8389e4061414fc3dc47f997b0c","_id":"@0610studio/expo-skia-date-wheel-picker@0.1.1","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-zr6J4uoGiftp0ppJZLGl20f8QG5q+fE+YRsNAf2n4YXCOANldeHbjyo10i+vrEzcljAmTmne0JNgiC4Ht8+nFg==","shasum":"e582e83d9f5010e64c193e73b76505d8b08dd5cc","tarball":"https://registry.npmjs.org/@0610studio/expo-skia-date-wheel-picker/-/expo-skia-date-wheel-picker-0.1.1.tgz","fileCount":33,"unpackedSize":3005127,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@0610studio%2fexpo-skia-date-wheel-picker@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHDlsn2L1RmICW+Idg6dluEY1+sP1JGv/TcNNJhRFa/7AiEAtWjbSs3CitLPXAz22YTZsq1WyEnsCF3etR+FLc1St4A="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:198449d3-8da6-469c-813a-956416db61d3"}},"directories":{},"maintainers":[{"name":"suuuk3","email":"suuuk3@naver.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/expo-skia-date-wheel-picker_0.1.1_1777975911289_0.429240013269063"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-05T10:04:08.693Z","modified":"2026-05-05T10:11:51.840Z","0.1.0":"2026-05-05T10:04:09.080Z","0.1.1":"2026-05-05T10:11:51.548Z"},"bugs":{"url":"https://github.com/0610studio/expo-skia-date-wheel-picker/issues"},"author":{"name":"righthot","email":"0610studio@naver.com"},"license":"MIT","homepage":"https://github.com/0610studio/expo-skia-date-wheel-picker#readme","keywords":["react-native","expo","expo-skia-date-wheel-picker","date-wheel-picker","date-picker","skia"],"repository":{"type":"git","url":"git+https://github.com/0610studio/expo-skia-date-wheel-picker.git"},"description":"Skia-powered date wheel picker for Expo and React Native","maintainers":[{"name":"suuuk3","email":"suuuk3@naver.com"}],"readme":"# expo-skia-date-wheel-picker\n\nResponsive date and time wheel picker for Expo and React Native, with Skia-rendered overlays and immediate `onDateChange` updates while the wheel moves.\n\nThis package keeps the API small and predictable:\n\n- controlled with a single `date: Date` value\n- supports both `date` and `time` modes\n- clamps invalid values with `minimumDate` / `maximumDate`\n- snaps minutes with `minuteInterval`\n- adapts to locale and 12/24-hour rules\n- supports timezone-offset editing\n- exposes live wheel state through callbacks\n\n## Preview\n\n<table>\n  <tr>\n    <td align=\"center\" valign=\"top\" width=\"50%\">\n      <img src=\"./docs/v1.gif\" alt=\"Live callback demo\" />\n      <br />\n      <strong>Live callbacks while scrolling</strong>\n      <br />\n      Shows <code>onDateChange</code> updating immediately while the wheel moves, together with <code>onStateChange</code> feedback.\n    </td>\n    <td align=\"center\" valign=\"top\" width=\"50%\">\n      <img src=\"./docs/v2.gif\" alt=\"Styling demo\" />\n      <br />\n      <strong>Styling and layout customization</strong>\n      <br />\n      Shows custom colors, typography, row height, and visible row count in a dark themed configuration.\n    </td>\n  </tr>\n</table>\n\n## Why this picker\n\n`expo-skia-date-wheel-picker` is built for cases where a wheel picker should feel responsive and easy to style without introducing a large API surface.\n\n- **Immediate updates while scrolling** — `onDateChange` fires as the centered row changes, not only after the wheel becomes idle.\n- **Skia-enhanced visuals** — Skia draws the fade overlays and center guide lines, which keeps the wheel presentation polished and customizable.\n- **Native snapped wheel interaction** — each column uses snapped scrolling with row-based selection.\n- **Simple controlled model** — no separate `value` / `defaultValue` split; the picker is driven by `date` and `onDateChange`.\n\n> Note: Skia is used for the wheel overlay and guide rendering. The selectable rows themselves are rendered with React Native views and text.\n\n## Features\n\n- Date mode: `year / month / day`\n- Time mode: `hour / minute`, plus `AM/PM` when 12-hour time is active\n- Live `onDateChange` callback during interaction\n- `onStateChange` callback with `'spinning' | 'idle'`\n- `minimumDate` / `maximumDate` clamping\n- `minuteInterval` support for stepped time selection\n- Locale-aware labels and 12/24-hour behavior\n- `timeZoneOffsetInMinutes` for editing in another timezone\n- Styling props for colors, typography, row height, and visible rows\n\n## Installation\n\nInstall the published package and required peer dependencies:\n\n```bash\nnpm install @0610studio/expo-skia-date-wheel-picker\nnpx expo install @shopify/react-native-skia expo-haptics\n```\n\nIf you are not using Expo CLI for dependency resolution, make sure `@shopify/react-native-skia` matches your Expo SDK or React Native setup.\n\n## Basic usage\n\n```tsx\nimport { useState } from 'react';\nimport DateWheelPicker from '@0610studio/expo-skia-date-wheel-picker';\n\nexport default function Example() {\n  const [date, setDate] = useState(new Date('2026-04-22T13:30:00'));\n\n  return (\n    <DateWheelPicker\n      date={date}\n      mode=\"date\"\n      onDateChange={setDate}\n    />\n  );\n}\n```\n\nYou can also import the named export:\n\n```tsx\nimport { DateWheelPicker } from '@0610studio/expo-skia-date-wheel-picker';\n```\n\nThe package root also exports its public types, including `DatePickerProps`, `PickerMode`, `DatePartKey`, `TimePartKey`, `PickerOption`, `PickerColumn`, `WheelColumnProps`, and `HexColor`.\n\n## Common recipes\n\n### Time picker with stepped minutes\n\n```tsx\nimport { useState } from 'react';\nimport DateWheelPicker from '@0610studio/expo-skia-date-wheel-picker';\n\nexport default function TimeExample() {\n  const [date, setDate] = useState(new Date('2026-04-22T13:37:00'));\n\n  return (\n    <DateWheelPicker\n      date={date}\n      mode=\"time\"\n      minuteInterval={5}\n      onDateChange={setDate}\n    />\n  );\n}\n```\n\n### Bounded date selection\n\n```tsx\nimport { useState } from 'react';\nimport DateWheelPicker from '@0610studio/expo-skia-date-wheel-picker';\n\nconst minimumDate = new Date('2026-04-10T00:00:00');\nconst maximumDate = new Date('2026-05-05T23:59:00');\n\nexport default function RangeExample() {\n  const [date, setDate] = useState(new Date('2026-04-22T13:30:00'));\n\n  return (\n    <DateWheelPicker\n      date={date}\n      mode=\"date\"\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onDateChange={setDate}\n    />\n  );\n}\n```\n\n### Locale and timezone configuration\n\n```tsx\nimport { useState } from 'react';\nimport DateWheelPicker from '@0610studio/expo-skia-date-wheel-picker';\n\nexport default function LocaleExample() {\n  const [date, setDate] = useState(new Date('2026-04-22T13:30:00Z'));\n\n  return (\n    <DateWheelPicker\n      date={date}\n      mode=\"time\"\n      locale=\"ko-KR\"\n      timeZoneOffsetInMinutes={540}\n      onDateChange={setDate}\n    />\n  );\n}\n```\n\n### Live callback handling\n\n```tsx\nimport { useState } from 'react';\nimport DateWheelPicker from '@0610studio/expo-skia-date-wheel-picker';\n\nexport default function CallbackExample() {\n  const [date, setDate] = useState(new Date('2026-04-22T13:30:00'));\n  const [state, setState] = useState<'spinning' | 'idle'>('idle');\n\n  return (\n    <DateWheelPicker\n      date={date}\n      mode=\"time\"\n      minuteInterval={10}\n      onDateChange={setDate}\n      onStateChange={setState}\n    />\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `date` | `Date` | Controlled selected value. |\n| `mode` | `'date' \\| 'time'` | Picker mode. Defaults to `'date'`. |\n| `onDateChange` | `(date: Date) => void` | Called when the selection changes. Fires while scrolling as the centered row changes. |\n| `minimumDate` | `Date` | Lower bound for selectable values. |\n| `maximumDate` | `Date` | Upper bound for selectable values. |\n| `minuteInterval` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 10 \\| 12 \\| 15 \\| 20 \\| 30` | Minute step used in time mode. |\n| `locale` | `string` | Locale used for labels and hour-cycle formatting. |\n| `is24hourSource` | `'locale' \\| 'device'` | Whether 12/24-hour behavior follows the locale or device setting. Defaults to `'locale'`. |\n| `timeZoneOffsetInMinutes` | `number` | Edits the value using a specific timezone offset. |\n| `onStateChange` | `('spinning' \\| 'idle') => void` | Reports wheel interaction state. |\n| `backgroundColor` | `` `#${string}` `` | Wheel background color. Also affects the Skia fade overlays. |\n| `activeFontColor` | `` `#${string}` `` | Active row text color and center guide tint. |\n| `disableFontColor` | `string` | Inactive row text color. |\n| `allowFontScaling` | `boolean` | Enables React Native text scaling. Defaults to `false`. |\n| `fontSize` | `number` | Text size for wheel rows. Defaults to `22`. |\n| `fontFamily` | `string` | Optional font family for wheel rows. |\n| `rowHeight` | `number` | Height of each wheel row. Defaults to `40`. |\n| `visibleRows` | `number` | Number of visible rows. Even values are normalized to an odd count. Defaults to `5`. |\n\n## Behavioral notes\n\n- The picker is **controlled**. Pass a `date` and update it from `onDateChange`.\n- `onDateChange` is designed for live synchronization, so form state can update immediately while the wheel moves.\n- `minimumDate` and `maximumDate` clamp both the incoming value and the available wheel options.\n- `minuteInterval` rounds to the nearest valid minute step.\n- In time mode, the period column only appears when the current hour-cycle configuration uses 12-hour time.\n- `timeZoneOffsetInMinutes` changes the editable clock representation without changing the overall API shape.\n- `visibleRows` is normalized so the active row stays centered.\n- `rowHeight <= 0` falls back to the internal default.\n\n## Example app\n\nThis repository includes an Expo example app in [`example/`](./example). It uses **expo-router**, so each scenario has its own route.\n\nThe example app intentionally aliases the local source as `expo-skia-date-wheel-picker` for repo development. When you install from npm in a real app, import from `@0610studio/expo-skia-date-wheel-picker` as shown above.\n\n### Included example pages\n\n- `/` — overview and route index\n- `/date` — minimal controlled date mode\n- `/time` — time mode with `minuteInterval`\n- `/limits` — `minimumDate` / `maximumDate`\n- `/locale-timezone` — locale-aware formatting and timezone offset handling\n- `/styling` — colors, row height, visible rows, and typography\n- `/callbacks` — live `onDateChange` updates and `onStateChange`\n\n### Run the example app\n\n```bash\ncd example\nnpm install\nnpm run start\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}