Novel Personal Mantras

    react-native-picker-js

    1.1.2 • Public • Published

    react-native-picker-js

    npm version dependency status

    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

    ui

    ui2

    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];

    Install

    npm i react-native-picker-js

    DownloadsWeekly Downloads

    22

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • jarvisluong