{"id":13850391,"url":"https://github.com/AppAndFlow/react-native-quickpicker","last_synced_at":"2025-07-12T22:30:28.685Z","repository":{"id":33531361,"uuid":"102802919","full_name":"AppAndFlow/react-native-quickpicker","owner":"AppAndFlow","description":"A simple Picker for react-native that works out of the box on both iOS and Android","archived":false,"fork":false,"pushed_at":"2023-02-28T21:43:05.000Z","size":8933,"stargazers_count":66,"open_issues_count":11,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-11T20:33:31.679Z","etag":null,"topics":[],"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/AppAndFlow.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}},"created_at":"2017-09-08T01:30:00.000Z","updated_at":"2023-08-22T18:35:21.000Z","dependencies_parsed_at":"2024-01-13T17:12:17.524Z","dependency_job_id":"27505332-493a-4763-8c72-7787cb995e11","html_url":"https://github.com/AppAndFlow/react-native-quickpicker","commit_stats":null,"previous_names":["valiums/react-native-quickpicker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-quickpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-quickpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-quickpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-quickpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AppAndFlow","download_url":"https://codeload.github.com/AppAndFlow/react-native-quickpicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225839485,"owners_count":17532305,"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-08-04T20:01:10.138Z","updated_at":"2024-11-22T03:31:22.342Z","avatar_url":"https://github.com/AppAndFlow.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-quickpicker\n\n[![npm (scoped)](https://img.shields.io/npm/v/quick-picker.svg)](https://www.npmjs.com/package/quick-picker)\n\nA picker built in JS for react-native/expo that works right out of the box.\n\n## iOS Appearance\n\n### `pickerType=\"normal\"`\n\n![Alt Text](https://github.com/Valiums/react-native-quickpicker/blob/master/assets/exemple.gif)\n\n### `pickerType=\"time\" \u0026\u0026 mode=\"datetime\"`\n\n![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246317749567498/android5.gif)\n\n## Android Appearance\n\n### `pickerType=\"normal\"`\n\n![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246292210712576/android4.gif)\n\n### `pickerType=\"time\" \u0026\u0026 mode=\"datetime\"`\n\n![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246232500469761/android3.gif)\n\n## About Quickpicker\n\nThis picker is offering an out of the box solution. It allows you to handle iOS and Android using the same API. It supports regular picker and date/time picker. It combines https://facebook.github.io/react-native/docs/picker and https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker into a single API.\n\n## Installation\n\n`npm i quick-picker`\n\nif you are using RN \u003c 60 make sure to use 1.x.x\n\n## Usage Example\n\n`At the top level of your app (preferably but not imperatively), you want to have \u003cQuickPicker /\u003e`\n\n```js\nimport React, { Component } from 'react';\nimport { View } from 'react-native';\nimport QuickPicker from 'quick-picker';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cView style={styles.fill}\u003e\n        \u003cStatusBar /\u003e\n        \u003cSideMenu\u003e\n          \u003cOtherFancyStuff /\u003e\n        \u003c/SideMenu\u003e\n        \u003cQuickPicker /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n`To open the Picker (that could be anywhere deeper in your app), you must call QuickPicker.open({...})`\n\n```js\nimport QuickPicker from 'quick-picker';\n\nexport default class AnotherRandomComponent extends React.Component {\n  state = {\n    item: {\n      value: '1',\n      label: 'salut',\n    },\n  };\n\n  _onPressButton = () =\u003e {\n    QuickPicker.open({\n      onChange: item =\u003e this.setState({ item }),\n      items: [\n        {\n          value: '1',\n          label: 'salut',\n        },\n        {\n          value: '2',\n          label: 'salut2',\n        },\n      ],\n      item: this.state.item,\n    });\n  };\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTouchableOpacity onPress={this._onPressButton}\u003e\n          \u003cText\u003eOpen up picker, selected value: {this.state.item.label}\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n`Now when the user will touch the button the Picker will open with the defined params in QuickPicker.open({...})`\n\n## API\n\n#### Methods\n\n`Static QuickPicker.open(pickerOptions)`\n\nOpens the picker.\n\n`Static QuickPicker.close()`\n\nCloses the picker.\n\n#### PickerOptions\n\n| **field**                | **type**                                                 | **defaultValue**            | **Platform** | **description**                                                                                |\n| ------------------------ | -------------------------------------------------------- | --------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |\n| item                     | Item                                                     | undefined                   | Both         | Picker's selected item                                                                         |\n| items                    | Item[]                                                   | []                          | Both         | Picker's items                                                                                 |\n| onChange                 | (Item \\| Date) =\u003e void                                   | undefined                   | Both         | Callback function when an item is selected                                                     |\n| onPressDone              | (Item \\| Date) =\u003e void                                   | undefined                   | Both         | Callback function when Done/Ok button is pressed                                               |\n| onTapOut                 | () =\u003e void                                               | undefined                   | Both         | Callback function when Cancel button is pressed or when user taps Out                          |\n| disableTopRow            | boolean                                                  | false                       | iOS          | Disable the picker top bar                                                                     |\n| topRow                   | ReactNode                                                | undefined                   | iOS          | If you want to create your own custom top bar                                                  |\n| doneButtonText           | string                                                   | \"Done\" (iOS) \"Ok\" (Android) | Both         | Done button text                                                                               |\n| cancelButtonText         | string                                                   | \"Cancel\"                    | Android      | Cancel button text                                                                             |\n| doneButtonTextStyle      | TextStyle                                                | undefined                   | Both         | Done (and Cancel on Android) button text style                                                 |\n| androidModalStyle        | ViewStyle                                                | undefined                   | Android      | Android's modal view style                                                                     |\n| androidItemStyle         | ViewStyle                                                | undefined                   | Android      | Android's modal items style                                                                    |\n| androidItemTextStyle     | TextStyle                                                | undefined                   | Android      | Android's modal items text style                                                               |\n| androidSelectedItemStyle | TextStyle                                                | undefined                   | Android      | Android's modal selected item text style                                                       |\n| pickerType               | \"normal\" \\| \"time\"                                       | \"normal\"                    | Both         | sets the picker to his normal mode or to time mode                                             |\n| mode                     | \"date\" \\| \"time\" \\| \"datetime\" \\| \"countdown\"            | undefined                   | Both         | mode if pickerType is set to \"time\"                                                            |\n| display                  | \"default\" \\| \"spinner\" \\| \"calendar\" \\| \"clock\"          | undefined                   | Android      | Defines the visual display of the picker for Android                                           |\n| date                     | Date                                                     | new Date()                  | both         | Current selected date                                                                          |\n| maximumDate              | Date                                                     | undefined                   | both         | Maximum date                                                                                   |\n| minimumDate              | Date                                                     | undefined                   | both         | Minimum date                                                                                   |\n| timeZoneOffsetInMinutes  | number                                                   | undefined                   | iOS          | Allows changing of the timeZone of the date picker. By default it uses the device's time zone. |\n| locale                   | string                                                   | undefined                   | iOS          | Allows changing of the locale of the component. By default it uses the device's locale.        |\n| is24Hour                 | boolean                                                  | undefined                   | Android      | Allows changing of the time picker to a 24 hour format.                                        |\n| minuteInterval           | 1 \\| 2 \\| 6 \\| 5 \\| 4 \\| 3 \\| 10 \\| 12 \\| 15 \\| 20 \\| 30 | undefined                   | iOS          | The interval at which minutes can be selected.                                                 |\n| useNativeDriver          | boolean                                                  | true                        | both         | Use native driver                                                                              |\n\n#### Item\n\n| **field** | **type**         | **description** |\n| --------- | ---------------- | --------------- |\n| value     | string or number | item's value    |\n| label     | string           | item's label    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAppAndFlow%2Freact-native-quickpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAppAndFlow%2Freact-native-quickpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAppAndFlow%2Freact-native-quickpicker/lists"}