A Native Picker with high performance.

Overview

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

Comments
  • 「iOS」RN与原生混合开发,从原生环境切到RN后,点击弹出的Picker却在Native环境打开?!

    「iOS」RN与原生混合开发,从原生环境切到RN后,点击弹出的Picker却在Native环境打开?!

    场景: 做了个地域选择级联,然后比如用户编辑放到RN环境,当从原生切到RN后,点击地域选择,结果发现Picker打开在切换前的原生界面里,在RN后面。……是初始化的时间点不对么?

    简单说来就是直接在RN环境调用Picker显示ok;从原生切到RN后再调用,Picker却打开在了原生环境下。("react-native-picker": "^4.0.2")

    不确定原因,看看有人碰到类似情况没有。

    这里有个参考: https://segmentfault.com/a/1190000005761357

    我再试试那个「For pure javascript version -> v3.0.5」


    更新:

    1. 最后,还是「For pure javascript version -> v3.0.5」好使;
    2. "react-native-picker": "^4.0.2" 用作地域级联选择时,如果是二级级联,第二级选择貌似有个问题,就是点选不中目标城市,总是跳回第一项,不知是否为个别问题。临时取巧解决办法是构造三级级联数据结构,让中间那级唯一显示固定地区或空白
    opened by zhangwebb 28
  • Cannot read property '_init' of undefined

    Cannot read property '_init' of undefined

    I created a new RN-app from scratch (currently 0.34.1) and got this error in title.

    What i've done:

    react-native init pickerApp
    cd pickerApp
    npm install --save react-native-picker
    react-native link
    
    

    Code:

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    import Picker from 'react-native-picker'
    
    class pickerApp extends Component {
    
      constructor(props) {
        super(props)
    
        let data = [];
        for(var i=0;i<100;i++){
            data.push(i);
        }
    
        console.log(Picker)
        Picker.init({
            pickerData: data,
            selectedValue: [59],
            onPickerConfirm: data => {
                console.log(data);
            },
            onPickerCancel: data => {
                console.log(data);
            },
            onPickerSelect: data => {
                console.log(data);
            }
        });
    
        Picker.show();
      }
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.ios.js
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
    
    
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    AppRegistry.registerComponent('pickerApp', () => pickerApp);
    

    It is notable that "console.log(Picker)" will indeed print out a valid object having all the methods mentioned in the document. Has something fundamental changed here?

    Also, when i would render it in render-function like this:

    <Picker ....props> </Picker>

    an exception is thrown stating "Element type is invalid: expected a string (for built-in compoonents) or a class/function....

    opened by itinance 26
  • Support value objects

    Support value objects

    Hi,

    Me again. :) One great feature for this plugin would be the ability to pass in an object:

    [
      {
        label: 'One'
        value: 1,
      },
      {
        label: 'Two'
        value: 2,
      },
      {
        label: 'Two'
        value: 3,
      },
    ],
    

    Then be able to specify a selector to use as the label that is shown to the user. When selected, the entire object would be returned. This way you could have hidden data in the selector.

    opened by jimthedev 15
  • Add elevation prop

    Add elevation prop

    Hello,

    Would it be possible for you to add the elevation prop on Android? When using Material Design, some buttons have a higher elevation and they appear on top of the picker.

    Thanks so much

    opened by Taakn 12
  • Wrong height when init-ing more than once, with a different height.

    Wrong height when init-ing more than once, with a different height.

    I'm using the picker in 2 different places in my code, and basically the only thing that changes is the pickerData I pass to it.

    When the picker opens up for the first time all looks good: screen shot 2017-12-14 at 20 34 36

    but when the picker opens up the second time, the title bar is hidden: screen shot 2017-12-14 at 20 34 29

    I'm using: react-native-picker: 4.3.0 react-native: 0.49.5

    and that ONLY happens on Android! (Not on iOS)

    opened by SudoPlz 10
  • 2 Fatal Exception: PickerViewModule.java

    2 Fatal Exception: PickerViewModule.java

    PickerViewModule.java line 354 com.beefe.picker.PickerViewModule.hide

    Info:

    • ReactNative: 0.39.2
    • Platform: Android
    • Device: HTV32
    • Android OS: 6.0.1
    • Rooted: false

    StackTrace:

    Fatal Exception: java.lang.IllegalArgumentException: View=com.android.internal.policy.PhoneWindow$DecorView{825e8d8 V.E...... R....... 0,0-1440,974} not attached to window manager
           at android.view.WindowManagerGlobal.findViewLocked(WindowManagerGlobal.java:424)
           at android.view.WindowManagerGlobal.removeView(WindowManagerGlobal.java:350)
           at android.view.WindowManagerImpl.removeViewImmediate(WindowManagerImpl.java:116)
           at android.app.Dialog.dismissDialog(Dialog.java:362)
           at android.app.Dialog.dismiss(Dialog.java:345)
           at com.beefe.picker.PickerViewModule.hide(PickerViewModule.java:354)
           at java.lang.reflect.Method.invoke(Method.java)
           at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
           at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
           at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
           at android.os.Handler.handleCallback(Handler.java:739)
           at android.os.Handler.dispatchMessage(Handler.java:95)
           at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
           at android.os.Looper.loop(Looper.java:168)
           at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
           at java.lang.Thread.run(Thread.java:818)
    

    PickerViewModule.java line 334 com.beefe.picker.PickerViewModule._init

    Info:

    • ReactNative: 0.39.2
    • Platform: Android
    • Device: AIRIS TM5QWM
    • Android OS: 4.4.2
    • Rooted: true

    StackTrace:

    Fatal Exception: android.view.WindowManager$BadTokenException: Unable to add window -- token [email protected] is not valid; is your activity running?
           at android.view.ViewRootImpl.setView(ViewRootImpl.java:640)
           at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:261)
           at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:69)
           at android.app.Dialog.show(Dialog.java:286)
           at com.beefe.picker.PickerViewModule._init(PickerViewModule.java:334)
           at java.lang.reflect.Method.invokeNative(Method.java)
           at java.lang.reflect.Method.invoke(Method.java:515)
           at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
           at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
           at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
           at android.os.Handler.handleCallback(Handler.java:808)
           at android.os.Handler.dispatchMessage(Handler.java:103)
           at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
           at android.os.Looper.loop(Looper.java:193)
           at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
           at java.lang.Thread.run(Thread.java:841)
    
    opened by BeckZero 7
  • something went wrong

    something went wrong

    While I use the Picker , something happened like this

              <TouchableOpacity style={{height: 40, flex: 1}} onPress={this._onPressHandle.bind(this)}>
                <Text>点我</Text>
              </TouchableOpacity>
              <Picker
                ref={picker => this.picker = picker}
                pickerHeight={300}
                showDuration={300}
                showMask={true}
                pickerData={['Hello', 'world']} //picker`s value List
                selectedValue ={'world'}
                onPickerDone={(pickedValue) => {
                console.log(pickedValue) }
              }/> //default to be selected value
    

    Above all is my demo , anything wrong ? (function _onPressHandle is ok)

    opened by poberwong 7
  • add ability to cancel the picker by tapping in the rest of the screen

    add ability to cancel the picker by tapping in the rest of the screen

    On iOS when a picker is activated, you can tap outside of the picker and it will cancel the picker. This would be a nice feature if we could put a transparent TouchableNoFeedback that cancels the picker when clicked.

    opened by jimthedev 7
  • Done button hidden if loaded in landscape

    Done button hidden if loaded in landscape

    Hi there. Great plugin! I've located what I think is a bug. Specifically it happens if you have a device in landscape when you open the app but later rotate into portrait. It happens on both iOS and Android.

    Here is a shot of the problem in action:

    screen shot 2016-02-16 at 4 45 54 pm

    opened by jimthedev 7
  • 如何使用react-native-picker做一个地区选择组件?

    如何使用react-native-picker做一个地区选择组件?

    <Picker ref={(cpicker) => {this.cpicker = cpicker}} pickerHeight={300} showDuration={300} pickerData = {pickerData} selectedValue = {3} onPickerDone={()=>(ToastAndroid.show(????, ToastAndroid.SHORT))}//when confirm your choice />

    opened by mvpdream 7
  • undefined is not an object (evaluating 'Picker._init'). on iOS and Android, with Expo Project

    undefined is not an object (evaluating 'Picker._init'). on iOS and Android, with Expo Project

    发生undefined is not an object (evaluating 'Picker._init'). init: index.js:33:15 两个操作系统都有这个问题。 使用在Expo project里。已经执行了react-native link,但是问题还是存在。请问有任何办法吗?

    opened by kevinscience 6
  • could not find method compile() for arguments

    could not find method compile() for arguments

    how do i update my react-native-picker, no matter how many times i install the compile doesn't change to implementation dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') compile 'com.facebook.react:react-native:+' } and i cant manually change it because when i use eas build, it reverts my changes. my entire project is stopped because of this, please help

    opened by Arnav7501 0
  • android运行报错

    android运行报错

    日志:

    06-06 09:38:57.633 25770 25895 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules 06-06 09:38:57.633 25770 25895 E AndroidRuntime: Process: com.grgbanking.nuwa, PID: 25770 06-06 09:38:57.633 25770 25895 E AndroidRuntime: java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at java.util.ArrayList.get(ArrayList.java:437) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at com.beefe.picker.view.PickerViewLinkage$4.onItemSelected(PickerViewLinkage.java:343) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at com.beefe.picker.view.OnItemSelectedRunnable.run(OnItemSelectedRunnable.java:13) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:900) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:103) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at android.os.Looper.loop(Looper.java:219) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:232) 06-06 09:38:57.633 25770 25895 E AndroidRuntime: at java.lang.Thread.run(Thread.java:929)

    环境:

    info React Native Environment Info: System: OS: macOS 11.2.3 CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz Memory: 25.95 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 22, 23, 25, 26, 27, 28, 29, 30 Build Tools: 23.0.1, 23.0.3, 26.0.3, 27.0.3, 28.0.1, 28.0.3, 29.0.2, 29.0.3, 30.0.2 System Images: android-23 | Android TV ARM EABI v7a, android-23 | Android TV Intel x86 Atom, android-23 | Android Wear ARM EABI v7a, android-23 | Android Wear Intel x86 Atom, android-26 | Intel x86 Atom_64 IDEs: Android Studio: 3.6 AI-192.7142.36.36.6392135 Xcode: 12.5/12E262 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.5 => 0.59.5

    opened by Jeijie 0
  • Compiling failed because targetSdkVersion is too low

    Compiling failed because targetSdkVersion is too low

    The following is recommended :

    apply plugin: 'com.android.library'
    
    android {
        compileSdkVersion 31
        defaultConfig {
            minSdkVersion 16
            targetSdkVersion 31
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        implementation fileTree(include: ['*.jar'], dir: 'libs')
        implementation 'com.facebook.react:react-native:+'
    }
    
    
    opened by hailiangcock 1
  • TypeError: undefined is not an object (evaluating '_reactNativePicker.Picker.init

    TypeError: undefined is not an object (evaluating '_reactNativePicker.Picker.init

    I'm using react-native 0.63

    facing this issue :TypeError: undefined is not an object (evaluating '_reactNativePicker.Picker.init

    Please help me.

    Thanks

    opened by raginisahu 0
  • fontSize改大会遮挡住toolbar

    fontSize改大会遮挡住toolbar

    • 当运行项目时,如果打开过picker,再次打开时如果修改fontSize使其变大,内容区也会变大,但是picker整体高度不变,所以toolbar就会被挡住;反之fontSize变小的话内容区和toolbar之间会有个空白区间。看起来好像是picker的高度只会根据第一次打开的高度固定的问题。
    • 试过加上 pickerFontFamily: Platform.OS === 'ios' ? 'System Font' : 'Roboto-Regular' 也无法解决
    • 有什么办法解决toolbar被遮挡的问题吗?或者怎么改变picker的高度?
    opened by zlh-Daisy 0
Releases(v4.0.3)
Owner
beefe
beefe
High performance listview for React Native and web!

RecyclerListView If this project has helped you out, please support us with a star ?? . This is a high performance listview for React Native and Web w

Flipkart 4.6k Dec 7, 2022
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Marco Cesarato 436 Dec 5, 2022
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

react-native-curved-bottom-bar A high performance, beautiful and fully customizable curved bottom navigation bar for React Native. Getting started

Hoà Phan 236 Nov 27, 2022
High-performance React Native Graphics using Skia

@shopify/react-native-skia Checkout the full documentation here. React Native Skia brings the Skia Graphics Library to React Native. Skia serves as th

Shopify 4.5k Dec 7, 2022
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 306 Nov 4, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 337 Nov 30, 2022
Expo Music Picker - A music picker library for React Native

A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library.

Bartłomiej Klocek 59 Nov 17, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 173 Nov 25, 2022
The high-quality iOS native search bar for react native.

React Native Search Bar The high-quality native search bar for react native. Getting Started This is a native library. It does not work with expo or c

Zhao Han 835 Dec 3, 2022
A lightweight, simple, and high-performing chessboard for React Native

???? React Native Chessboard A lightweight, simple, and high-performing chessboard for React Native. Deeply inspired by the Chess Youtube Episode from

Enzo Manuel Mangano 20 Nov 1, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 976 Dec 6, 2022
Performance oriented React Native Phone Number Input with typings and proper validation for any country

React Native Phone Number Input Performance oriented React Native Phone Number Input with typings and proper validation for any country. Made with ❤️

Anurag Garg 268 Dec 7, 2022
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

LawnStarter Organization 1.6k Nov 26, 2022
react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

react-native-select-dropdown react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for and

Adel Reda 171 Dec 4, 2022
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.

react-native-display This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app per

null 208 Oct 31, 2022
An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View React Native Module to select item picker modal. Created by Pankod An alternative to Picker and PickerIOS components wi

Pankod 195 Nov 26, 2022
A react-native dropdown/picker/selector component for both Android & iOS.

react-native-modal-dropdown A react-native dropdown/picker/selector component for both Android & iOS. Features Pure JS. Compatible with both iOS and A

Rex Rao 1.2k Nov 18, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 398 Nov 11, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 353 Nov 23, 2022