Skip to content
A simple Picker for react-native that works out of the box on both iOS and Android
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src roll back Feb 12, 2019
.babelrc first commit Sep 8, 2017
.gitignore first commit Sep 8, 2017
.watchmanconfig first commit Sep 8, 2017
App.js
README.md
app.json android modal picker re-implementation wip Nov 5, 2018
jsconfig.json
package-lock.json
package.json
yarn.lock now supporting Date Oct 28, 2017

README.md

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

Alt Text

Android Appearance

pickerType="normal"

Alt Text

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

Alt Text

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,
    }

Static QuickPicker.close()

Closes the picker.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.