shivangg / 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="date" && mode="datetime"

Android Appearance

pickerType="normal"

pickerType="date" && mode="datetime"

Why use this library?

The picker is one of the most common input component in mobile applications, but unfortunately most of the solutions require linking, meaning it won't be possible to use with Expo without ejecting. This one works perfectly in both Vanilla React Native and Expo.

Installation

npm i quick-picker --save

or

yarn add quick-picker

Usage Example

At the root 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() {
    const content = null;
    return (
      <View style={styles.fill}>
        <StatusBar />
        <SideMenu>
          <OtherFancyStuff />
          {content}
        </SideMenu>
        <QuickPicker />
      </View>
    );
  }
}

Now if you want to open the Picker (that could be anywhere in your app's navigation), you must call QuickPicker.open({...})

import Touchable from "@appandflow/touchable";
import QuickPicker from "quick-picker";

export default class AnotherRandomComponent extends React.Component {
  state = {
    selectedLetter: null,
  };

  _onPressText = () => {
    const { selectedLetter } = this.state;
    QuickPicker.open({
      items: ["a", "b", "c"],
      selectedValue: "b", // this could be this.state.selectedLetter as well.
      onValueChange: selectedValueFromPicker =>
        this.setState({ selectedLetter: selectedValueFromPicker }),
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Touchable
          feedback="opacity"
          native={false}
          onPress={this._onPressText}
        >
          <Text>
            Open up picker, selected letter: {this.state.selectedLetter}
          </Text>
        </Touchable>
      </View>
    );
  }
}

Now when the user will touch the button (<Touchable>) the Picker will open with the defined params in QuickPicker.open({...})

API

Static QuickPicker.open(config)

Opens the picker.

    config = {
        items: ?Array<string>,
        selectedValue: ?string | ?Date, // if pickerType is set to 'date', give a Date
        onValueChange: ?Function,
        backgroundColor: ?string,
        topRow: ?Component, // e.g <View> <Text> this will be displayed in the top section of the picker </Text>  </View>
        onPressDone: ?Function, // When user press done button, if you haven't redefined the topRow and kept the default one.
        onTapOut: ?Function, // will be triggered when user tap off the picker
        textStyle: ?Object, // change item text styling, only on IOS
        doneButtonText: ?string, // change the "done" button string. Default is "done".
        doneButtonTextStyle: ?Object, // change the styling of the done button's
        androidModalStyle: ?Object, // change the styling of the default picker's modal on Android
        itemStyleAndroid: ?Object, // change the styling of the default picker's items on Android. Applied also to selected item.
        selectedItemStyleAndroid: ?Object, // change the styling of the default picker's selected item on Android.
        // text, if you haven't redefined the topRow and kept the default one.
        useNativeDriver: boolean, // use Native Driver for animated or not. Default is false.

        // the following props can only be set if pickerType value is 'date'.
        // it use the same API as DatePickerIOS or DatePickerAndroid depending on the os.
        pickerType: ?enum('normal', 'date'), // default value is 'normal'
        mode: ?enum('date', 'time', 'datetime'), // only if pickerType === "date"
        minimumDate: ?Date,
        maximumDate: ?Date,

        disableTopRow: ?boolean, // only on iOS, default = false. Will completely hide the top bar where you would normally find the "done" button.

        locale: ?string, // see https://facebook.github.io/react-native/docs/datepickerios#locale
        timeZoneOffsetInMinutes: ?Number, // see https://facebook.github.io/react-native/docs/datepickerios#timeZoneOffsetInMinutes
        minuteInterval: ?Number, // see https://facebook.github.io/react-native/docs/datepickerios#minuteInterval

    }

Static QuickPicker.close()

Closes the picker.