# quick-picker > A plug and Play picker for React Native Latest version **2.0.6** (published 2022-01-07) · MIT license · 0 weekly downloads ## Install ```sh npm install quick-picker pnpm add quick-picker yarn add quick-picker bun add quick-picker ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.6 | | Published | 2022-01-07 | | First published | 2017-09-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 36.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 66 | | Author | Vincent de Lafontaine | | Maintainers | valium | | Keywords | react-native, appandflow, react-native picker, picker, quick picker | ## Links - npm: https://www.npmjs.com/package/quick-picker - Repository: https://github.com/Valiums/react-native-quickpicker - Homepage: https://github.com/Valiums/react-native-quickpicker#readme - Issues: https://github.com/Valiums/react-native-quickpicker/issues - npm.io page: https://npm.io/package/quick-picker ## Dependencies (3) - [@appandflow/touchable](https://npm.io/package/@appandflow/touchable.md) 2.0.0 - [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ~1.8.0 - [@react-native-community/datetimepicker](https://npm.io/package/@react-native-community/datetimepicker.md) ^3.0.4 ## Recent versions - 2.0.6 (latest) — 2022-01-07 - 2.0.0-beta.1 (beta) — 2020-01-31 - 2.0.5 — 2021-07-16 - 2.0.4 — 2021-07-16 - 2.0.3 — 2020-12-10 - 2.0.2 — 2020-07-10 - 2.0.1 — 2020-07-10 - 2.0.0 — 2020-01-31 - 2.0.0-beta.0 — 2020-01-31 - 1.5.0 — 2019-09-16 - 1.4.0 — 2019-06-26 - 1.3.0 — 2019-06-10 - 1.2.2 — 2019-02-05 - 1.2.1 — 2019-02-05 - 1.2.0 — 2018-12-14 - … 17 more at https://npm.io/package/quick-picker/versions ## README # react-native-quickpicker [![npm (scoped)](https://img.shields.io/npm/v/quick-picker.svg)](https://www.npmjs.com/package/quick-picker) A picker built in JS for react-native/expo that works right out of the box. ## iOS Appearance ### `pickerType="normal"` ![Alt Text](https://github.com/Valiums/react-native-quickpicker/blob/master/assets/exemple.gif) ### `pickerType="time" && mode="datetime"` ![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246317749567498/android5.gif) ## Android Appearance ### `pickerType="normal"` ![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246292210712576/android4.gif) ### `pickerType="time" && mode="datetime"` ![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246232500469761/android3.gif) ## About Quickpicker This 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. ## Installation `npm i quick-picker` if you are using RN < 60 make sure to use 1.x.x ## Usage Example `At the top level of your app (preferably but not imperatively), you want to have ` ```js import React, { Component } from 'react'; import { View } from 'react-native'; import QuickPicker from 'quick-picker'; class App extends Component { render() { return ( ); } } ``` `To open the Picker (that could be anywhere deeper in your app), you must call QuickPicker.open({...})` ```js import QuickPicker from 'quick-picker'; export default class AnotherRandomComponent extends React.Component { state = { item: { value: '1', label: 'salut', }, }; _onPressButton = () => { QuickPicker.open({ onChange: item => this.setState({ item }), items: [ { value: '1', label: 'salut', }, { value: '2', label: 'salut2', }, ], item: this.state.item, }); }; render() { return ( Open up picker, selected value: {this.state.item.label} ); } } ``` `Now when the user will touch the button the Picker will open with the defined params in QuickPicker.open({...})` ## API #### Methods `Static QuickPicker.open(pickerOptions)` Opens the picker. `Static QuickPicker.close()` Closes the picker. #### PickerOptions | **field** | **type** | **defaultValue** | **Platform** | **description** | | ------------------------ | -------------------------------------------------------- | --------------------------- | ------------ | ---------------------------------------------------------------------------------------------- | | item | Item | undefined | Both | Picker's selected item | | items | Item[] | [] | Both | Picker's items | | onChange | (Item \| Date) => void | undefined | Both | Callback function when an item is selected | | onPressDone | (Item \| Date) => void | undefined | Both | Callback function when Done/Ok button is pressed | | onTapOut | () => void | undefined | Both | Callback function when Cancel button is pressed or when user taps Out | | disableTopRow | boolean | false | iOS | Disable the picker top bar | | topRow | ReactNode | undefined | iOS | If you want to create your own custom top bar | | doneButtonText | string | "Done" (iOS) "Ok" (Android) | Both | Done button text | | cancelButtonText | string | "Cancel" | Android | Cancel button text | | doneButtonTextStyle | TextStyle | undefined | Both | Done (and Cancel on Android) button text style | | androidModalStyle | ViewStyle | undefined | Android | Android's modal view style | | androidItemStyle | ViewStyle | undefined | Android | Android's modal items style | | androidItemTextStyle | TextStyle | undefined | Android | Android's modal items text style | | androidSelectedItemStyle | TextStyle | undefined | Android | Android's modal selected item text style | | pickerType | "normal" \| "time" | "normal" | Both | sets the picker to his normal mode or to time mode | | mode | "date" \| "time" \| "datetime" \| "countdown" | undefined | Both | mode if pickerType is set to "time" | | display | "default" \| "spinner" \| "calendar" \| "clock" | undefined | Android | Defines the visual display of the picker for Android | | date | Date | new Date() | both | Current selected date | | maximumDate | Date | undefined | both | Maximum date | | minimumDate | Date | undefined | both | Minimum date | | timeZoneOffsetInMinutes | number | undefined | iOS | Allows changing of the timeZone of the date picker. By default it uses the device's time zone. | | locale | string | undefined | iOS | Allows changing of the locale of the component. By default it uses the device's locale. | | is24Hour | boolean | undefined | Android | Allows changing of the time picker to a 24 hour format. | | minuteInterval | 1 \| 2 \| 6 \| 5 \| 4 \| 3 \| 10 \| 12 \| 15 \| 20 \| 30 | undefined | iOS | The interval at which minutes can be selected. | | useNativeDriver | boolean | true | both | Use native driver | #### Item | **field** | **type** | **description** | | --------- | ---------------- | --------------- | | value | string or number | item's value | | label | string | item's label | --- _Source: https://npm.io/package/quick-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._