quick-picker
A plug and Play picker for React Native
Last updated 20 days ago by valium .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install quick-picker 
SYNC missed versions from official npm registry.

react-native-quickpicker

npm (scoped)

A picker built in JS for react-native/expo that works right out of the box.

iOS Appearance

pickerType="normal"

Alt Text

pickerType="time" && mode="datetime"

Alt Text

Android Appearance

pickerType="normal"

Alt Text

pickerType="time" && mode="datetime"

Alt Text

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 <QuickPicker />

import React, { Component } from 'react';
import { View } from 'react-native';
import QuickPicker from 'quick-picker';

class App extends Component {
  render() {
    return (
      <View style={styles.fill}>
        <StatusBar />
        <SideMenu>
          <OtherFancyStuff />
        </SideMenu>
        <QuickPicker />
      </View>
    );
  }
}

To open the Picker (that could be anywhere deeper in your app), you must call QuickPicker.open({...})

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 }),
      item: this.state.item,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._onPressButton}>
          <Text>Open up picker, selected value: {this.state.item.label}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

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

Current Tags

  • 2.0.0-beta.1                                ...           beta (20 days ago)
  • 2.0.0                                ...           latest (20 days ago)

26 Versions

  • 2.0.0                                ...           20 days ago
  • 2.0.0-beta.1                                ...           20 days ago
  • 2.0.0-beta.0                                ...           20 days ago
  • 1.5.0                                ...           5 months ago
  • 1.4.0                                ...           8 months ago
  • 1.3.0                                ...           8 months ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           2 years ago
  • 0.0.13                                ...           2 years ago
  • 0.0.12                                ...           2 years ago
  • 0.0.11                                ...           2 years ago
  • 0.0.10                                ...           2 years ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 1
This Week 3
This Month 79
Last Day 0
Last Week 26
Last Month 3
Dev Dependencies (14)

Copyright 2014 - 2017 © taobao.org |