quick-picker v2.0.6

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

Item