{"_id":"@apinuninvitracehealth/react-native-buddhist-wheel-picker","name":"@apinuninvitracehealth/react-native-buddhist-wheel-picker","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@apinuninvitracehealth/react-native-buddhist-wheel-picker","version":"1.0.0","description":"React Native Wheel Picker with Buddhist Era (B.E.) date support","main":"dest/commonjs/index","module":"dest/module/index","types":"dest/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test:run":"jest","tsc:check":"tsc --noEmit --project tsconfig.build.json","lint:check":"eslint \"**/*.{js,ts,tsx}\"","lint:fix":"eslint --fix \"**/*.{js,ts,tsx}\"","build:check-all":"yarn lint:fix && yarn tsc:check && yarn test:run","build:resolve":"babel --config-file ./babel.local-namespace-config.js ./src --out-dir ./src --extensions .ts,.js,.tsx,.json --keep-file-extension","build:bob":"cp -r ./src ./copied-src && yarn run build:resolve && yarn run lint:fix && bob build","prepack":"yarn build:check-all && yarn build:bob","postpublish":"rm -r ./src && cp -r ./copied-src ./src && rm -r ./copied-src","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn install"},"keywords":["react-native","wheel","picker","date","datetime","expo","ios","android","select","field","buddhist-era","buddhist","b.e.","thai-calendar","buddhist-calendar"],"repository":{"type":"git","url":"git+https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker.git"},"author":{"name":"Apinun","email":"apinun.s@invitracehealth.com"},"license":"MIT","bugs":{"url":"https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker/issues"},"homepage":"https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"peerDependencies":{"react":">=16.8","react-native":">=0.71.6"},"dependencies":{"@rozhkov/react-useful-hooks":"^1.0.10","date-fns":"^4.1.0","dayjs":"^1.11.10"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/core":"^7.26.0","@babel/plugin-syntax-typescript":"^7.21.4","@babel/preset-react":"^7.27.1","@commitlint/config-conventional":"^17.0.2","@evilmartians/lefthook":"^1.2.2","@react-native-community/eslint-config":"^3.0.2","@react-native/babel-preset":"0.79.5","@release-it/conventional-changelog":"^5.0.0","@types/jest":"^28.1.2","@types/react":"^19.1.11","@types/react-test-renderer":"^19.1.0","babel-plugin-module-resolver":"^4.1.0","commitlint":"^17.0.2","del-cli":"^5.0.0","eslint":"^8.4.1","eslint-config-prettier":"^8.5.0","eslint-plugin-ft-flow":"^3.0.11","eslint-plugin-prettier":"^4.0.0","jest":"^28.1.1","metro-react-native-babel-preset":"^0.77.0","pod-install":"^0.1.0","prettier":"^2.0.5","react":"19.0.0","react-native":"0.79.5","react-native-builder-bob":"^0.20.0","react-test-renderer":"19.0.0","release-it":"^15.0.0","typescript":"5.6.3"},"engines":{"node":">= 16.0.0"},"packageManager":"yarn@4.5.1","commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"react-native-builder-bob":{"source":"src","output":"dest","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"_id":"@apinuninvitracehealth/react-native-buddhist-wheel-picker@1.0.0","gitHead":"81e019b18f1fb734035697888061103079ec6faa","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-0uA8iU9ByY4puNw08eSZ57hn9zs0Mgvc/NxYe12TAKIXv8yNCwiZlb24Mi2NVEenhParTFtBdQa6ChJRQcIadA==","shasum":"9c87a245c2e9959c39cc7792deb0cb41a493131d","tarball":"https://registry.npmjs.org/@apinuninvitracehealth/react-native-buddhist-wheel-picker/-/react-native-buddhist-wheel-picker-1.0.0.tgz","fileCount":314,"unpackedSize":459597,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDitHJ/67rrfXDCMFTuA8wgQ2XiUR19JtFiG0Vukn0u3wIhANsGzb0nM7F/YkP4hOfuWwVCoLdPD2HkUtQsZRWW5D1t"}]},"_npmUser":{"name":"apinuninvitracehealth","email":"apinun.s@invitracehealth.com"},"directories":{},"maintainers":[{"name":"apinuninvitracehealth","email":"apinun.s@invitracehealth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-buddhist-wheel-picker_1.0.0_1765266046701_0.9677767192694209"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-09T07:40:46.581Z","1.0.0":"2025-12-09T07:40:46.834Z","modified":"2025-12-09T07:40:47.210Z"},"maintainers":[{"name":"apinuninvitracehealth","email":"apinun.s@invitracehealth.com"}],"description":"React Native Wheel Picker with Buddhist Era (B.E.) date support","homepage":"https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker#readme","keywords":["react-native","wheel","picker","date","datetime","expo","ios","android","select","field","buddhist-era","buddhist","b.e.","thai-calendar","buddhist-calendar"],"repository":{"type":"git","url":"git+https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker.git"},"author":{"name":"Apinun","email":"apinun.s@invitracehealth.com"},"bugs":{"url":"https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker/issues"},"license":"MIT","readme":"# React Native Buddhist Wheel Picker\n\n<p>\n  <a href=\"https://github.com/Apinun-invitrace/react-native-buddhist-wheel-picker/blob/HEAD/LICENSE\">\n    <img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"React Native Buddhist Wheel Picker is released under the MIT license.\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@apinuninvitracehealth/react-native-buddhist-wheel-picker\">\n    <img src=\"https://img.shields.io/npm/v/@apinuninvitracehealth/react-native-buddhist-wheel-picker?color=brightgreen&label=npm%20package\" alt=\"Current npm package version.\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@apinuninvitracehealth/react-native-buddhist-wheel-picker\">\n    <img src=\"https://img.shields.io/npm/dw/@apinuninvitracehealth/react-native-buddhist-wheel-picker\" alt=\"Number of downloads per week.\" />\n  </a>\n</p>\n\nA flexible React Native Wheel Picker for iOS and Android without using the native side. **Forked from [@quidone/react-native-wheel-picker](https://github.com/quidone/react-native-wheel-picker) with added Buddhist Era (B.E.) date support.**\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <img src=\"./docs/images/simple-picker-ios.gif\" height=\"200\"/>\n      <br />\n      On iOS\n    </td>\n    <td align=\"center\">\n      <img src=\"./docs/images/simple-picker-android.gif\" height=\"200\"/>\n      <br />\n      On Android\n    </td>\n    <td align=\"center\">\n      <img src=\"./docs/images/customized-picker.gif\" height=\"200\"/>\n      <br />\n      Customization\n    </td>\n  </tr>\n</table>\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <img src=\"docs/images/date-picker-ios.gif\" height=\"220\"/>\n      <br />\n      DatePicker (Beta)\n    </td>\n    <td align=\"center\">\n      <img src=\"docs/images/picker-control-ios.gif\" height=\"220\"/>\n      <br />\n      PickerControl (Beta)\n    </td>\n  </tr>\n</table>\n\n## Features\n\n- Without native side.\n- Unified API.\n- Only native animations.\n- [Support native feedback](#Native-Feedback).\n- [Support virtualization](#withVirtualized).\n- Compatible with Expo.\n- Deep customization\n- Written `TypeScript`.\n- **✨ Buddhist Era (B.E.) date support** - Display years in Buddhist Era format (B.E. = A.D. + 543)\n\n## Installation\n\n```shell\nyarn add @apinuninvitracehealth/react-native-buddhist-wheel-picker\n```\n\n## Navigation\n\n- [Usage](#Usage)\n- [Native Feedback](#Native-Feedback)\n- [API](#API)\n  - [WheelPicker](#WheelPicker)\n    - [usePickerItemHeight](#usePickerItemHeight)\n    - [useScrollContentOffset](#useScrollContentOffset)\n    - [withVirtualized](#withVirtualized)\n  - [DatePicker (Beta)](#DatePicker)\n  - [Picker Control (Beta)](#Picker-Control)\n    - [usePickerControl](#usePickerControl)\n    - [withPickerControl](#withPickerControl)\n    - [useOnPickerValueChangedEffect](#useOnPickerValueChangedEffect)\n    - [useOnPickerValueChangingEffect](#useOnPickerValueChangingEffect)\n- [Footer](#-Author)\n\n## Usage\n\n### [🚀 Expo Snack example][EXPO_SNACK]\n\nIf you want to see more examples and experiment, run the examples locally.\n\n```shell\ngit clone git@github.com:Apinun-invitrace/react-native-buddhist-wheel-picker.git\ncd react-native-buddhist-wheel-picker\nyarn install\ncd example && yarn install && yarn ios\n```\n\n### WheelPicker usage\n\n```jsx\nimport React, {useState} from 'react';\nimport WheelPicker from '@apinuninvitracehealth/react-native-buddhist-wheel-picker';\n\nconst data = [...Array(100).keys()].map((index) => ({\n  value: index,\n  label: index.toString(),\n}));\n\nconst App = () => {\n  const [value, setValue] = useState(0);\n  return (\n    <WheelPicker\n      data={data}\n      value={value}\n      onValueChanged={({item: {value}}) => setValue(value)}\n      enableScrollByTapOnItem={true}\n    />\n  );\n};\n\nexport default App;\n```\n\n### DatePicker usage (Beta)\n\n> ⚠️ **Warning:** It is recommended to test the component in a release build of your application.\n> There is an issue where synchronization of scrolling may occasionally slip during scrolling\n> attempts when performance is low.\n\n#### Simple case\n\n```tsx\nimport React, {useState} from 'react';\nimport {DatePicker} from '@apinuninvitracehealth/react-native-buddhist-wheel-picker';\n\nconst App = () => {\n  const [date, setDate] = useState('2025-02-02');\n\n  return (\n    <DatePicker\n      date={date} // required format YYYY-MM-DD\n      onDateChanged={({date}) => setDate(date)}\n    />\n  );\n};\n```\n\n#### With Buddhist Era (B.E.) support\n\n```tsx\nimport React, {useState} from 'react';\nimport {DatePicker} from '@apinuninvitracehealth/react-native-buddhist-wheel-picker';\n\nconst App = () => {\n  const [date, setDate] = useState('2025-02-02');\n\n  return (\n    <DatePicker\n      date={date} // required format YYYY-MM-DD\n      onDateChanged={({date}) => setDate(date)}\n      useBuddhistEra={true} // ✨ Enable B.E. mode - years will display as B.E. (e.g., 2568)\n    />\n  );\n};\n```\n\n> **Note:** When `useBuddhistEra={true}`, the year picker displays Buddhist Era years (B.E. = A.D. + 543), but the `onDateChanged` callback still returns dates in A.D. format (YYYY-MM-DD) for compatibility.\n\n#### Customized case\n\nYou also have a lot of control over each WheelPicker and the rendering process;\nyou can add your own components between individual WheelPickers\n\n```tsx\nimport React, {useState} from 'react';\nimport {useStableCallback} from '@rozhkov/react-useful-hooks';\nimport {DatePicker} from '@apinuninvitracehealth/react-native-buddhist-wheel-picker';\n\nconst CustomizedDatePicker = () => {\n  const [date, setDate] = useState('2025-02-02');\n\n  const onDateChanged = useStableCallback(({date}: {date: string}) => {\n    setDate(date);\n  });\n\n  return (\n    <DatePicker\n      date={date}\n      onDateChanged={onDateChanged}\n      renderDate={() => <DatePicker.Date />}\n      renderMonth={() => <DatePicker.Month />}\n      renderYear={() => <DatePicker.Year />}\n    >\n      {({dateNodes}) => {\n        return dateNodes.map((x) => x.node);\n      }}\n    </DatePicker>\n  );\n};\n```\n\n### PickerControl usage (Beta)\n\n```tsx\nimport React, {useState} from 'react';\nimport WheelPicker, {\n  type PickerItem,\n  useOnPickerValueChangedEffect,\n  useOnPickerValueChangingEffect,\n  usePickerControl,\n  withPickerControl,\n} from '@apinuninvitracehealth/react-native-buddhist-wheel-picker';\nimport {View} from 'react-native';\n\nconst ControlPicker = withPickerControl(WheelPicker);\n\ntype ControlPickersMap = {\n  value1: {item: PickerItem<number>};\n  value2: {item: PickerItem<number>};\n};\n\nconst data = Array.from({length: 100}, (_, index) => ({value: index}));\n\nconst App = () => {\n  const [value, setValue] = useState({value1: 0, value2: 0});\n\n  const pickerControl = usePickerControl<ControlPickersMap>();\n\n  useOnPickerValueChangedEffect(pickerControl, (event) => {\n    setValue({\n      value1: event.pickers.value1.item.value,\n      value2: event.pickers.value2.item.value,\n    });\n  });\n\n  useOnPickerValueChangingEffect(pickerControl, (event) => {\n    // some logic\n  });\n\n  return (\n    <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>\n      <ControlPicker\n        control={pickerControl}\n        pickerName={'value1'}\n        data={data}\n        value={value.value1}\n        width={100}\n        enableScrollByTapOnItem={true}\n      />\n      <ControlPicker\n        control={pickerControl}\n        pickerName={'value2'}\n        data={data}\n        value={value.value2}\n        width={100}\n        enableScrollByTapOnItem={true}\n      />\n    </View>\n  );\n};\n```\n\n## Native Feedback\n\nYou can trigger native sound and impact with [@quidone/react-native-wheel-picker-feedback][FEEDBACK_GITHUB]\nand onValueChanging event\n\n```jsx\n// ...\nimport WheelPickerFeedback from '@quidone/react-native-wheel-picker-feedback';\n\nconst App = () => {\n  return (\n    <WheelPicker\n      onValueChanging={() => {\n        WheelPickerFeedback.triggerSoundAndImpact();\n      }}\n    />\n  );\n};\n```\n\n## API\n\n### WheelPicker\n\n#### Props\n\n- `data` [array] - items of picker\n- `value?` [any] - current value of picker item\n- `itemHeight?` [number] - height of picker item in the center.\n- `visibleItemCount?` [number] - number of displayed items: 1, 3, 5... (default = 5). For 5, the WheelPicker height is calculated incorrectly, left for backward compatibility.\n- `width?` [number | string] - width of picker.\n- `readOnly?` [boolean] - read only mode.\n- `enableScrollByTapOnItem?` [boolean] - allow scrolling by tap on an item (default = false)\n- `extraValues?` [unknown[]] - external values on which the Picker depends. Can be used as a forced trigger for scroll synchronization, even if it is active\n- `testID?` [string] - Used to locate this component in end-to-end tests.\n- `onValueChanging?` [function] - An event that is triggered when the value is changing.\n- `onValueChanged?` [function] - An event that is triggered when the value is changed (wheel is stopped and no touch).\n- `keyExtractor?` [function] - key extractor from picker item.\n- `renderItem?` [function] - render picker item content.\n- `renderItemContainer?` [function] - render picker item container (there is animated container).\n- `renderOverlay?` [function | null] - render overlay over the picker.\n- `renderList?` [function] - render list (Advanced, It is not recommended to use).\n- `style?` [object | array] - root style.\n- `itemTextStyle?` [object | array] - item text style for picker item.\n- `overlayItemStyle?` [object | array] - style for the overlay element in the center\n- `contentContainerStyle?` [object | array] - style which wraps all of the child views [original](https://reactnative.dev/docs/scrollview#contentcontainerstyle)\n- `scrollEventThrottle?` [object | array] - [original](https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios)\n\n#### usePickerItemHeight\n\nThis hook returns the item height which was passed via props.\n\n#### useScrollContentOffset\n\nThis hook returns the animated value of the ScrollView offset.\n\n#### withVirtualized\n\nThis HOC returns virtualized picker\n\n```jsx\nimport WheelPicker, {\n  withVirtualized,\n} from '@apinuninvitracehealth/react-native-buddhist-wheel-picker';\n\nconst VirtualizedWheelPicker = withVirtualized(WheelPicker);\n```\n\n#### Additional props\n\n- `initialNumToRender?` (default = `Math.ceil(visibleItemCount / 2)`) - [original](https://reactnative.dev/docs/flatlist#initialnumtorender).\n- `maxToRenderPerBatch?` (default = `Math.ceil(visibleItemCount / 2)`) - [original](https://reactnative.dev/docs/flatlist#maxtorenderperbatch).\n- `windowSize?` - [original](https://reactnative.dev/docs/flatlist#windowsize).\n- `updateCellsBatchingPeriod?` (default = 10) - [original](https://reactnative.dev/docs/flatlist#updatecellsbatchingperiod).\n\n### DatePicker\n\nA specialized picker component for selecting dates. It supports localization and deep customization.\n\n#### Props\n\n- `date` [string] - Current date in 'YYYY-MM-DD' format\n- `onDateChanged` [function] - Callback fired when date selection is confirmed\n- `minDate?` [string] - Minimum selectable date in 'YYYY-MM-DD' format\n- `maxDate?` [string] - Maximum selectable date in 'YYYY-MM-DD' format\n- `locale?` [string] - Locale for date formatting (default = 'en')\n- `useBuddhistEra?` [boolean] - Enable Buddhist Era (B.E.) year display. When `true`, years are displayed as B.E. (B.E. = A.D. + 543), but dates are still returned in A.D. format (default = `false`)\n- `renderDate?` [function] - Custom renderer for date component\n- `renderMonth?` [function] - Custom renderer for month component\n- `renderYear?` [function] - Custom renderer for year component\n- `children?` [function] - Render prop for customizing component layout\n\nDatePicker also accepts all the common wheel picker props like `itemHeight`, `visibleItemCount`, `readOnly`, etc.\n\n#### Subcomponents\n\nDatePicker exposes subcomponents that can be used for custom layouts:\n\n- `DatePicker.Date` - Day WheelPicker\n- `DatePicker.Month` - Month WheelPicker\n- `DatePicker.Year` - Year WheelPicker\n\n### Picker Control\n\nPicker Control provides a way to synchronize multiple WheelPicker components. It is used inside DatePicker.\n\nMain goals:\n\n1. Synchronize onValueChanged and onValueChanging events.\n2. Synchronize the value selection process. If a value changes, all WheelPickers should accept this value, even if they are still spinning.\n\n#### usePickerControl\n\nA hook that creates a control object for connecting multiple pickers. See [example](#PickerControl-Usage-Beta)\n\n#### withPickerControl\n\nA HOC that connects a WheelPicker to a control object. See [example](#PickerControl-Usage-Beta)\n\n##### Adding props\n\n- `control` [object] - Control object created with `usePickerControl`\n- `pickerName` [string] - Unique name for the picker within the control group\n\n#### useOnPickerValueChangedEffect\n\nCalled when the value has been changed. This occurs during the inactive state of all WheelPickers. See [example](#PickerControl-Usage-Beta)\n\n#### useOnPickerValueChangingEffect\n\nCalled when any of the connected WheelPickers changes. See [example](#PickerControl-Usage-Beta)\n\n## 👨‍💻 Author\n\n**Apinun** - [GitHub](https://github.com/Apinun-invitrace)\n\nThis package is a fork of [@quidone/react-native-wheel-picker](https://github.com/quidone/react-native-wheel-picker) by [Sergey Rozhkov](https://github.com/rozhkovs), with added Buddhist Era (B.E.) date support.\n\n## 🎯 Was it helpful?\n\nDo you like it and find it helpful? You can help this project in the following way:\n\n- ⭐ Put the star.\n- 💡 Suggest your ideas.\n- 😉 Open a founded issue.\n\n## 🤝 Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## 📄 License\n\nReact Native Buddhist Wheel Picker is MIT licensed, as found in the [LICENSE](LICENSE) file.\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","readmeFilename":"README.md","_rev":"1-ee84d8c8bb4a449bae5bbb0483b8e95d"}