{"id":30805435,"url":"https://github.com/simformsolutionspvtltd/react-native-infinite-wheel-picker","last_synced_at":"2026-02-27T02:03:14.300Z","repository":{"id":251731753,"uuid":"791706344","full_name":"SimformSolutionsPvtLtd/react-native-infinite-wheel-picker","owner":"SimformSolutionsPvtLtd","description":"Customizable wheel picker component for React Native, enabling infinite scrolling and intuitive item selection ✨","archived":false,"fork":false,"pushed_at":"2024-11-19T10:41:39.000Z","size":4829,"stargazers_count":41,"open_issues_count":7,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-06T00:57:30.857Z","etag":null,"topics":["component","infinite-scroll","library","react-native","selection","typescript","wheelpicker"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-25T08:03:49.000Z","updated_at":"2025-09-01T20:46:23.000Z","dependencies_parsed_at":"2025-09-06T00:57:32.981Z","dependency_job_id":"48dd09b0-e46a-4378-b2c3-cc5d7fbba7dd","html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker","commit_stats":null,"previous_names":["simformsolutionspvtltd/react-native-infinite-wheel-picker"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-infinite-wheel-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-infinite-wheel-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-infinite-wheel-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-infinite-wheel-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-infinite-wheel-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29882636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","infinite-scroll","library","react-native","selection","typescript","wheelpicker"],"created_at":"2025-09-06T00:57:28.657Z","updated_at":"2026-02-27T02:03:14.259Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Infinite Wheel Picker - Simform](./assets/react-native-infinite-wheel-picker.png)\n\n# react-native-infinite-wheel-picker \n\n[![react-native-infinite-wheel-picker on npm](https://img.shields.io/npm/v/react-native-infinite-wheel-picker.svg?style=flat)](https://www.npmjs.com/package/react-native-infinite-wheel-picker) [![react-native-infinite-wheel-picker downloads](https://img.shields.io/npm/dm/react-native-infinite-wheel-picker)](https://www.npmtrends.com/react-native-infinite-wheel-picker) [![react-native-infinite-wheel-picker install size](https://packagephobia.com/badge?p=react-native-infinite-wheel-picker)](https://packagephobia.com/result?p=react-native-infinite-wheel-picker) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\n---\n\nThe React Native Infinite Wheel Picker package offers a highly customizable, versatile, and seamless wheel picker component, enhancing the user experience with smooth scrolling and intuitive selection. It's dynamic design allows for endless scrolling, providing a natural and interactive interface for selecting values. \n\nThe library is compatible with both Android and iOS platforms, offering a versatile solution to elevate your app's user interface with ease.\n\n## 🎬 Preview\n\n\u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker\"\u003e\u003cimg width=\"220\" height=\"200\" alt=\"SimformSolutions\" src=\"./assets/preview1.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker\"\u003e\u003cimg width=\"220\" height=\"200\" alt=\"SimformSolutions\" src=\"./assets/preview2.gif\"\u003e\u003c/a\u003e\n     \u003c/td\u003e\n     \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker\"\u003e\u003cimg width=\"220\" height=\"200\" alt=\"SimformSolutions\" src=\"./assets/preview3.gif\"\u003e\u003c/a\u003e\n     \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## Quick Access\n\n[Installation](#installation) | [Usage and Examples](#usage) | [Properties](#properties) | [Example Code](#example) | [License](#license)\n\n## Getting Started\n\nHere's how to get started with `react-native-infinite-wheel-picker` in your React Native project:\n\n### Installation\n\n#### Install the package\n\n```sh\nnpm install react-native-infinite-wheel-picker\n```\n\nUsing `Yarn`:\n\n```sh\nyarn add react-native-infinite-wheel-picker\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { WheelPicker } from 'react-native-infinite-wheel-picker';\n\nconst App: React.FC = () =\u003e {\n  const initialData = [1, 2, 3, 4, 5, 6, 7, 8];\n  const [selectedIndex, setSelectedIndex] = React.useState(3);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cWheelPicker\n        initialSelectedIndex={3}\n        data={initialData}\n        restElements={2}\n        elementHeight={30}\n        onChangeValue={(index, value) =\u003e {\n          console.log(value);\n          setSelectedIndex(index);\n        }}\n        selectedIndex={selectedIndex}\n        containerStyle={styles.containerStyle}\n        selectedLayoutStyle={styles.selectedLayoutStyle}\n        elementTextStyle={styles.elementTextStyle}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    backgroundColor: '#fff',\n    alignItems: 'center',\n  },\n  selectedLayoutStyle: {\n    backgroundColor: '#00000026',\n    borderRadius: 2,\n  },\n  containerStyle: { \n    backgroundColor: '#0000001a', \n    width: 150 \n  },\n  elementTextStyle: { \n    fontSize: 18 \n  },\n});\n```\n\n## 🎬 Preview\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker\"\u003e\u003cimg width=\"300\" alt=\"SimformSolutions\" src=\"./assets/exampleInfiniteScroll.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nFor, a simple scroll use `infiniteScroll={false}` that disable infinite scrolling of the items.\n\n```js\n\u003cWheelPicker\n  initialSelectedIndex={3}\n  data={initialData}\n  restElements={2}\n  elementHeight={30}\n  onChangeValue={value =\u003e {\n    console.log(value);\n  }}\n  infiniteScroll={false}\n  selectedIndex={selectedIndex}\n  containerStyle={styles.containerStyle}\n  selectedLayoutStyle={styles.selectedLayoutStyle}\n  elementTextStyle={styles.elementTextStyle}\n/\u003e;\n```\n\n## 🎬 Preview\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker\"\u003e\u003cimg width=\"300\" alt=\"SimformSolutions\" src=\"./assets/exampleSimpleScroll.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Properties\n\n| Props                 | Default |          Type           | Description |\n| :-------------------- | :-----: | :---------------------: | :---------- |\n| **data** |    -    |   `Array\u003cstring\u003e` or `Array\u003cnumber\u003e` | An array of strings or numbers representing the items to be displayed. eg [1, 2, 3, 4, 5, 6, 7, 8] |\n| **onChangeValue** |  -   |  function  | A callback function invoked when the selected item changes, receiving the new value |\n| **selectedIndex** |  -   |  number  | The item that should be selected in the picker |\n| initialSelectedIndex |    0    | number or string | The item that should be pre-selected in the picker |\n| infiniteScroll |    true    |         boolean          | A boolean that enables or disables infinite scrolling of the items |\n| restElements |    2    |       number        | The number of items to show above and below the selected item in the picker |\n| loopCount |    100    |       number        | The number of times data array is repeated in picker |\n| decelerationRate |    `'fast'`   |       `'normal', 'fast', 'number`        | Determines how quickly the scroll decelerates after the user lifts their finger in the picker |\n| elementHeight |   40    | number | The height of each item in the picker, in pixels |\n| elementTextStyle  |  -   |  `StyleProp\u003cTextStyle\u003e`  | Style applied to the text of each item in the picker |\n| elementContainerStyle  |  -   |  `StyleProp\u003cViewStyle\u003e`  | Style applied to the container of each item in the picker |\n| selectedLayoutStyle |  -   |  `StyleProp\u003cViewStyle\u003e`  | Style applied to the container of the selected item |\n| containerStyle     |    -    |   `StyleProp\u003cViewStyle\u003e`   | Style applied to the container of the wheel picker |\n| containerProps     |    -    |   `ViewProps`   | Props applied to the container of the wheel picker |\n| flatListProps     |    -    |   `FlatListProps`   | Props applied to the flatlist of the wheel picker |\n\n##### Know more about [ViewProps](https://reactnative.dev/docs/view#props), [ViewStyle](https://reactnative.dev/docs/view-style-props), [FlatListProps](https://reactnative.dev/docs/flatlist#props), [TextStyle](https://reactnative.dev/docs/text-style-props#props), [decelerationRate](https://reactnative.dev/docs/scrollview#decelerationrate)\n\n\u003e Note: In case of a manual prop change, make sure to reload the application to see the changes in the component.\n\n#### WheelPickerRef Methods\n\n#### scrollToIndex()\n\n```ts\nscrollToIndex(index: number): void\n```\n\n`scrollToIndex` function that scroll to particular index.\n\n## Example\n  A full working example project is here [Example](./example/src/App.tsx)\n\n```sh\nyarn\nyarn example ios   // For ios\nyarn example android   // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker/issues/new?labels=bug\u0026late=BUG_REPORT.md\u0026title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-infinite-wheel-picker/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEEDBACK%5D%3A)\n\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Awesome Mobile Libraries\n\n- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n- [MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-infinite-wheel-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-infinite-wheel-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-infinite-wheel-picker/lists"}