Nefariously Programmed Mecha

    react-native-picker
    TypeScript icon, indicating that this package has built-in type declarations

    4.3.7 • Public • Published

    react-native-picker

    npm version dependency status

    ui3 ui4

    Documentation

    Params

    Key Type Default Support Description
    isLoop Boolean false Android
    pickerTextEllipsisLen number 6 Android
    pickerConfirmBtnText string confirm iOS/Android
    pickerCancelBtnText string cancel iOS/Android
    pickerTitleText string pls select iOS/Android
    pickerConfirmBtnColor array [1, 186, 245, 1] iOS/Android
    pickerCancelBtnColor array [1, 186, 245, 1] iOS/Android
    pickerTitleColor array [20, 20, 20, 1] iOS/Android
    pickerToolBarBg array [232, 232, 232, 1] iOS/Android
    pickerBg array [196, 199, 206, 1] iOS/Android
    pickerToolBarFontSize number 16 iOS/Android
    wheelFlex array [1, 1, 1] iOS/Android
    pickerFontSize number 16 iOS/Android
    pickerFontColor array [31, 31, 31, 1] iOS/Android
    pickerFontFamily string iOS/Android
    pickerRowHeight number 24 iOS
    pickerData array iOS/Android
    selectedValue array iOS/Android
    onPickerConfirm function iOS/Android
    onPickerCancel function iOS/Android
    onPickerSelect function iOS/Android

    Methods

    Key Support Description
    init iOS/Android init and pass parameters to picker
    toggle iOS/Android show or hide picker
    show iOS/Android show picker
    hide iOS/Android hide picker
    select iOS/Android select a row
    isPickerShow iOS/Android get status of picker, return a boolean

    Usage

    Step 1 - install

        npm install react-native-picker --save

    Step 2 - link

        react-native link
    

    Step 3 - import and use in project

    import Picker from 'react-native-picker';
    let data = [];
    for(var i=0;i<100;i++){
        data.push(i);
    }
     
    Picker.init({
        pickerData: data,
        selectedValue: [59],
        onPickerConfirm: data => {
            console.log(data);
        },
        onPickerCancel: data => {
            console.log(data);
        },
        onPickerSelect: data => {
            console.log(data);
        }
    });
    Picker.show();
        

    Integration With Existing Apps (iOS)

    The Podfile will like below:

    platform :ios, '8.0'
    target 'YourTarget' do
        pod 'React', :path => '../YOUR_REACT_NATIVE_PROJECT/node_modules/react-native', :subspecs => [
        'Core',
        ...
        ]
        pod 'Picker', :path => '../YOUR_REACT_NATIVE_PROJECT/node_modules/react-native-picker'
    end

    After you have updated the Podfile of the existing app, you can install react-native-picker like below:

    $ pod install

    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: [11, 22, 33, 44]
                },
                {
                    b2: [55, 66, 77, 88]
                },
                {
                    b3: [99, 1010, 1111, 1212]
                }
            ]
        },
        {
            c: [
                {
                    c1: ['a', 'b', 'c']
                },
                {
                    c2: ['aa', 'bb', 'cc']
                },
                {
                    c3: ['aaa', 'bbb', 'ccc']
                }
            ]
        },
        ...
    ]

    For pure javascript version -> v3.0.5

    Keywords

    none

    Install

    npm i react-native-picker

    DownloadsWeekly Downloads

    4,008

    Version

    4.3.7

    License

    MIT

    Unpacked Size

    155 kB

    Total Files

    36

    Last publish

    Collaborators

    • zooble