{"id":4081,"url":"https://github.com/lesliesam/react-native-wheel-picker","last_synced_at":"2026-01-12T05:50:32.423Z","repository":{"id":57104234,"uuid":"55683418","full_name":"lesliesam/react-native-wheel-picker","owner":"lesliesam","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-21T13:19:33.000Z","size":246,"stargazers_count":344,"open_issues_count":52,"forks_count":321,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-08-03T18:30:30.890Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","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/lesliesam.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}},"created_at":"2016-04-07T09:51:52.000Z","updated_at":"2025-07-22T02:35:33.000Z","dependencies_parsed_at":"2024-01-08T01:01:32.026Z","dependency_job_id":"61123e08-25f3-4b6e-9c71-bfcb6412dbbc","html_url":"https://github.com/lesliesam/react-native-wheel-picker","commit_stats":{"total_commits":41,"total_committers":7,"mean_commits":5.857142857142857,"dds":"0.41463414634146345","last_synced_commit":"28c9d7459452d07fb074b874364784a3dbeb8e71"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lesliesam/react-native-wheel-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesliesam%2Freact-native-wheel-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesliesam%2Freact-native-wheel-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesliesam%2Freact-native-wheel-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesliesam%2Freact-native-wheel-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lesliesam","download_url":"https://codeload.github.com/lesliesam/react-native-wheel-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesliesam%2Freact-native-wheel-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268613476,"owners_count":24278546,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"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":[],"created_at":"2024-01-05T20:17:00.495Z","updated_at":"2026-01-12T05:50:32.397Z","avatar_url":"https://github.com/lesliesam.png","language":"Java","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# react-native-wheel-picker\n[![npm version](http://img.shields.io/npm/v/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker \"View this project on npm\")\n[![npm version](http://img.shields.io/npm/dm/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker \"View this project on npm\")\n\n## Introduction\nCross platform Picker component based on React-native.\n\nSince picker is originally supported by ios while Android only supports a ugly Spinner component. If you want to have the same user behaviour, you can use this.\n\nThe android component is based on https://github.com/AigeStudio/WheelPicker which runs super fast and smoothly. It also supports curved effect which make it exactly the same looking and feel as the ios picker.\n![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo.gif)\n![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo_android.gif)\n\n## How to use\n\nRun command\n\nFor apps using RN 0.40 or higher, please run\n```\nnpm i react-native-wheel-picker --save\n```\nFor apps using RN 0.39 or less, please run\n```\nnpm install --save --save-exact react-native-wheel-picker@1.1.2\n```\nAdd in settings.gradle\n```\ninclude ':react-native-wheel-picker'\nproject(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android')\n```\nAdd in app/build.gradle\n```\ncompile project(':react-native-wheel-picker')\n```\nModify MainApplication\n```\n    import com.zyu.ReactNativeWheelPickerPackage;\n    ......\n\n    protected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            new MainReactPackage(), new ReactNativeWheelPickerPackage()\n        );\n    }\n```\n\n## Example code\n```\nimport React, { Component } from 'react';\nimport {\n\tPlatform,\n\tStyleSheet,\n\tText,\n\tView,\n} from 'react-native';\n\n\nimport Picker from 'react-native-wheel-picker'\nvar PickerItem = Picker.Item;\n\nexport default class App extends Component\u003c{}\u003e {\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tselectedItem : 2,\n\t\t\titemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮']\n\t\t};\n\t}\n\n\tonPickerSelect (index) {\n\t\tthis.setState({\n\t\t\tselectedItem: index,\n\t\t})\n\t}\n\n\tonAddItem = () =\u003e {\n\t\tvar name = '司马懿'\n\t\tif (this.state.itemList.indexOf(name) == -1) {\n\t\t\tthis.state.itemList.push(name)\n\t\t}\n\t\tthis.setState({\n\t\t\tselectedItem: this.state.itemList.indexOf(name),\n\t\t})\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t\u003cView style={styles.container}\u003e\n\t\t\t\t\u003cText style={styles.welcome}\u003e\n\t\t\t\t\tWelcome to React Native!\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\t\u003cPicker style={{width: 150, height: 180}}\n\t\t\t\t\tselectedValue={this.state.selectedItem}\n\t\t\t\t\titemStyle={{color:\"white\", fontSize:26}}\n\t\t\t\t\tonValueChange={(index) =\u003e this.onPickerSelect(index)}\u003e\n\t\t\t\t\t\t{this.state.itemList.map((value, i) =\u003e (\n\t\t\t\t\t\t\t\u003cPickerItem label={value} value={i} key={\"money\"+value}/\u003e\n\t\t\t\t\t\t))}\n\t\t\t\t\u003c/Picker\u003e\n\t\t\t\t\u003cText style={{margin: 20, color: '#ffffff'}}\u003e\n\t\t\t\t\t你最喜欢的是：{this.state.itemList[this.state.selectedItem]}\n\t\t\t\t\u003c/Text\u003e\n\n\t\t\t\t\u003cText style={{margin: 20, color: '#ffffff'}}\n\t\t\t\t\t\tonPress={this.onAddItem}\u003e\n\t\t\t怎么没有司马懿？\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n\nconst styles = StyleSheet.create({\n\tcontainer: {\n\t\tflex: 1,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tbackgroundColor: '#1962dd',\n\t},\n\twelcome: {\n\t\tfontSize: 20,\n\t\ttextAlign: 'center',\n\t\tmargin: 10,\n\t\tcolor: '#ffffff',\n\t},\n\tinstructions: {\n\t\ttextAlign: 'center',\n\t\tcolor: '#333333',\n\t\tmarginBottom: 5,\n\t},\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flesliesam%2Freact-native-wheel-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flesliesam%2Freact-native-wheel-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flesliesam%2Freact-native-wheel-picker/lists"}