{"id":18373872,"url":"https://github.com/erksch/react-native-wheely","last_synced_at":"2025-05-16T09:03:40.504Z","repository":{"id":37957599,"uuid":"240256475","full_name":"erksch/react-native-wheely","owner":"erksch","description":"An all JavaScript wheel picker for react-native without any native code.","archived":false,"fork":false,"pushed_at":"2024-07-02T21:19:14.000Z","size":435,"stargazers_count":455,"open_issues_count":27,"forks_count":63,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-09T10:53:28.328Z","etag":null,"topics":["react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erksch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2020-02-13T12:35:31.000Z","updated_at":"2025-05-02T20:20:00.000Z","dependencies_parsed_at":"2024-06-18T16:50:50.078Z","dependency_job_id":"971a5a61-ded1-42dd-a825-8f6b5dd7d754","html_url":"https://github.com/erksch/react-native-wheely","commit_stats":{"total_commits":68,"total_committers":3,"mean_commits":"22.666666666666668","dds":0.3382352941176471,"last_synced_commit":"d00b14cb3755166cc47c4e5ff25dfaf397de08f6"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erksch%2Freact-native-wheely","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erksch%2Freact-native-wheely/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erksch%2Freact-native-wheely/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erksch%2Freact-native-wheely/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erksch","download_url":"https://codeload.github.com/erksch/react-native-wheely/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501554,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["react","react-native"],"created_at":"2024-11-06T00:12:33.127Z","updated_at":"2025-05-16T09:03:40.481Z","avatar_url":"https://github.com/erksch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-wheely\n\n[![CircleCI](https://circleci.com/gh/erksch/react-native-wheely.svg?style=svg)](https://circleci.com/gh/erksch/react-native-wheely)\n[![npm package](https://badge.fury.io/js/react-native-wheely.svg)](https://www.npmjs.com/package/react-native-wheely)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-wheely.svg)](https://www.npmjs.com/package/react-native-wheely)\n\nAn all JavaScript, highly customizable wheel picker for react native.\n\n\u003cimg src=\"./screenshots/design_5_gray.jpg\" align=\"center\"  alt=\"drawing\" height=\"200\"/\u003e\u003cimg src=\"./screenshots/design_5_blue.jpg\" align=\"center\" alt=\"drawing\" height=\"200\"/\u003e\u003cimg src=\"./screenshots/design_5_plane.jpg\" align=\"center\"  alt=\"drawing\" height=\"200\" /\u003e\u003cimg src=\"./screenshots/design_5_gray_box.jpg\" align=\"center\" alt=\"drawing\" height=\"200\" /\u003e\u003cimg src=\"./screenshots/design_3_gray.jpg\" align=\"center\" alt=\"drawing\" height=\"110\" /\u003e\u003cimg src=\"./screenshots/design_3_plane.jpg\" align=\"center\" alt=\"drawing\" height=\"150\" /\u003e\u003cimg src=\"./screenshots/design_scale.png\" align=\"center\" alt=\"drawing\" height=\"200\" /\u003e\n\n## Installation\n\nInstall with npm\n\n```\nnpm install --save react-native-wheely\n```\n\nInstall with yarn\n\n```\nyarn add react-native-wheely\n```\n\n## Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport WheelPicker from 'react-native-wheely';\n\nfunction CityPicker() {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  return (\n    \u003cWheelPicker\n      selectedIndex={selectedIndex}\n      options={['Berlin', 'London', 'Amsterdam']}\n      onChange={(index) =\u003e setSelectedIndex(index)}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Name                     | Type                      | Description                                                                                                                                                                                                                                                                 |\n| ------------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `options`                | `string[]`                | Options to be displayed in the wheel picker. Options are rendered from top to bottom, meaning the first item in the options will be at the top and the last at the bottom.                                                                                                  |\n| `selectedIndex`          | `number`                  | Index of the currently selected option.                                                                                                                                                                                                                                     |\n| `onChange`               | `(index: number) =\u003e void` | Handler that is called when the selected option changes.                                                                                                                                                                                                                    |\n| `visibleRest`            | `number`                  | Amount of additional options that are visible in each direction. Default is 2, resulting in 5 visible options.                                                                                                                                                              |\n| `itemHeight`             | `number`                  | Height of each option in the picker. Default is 40.                                                                                                                                                                                                                         |\n| `itemStyle`              | `StyleProp\u003cViewStyle\u003e`    | Style for the option's container.                                                                                                                                                                                                                                           |\n| `itemTextStyle`          | `StyleProp\u003cTextStyle\u003e`    | Style for the option's text.                                                                                                                                                                                                                                                |\n| `containerStyle`         | `StyleProp\u003cViewStyle\u003e`    | Style of the picker.                                                                                                                                                                                                                                                        |\n| `selectedIndicatorStyle` | `StyleProp\u003cViewStyle\u003e`    | Style of overlaying selected-indicator in the middle of the picker.                                                                                                                                                                                                         |\n| `rotationFunction`       | `(x: number) =\u003e number `  | Function to determine the x rotation of items based on their current distance to the center (which is x). Default is ![rotation equation](https://latex.codecogs.com/gif.latex?%5Csmall%20f%28x%29%20%3D%201%20-%20%5Cleft%20%28%201%5Cover2%20%5Cright%20%29%20%5E%7Bx%7D) |\n| `scaleFunction`          | `(x: number) =\u003e number `  | Function to determine the scale of items based on their current distance to the center (which is x). Default is ![scale quation](\u003chttps://latex.codecogs.com/gif.image?%5Cinline%20%5Cdpi%7B110%7Df(x)%20=%201\u003e)                                                            |\n| `opacityFunction`        | `(x: number) =\u003e number`   | Function to determine the opacity of items based on their current distance to the center (which is x). Default is ![opacity equation](https://latex.codecogs.com/gif.latex?%5Csmall%20f%28x%29%20%3D%20%5Cleft%20%28%201%5Cover3%20%5Cright%20%29%20%5E%7Bx%7D)             |\n| `decelerationRate`       | \"normal\", \"fast\", number  | How quickly the underlying scroll view decelerates after the user lifts their finger. See the [ScrollView docs](https://facebook.github.io/react-native/docs/scrollview.html#decelerationrate). Default is \"fast\".                                                          |\n| `containerProps`         | `ViewProps`               | Props that are applied to the container which wraps the `FlatList` and the selected indicator.                                                                                                                                                                              |\n| `flatListProps`          | `FlatListProps`           | Props that are applied to the `FlatList`.                                                                                                                                                                                                                                   |\n\n## Memoization\n\nThe individual items in the picker (`\u003cWheelPickerItem /\u003e`) are [strictly memoized](https://github.com/erksch/react-native-wheely/blob/master/src/WheelPickerItem.tsx#L109-L114), meaning that they will not rerender after the initial render. Rerendering the picker items uncontrollably would lead to bad performance with large number of options. Item styles, animation functions and other parameters of items therefore must be static and changes to them after the initial render will have no effect.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferksch%2Freact-native-wheely","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferksch%2Freact-native-wheely","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferksch%2Freact-native-wheely/lists"}