react-native-picker-js

A Picker written in pure javascript for cross-platform support.

It is the fork of this repo and I will now maintain it react-native-picker.

Demo

• Date-picker
• Area-picker

Documentation

Props

• style style of picker, you can set width and height of picker in this prop
• pickerElevation elevation of picker (for issue https://github.com/beefe/react-native-picker/issues/27)
• pickerBtnText string, tool bar's confirm btn text
• pickerCancelBtnText string, tool bar's cancel ben text
• pickerBtnStyle textStylePropType, tool bar's btn style
• pickerToolBarStyle viewStylePropType, tool bar's style
• showDuration number, animation of picker
• showMask boolean, default to be false, cancel the picker by tapping in the rest of the screen support when setted to be true
• pickerTitle string, title of picker
• pickerTitleStyle textStylePropType, style of title
• pickerData array
• selectedValue any
• onPickerDone function
• onPickerCancel function
• onValueChange function

Methods

• toggle show or hide picker, default to be hiden
• show show picker
• hide hide picker
• isPickerShow get status of picker, return a boolean

Usage

Step 1 - install

    npm install react-native-picker-js --save

or

    yarn add react-native-picker-js

Step 2 - import and use in project

    import Picker from 'react-native-picker-js'
    
    <Picker
        style={{
            height: 300
        }}
        showDuration={300}
        showMask={true}
        pickerData={}//picker`s value List
        selectedValue={}//default to be selected value
        onPickerDone={}//when confirm your choice
    />

Notice

support two modes:

1. parallel: such as time picker, wheels have no connection with each other

2. cascade: such as date picker, address picker .etc, when front wheel changed, the behind wheels will all be reset

parallel:

• single wheel:

    pickerData = [1,2,3,4];
    selectedValue = 3;

• two or more wheel:

    pickerData = [
        [1,2,3,4],
        [5,6,7,8],
        ...
    ];
    selectedValue = [1, 5];

cascade:

• two wheel

    pickerData = {
        {
            a: [1,2,3,4],
            b: [5,6,7,8],
            ...
        }
    };
    selectedValue = ['a', 2];

• three wheel

    pickerData = {
        a: {
            a1: [1,2,3,4],
            a2: [5,6,7,8],
            a3: [9,10,11,12]
        },
        b: {
            b1: [1,2,3,4],
            b2: [5,6,7,8],
            b3: [9,10,12,12]
        }
        ...
    };
    selectedValue = ['a', 'a1', 1];