{"id":4129,"url":"https://github.com/Cero-Studio/ReactNativeWheelPicker","last_synced_at":"2025-08-04T00:31:41.349Z","repository":{"id":38347513,"uuid":"76441142","full_name":"Cero-Studio/ReactNativeWheelPicker","owner":"Cero-Studio","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-12T09:54:06.000Z","size":10175,"stargazers_count":381,"open_issues_count":66,"forks_count":240,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-29T13:49:53.435Z","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":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cero-Studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2016-12-14T08:45:38.000Z","updated_at":"2024-10-16T20:20:22.000Z","dependencies_parsed_at":"2024-01-08T01:01:50.238Z","dependency_job_id":"6b759318-fd38-4e34-9cd4-a5e72cc04805","html_url":"https://github.com/Cero-Studio/ReactNativeWheelPicker","commit_stats":null,"previous_names":["kalontech/reactnativewheelpicker","elekenagency/reactnativewheelpicker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cero-Studio%2FReactNativeWheelPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cero-Studio%2FReactNativeWheelPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cero-Studio%2FReactNativeWheelPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cero-Studio%2FReactNativeWheelPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cero-Studio","download_url":"https://codeload.github.com/Cero-Studio/ReactNativeWheelPicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"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":[],"created_at":"2024-01-05T20:17:01.985Z","updated_at":"2024-12-07T07:31:10.163Z","avatar_url":"https://github.com/Cero-Studio.png","language":"Java","readme":"# React native wheel picker V2\n\n\u003cp\u003e\n\u003cimg src=\"http://img.shields.io/npm/v/react-native-wheel-picker-android.svg\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/dm/react-native-wheel-picker-android.svg\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/dt/react-native-wheel-picker-android.svg\" /\u003e\n\u003c/p\u003e\n\nA simple Wheel Picker for Android (For IOs is using Picker from react-native)\n\n## Example\n\nYou can clone the repo and run example from ./example folder\n\n## Installation\n\n`yarn add react-native-wheel-picker-android`\n\n![](./src/assets/pickerAndroid.gif)\n![](./src/assets/pickerIos.gif)\n\n## Automatic Installation\n\n`react-native link react-native-wheel-picker-android`\n\n## Manual Android Installation\n\nIn `android/settings.gradle`\n\n```\ninclude ':react-native-wheel-picker-android'\nproject(':react-native-wheel-picker-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android/android')\n```\n\nIn `android/app/build.gradle`\n\n```\ndependencies {\n    ...\n    compile project(':react-native-wheel-picker-android')\n}\n```\n\nIn `android/app/src/main/java/com/PROJECT_NAME/MainApplication.java`\n\n```\n@Override\nprotected List\u003cReactPackage\u003e getPackages() {\n  return Arrays.\u003cReactPackage\u003easList(new MainReactPackage(), new WheelPickerPackage());\n}\n```\n\n# Usage\n\n```js\nimport {\n  WheelPicker,\n  TimePicker,\n  DatePicker\n} from \"react-native-wheel-picker-android\";\nimport React, { Component } from \"react\";\nimport { AppRegistry, StyleSheet, Text, View, Button } from \"react-native\";\n\nconst wheelPickerData = [\n  \"sunday\",\n  \"monday\",\n  \"tuesday\",\n  \"wednesday\",\n  \"thursday\",\n  \"friday\"\n];\n\nclass MyPicker extends Component {\n  state = {\n    selectedItem: 0\n  };\n\n  onItemSelected = selectedItem =\u003e {\n    this.setState({ selectedItem });\n  };\n\n  onPress = () =\u003e {\n    this.setState({ selectedItem: 3 });\n  };\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cButton title={\"Select third element\"} onPress={this.onPress} /\u003e\n        \u003cText\u003eSelected position: {this.state.selectedItem}\u003c/Text\u003e\n        \u003cWheelPicker\n          selectedItem={this.state.selectedItem}\n          data={wheelPickerData}\n          onItemSelected={this.onItemSelected}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nmodule.exports = MyPicker;\n```\n\n## Props\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| onItemSelected | - | `func` | Returns selected position |\n| data | - | `Array\u003cstring\u003e` | Data array  |\n| isCyclic | false | `bool` | Make Wheel Picker cyclic |\n| selectedItemTextColor | black | `string` | Wheel Picker's selected Item text color  |\n| selectedItemTextSize | 16 | `number` | Wheel Picker's selected Item text size  |\n| selectedItemTextFontFamily | - | `font-family` | Wheel Picker's selected Item font  |\n| itemTextColor | grey | `string` | Wheel Picker's Item Text Color  |\n| itemTextSize | 16 | `number` | Wheel Picker's Item text size  |\n| itemTextFontFamily | - | `font-family` | Wheel Picker's Item font  |\n| selectedItem | 0 | `number` | Current item position |\n| initPosition | 0 | `number` | Initial item position |\n| indicatorColor | black | `string` | Indicator color  |\n| hideIndicator | - | `boolean` | Hide indicator |\n| indicatorWidth | 1 | `number` | Indicator width |\n| backgroundColor | transparent | `string` | Wheel Picker background color  |\n| disabled | undefind | `bool` | Disable picker selection  |\n\n# Time Picker\nFor IOs DatePickerIOS is used\n\n![](./src/assets/timePickerAndroid.gif)\n![](./src/assets/timePickerIos.gif)\n\n```js\nonTimeSelected = date =\u003e {}\n...\n\u003cTimePicker onTimeSelected={this.onTimeSelected}/\u003e\n\n```\n\n## Props\n\n| Prop                 |     Default      |      Type       | Description                 |\n| :------------------- | :--------------: | :-------------: | :-------------------------- |\n| [DatePickerIOS props](https://facebook.github.io/react-native/docs/datepickerios#props) |        -         |        -        | All DatePickerIOS props (IOS only) |\n| ...WheelPicker props |        -         |        -        | All style WheelPicker props (Android only) |\n| initDate             |   current date   |     `Date`      | Initial date                |\n| onTimeSelected       |        -         |     `func`      | Callback with selected time |\n| hours                |   [1,2,3,4...]   | `Array\u003cstring\u003e` | Custom hours array (Android only)         |\n| minutes              | [00,05,10,15...] | `Array\u003cstring\u003e` | Custom minutes array (Android only)       |\n| format24             |      false       |    `boolean`    | Time format (Android only)                |\n\n# Date Picker\n\nFor IOs DatePickerIOS is used\n\n![](./src/assets/datePickerAndroid.gif)\n![](./src/assets/datePickerIos.gif)\n\n```js\nonDateSelected = date =\u003e {}\n...\n\u003cDatePicker onDateSelected={this.onDateSelected}/\u003e\n\n```\n\n## Props\n\n| Prop                                                                                    |     Default      |      Type       | Description                                          |\n| :-------------------------------------------------------------------------------------- | :--------------: | :-------------: | :--------------------------------------------------- |\n| [DatePickerIOS props](https://facebook.github.io/react-native/docs/datepickerios#props) |        -         |        -        | All DatePickerIOS props (IOS only)                   |\n| initDate                                                                                |   current date   |     `Date`      | Initial date                                         |\n| onDateSelected                                                                          |        -         |     `func`      | Callback with selected date                          |\n| days                                                                                    |   [1,2,3,4...]   | `Array\u003cstring\u003e` | Custom days array (Android only)                     |\n| hours                                                                                   |   [1,2,3,4...]   | `Array\u003cstring\u003e` | Custom hours array (Android only)                    |\n| minutes                                                                                 | [00,05,10,15...] | `Array\u003cstring\u003e` | Custom minutes array (Android only)                  |\n| format24                                                                                |      false       |    `boolean`    | Time format (Android only)                           |\n| startDate                                                                               |   current date   |     `Date`      | Min Date (Android only)                              |\n| daysCount                                                                               |       365        |    `number`     | Days count to display from start date (Android only) |\n| hideDate                                                                                |      false       |    `boolean`    | Hide days picker (Android only)                      |\n| hideHours                                                                               |      false       |    `boolean`    | Hide hours picker (Android only)                     |\n| hideMinutes                                                                             |      false       |    `boolean`    | Hide minutes picker (Android only)                   |\n| hideAM                                                                                  |      false       |    `boolean`    | Hide time format picker (Android only)               |\n\n## Questions or suggestions?\n\nFeel free to [open an issue](https://github.com/ElekenAgency/ReactNativeWheelPicker/issues)\n","funding_links":[],"categories":["Components","Java"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCero-Studio%2FReactNativeWheelPicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCero-Studio%2FReactNativeWheelPicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCero-Studio%2FReactNativeWheelPicker/lists"}