brightdu / react-native-quickpicker

A simple Picker for react-native that works out of the box on both iOS and Android

react-native-quickpicker

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 <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 }),
      items: [
        {
          value: '1',
          label: 'salut',
        },
        {
          value: '2',
          label: 'salut2',
        },
      ],
      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