Skip to content

beefe/react-native-picker

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

As `compile` is removed with gradle 7 so now uses `implementation`.
6fa89e9

Git stats

Files

Permalink
Failed to load latest commit information.

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