Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AppAndFlow/react-native-quickpicker
A simple Picker for react-native that works out of the box on both iOS and Android
https://github.com/AppAndFlow/react-native-quickpicker
Last synced: 3 months ago
JSON representation
A simple Picker for react-native that works out of the box on both iOS and Android
- Host: GitHub
- URL: https://github.com/AppAndFlow/react-native-quickpicker
- Owner: AppAndFlow
- Created: 2017-09-08T01:30:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T21:43:05.000Z (over 1 year ago)
- Last Synced: 2024-07-10T16:51:01.629Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 8.52 MB
- Stars: 66
- Watchers: 3
- Forks: 10
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-quickpicker
[](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"`
### `pickerType="time" && mode="datetime"`
## Android Appearance
### `pickerType="normal"`
### `pickerType="time" && mode="datetime"`
## 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 |