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 |