🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

Overview

react-native-picker-select

npm version npm downloads Test Coverage CircleCI

A Picker component for React Native which emulates the native <select> interfaces for iOS and Android

For iOS, by default we are wrapping an unstyled TextInput component. You can then pass down styles to customize it to your needs.

For Android, by default we are using the native Picker component. If you prefer, you can set useNativeAndroidPickerStyle to false, which will also render an unstyled TextInput component. You can then pass down styles to customize it to your needs.

For either platform, you can alternatively pass down a child element of your choice that will be wrapped in a touchable area.

iOS Example Android Example

View examples on snack.expo.io

Getting Started

Installing

npm install react-native-picker-select

# React Native users
npm install @react-native-picker/picker
npx pod-install

# Expo
expo install @react-native-picker/picker

Basic Usage

import RNPickerSelect from 'react-native-picker-select';

export const Dropdown = () => {
    return (
        <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={[
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]}
        />
    );
};

Versioning

Version Notes
>= 8.0.0 Uses @react-native-picker/picker. React Native 0.60 or above. If using Expo, SDK38 or above.
>= 3.0.0 React v16.3 or above.
< 3.0.0 React v16.2 or below.

Props

Name Description Details
onValueChange Callback which returns value, index required
function
items The items for the component to render
- Each item should be in the following format:
{label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel: 'Orange!'}
- label and value are required
- key, color, and inputLabel are optional
- key will be set to equal label if not included
- value can be any data type
- If inputLabel exists, the TextInput will display that value instead of the label
required
array
placeholder - An override for the default placeholder object with a label of Select an item... and a value of null
- An empty object can be used if you'd like to disable the placeholder entirely
object
disabled Disables interaction with the component boolean
value Will attempt to locate a matching item from the items array by checking each item's value property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. any
itemKey Will attempt to locate a matching item from the items array by checking each item's key property. If found, it will update the component to show that item as selected. If the key is not found, it will attempt to find a matching item by value as above. string, number
style Style overrides for most parts of the component.
More details in styling
object
pickerProps Additional props to pass to the Picker (some props are used in core functionality so use this carefully) object
Icon Custom icon component to be rendered.
More details in styling
Component
textInputProps Additional props to pass to the TextInput (some props are used in core functionality so use this carefully). This is iOS only unless useNativeAndroidPickerStyle={false}. object
touchableWrapperProps Additional props to pass to the touchable wrapping the TextInput (some props are used in core functionality so use this carefully) object
onOpen
Callback triggered right before the opening of the picker
Not supported when useNativeAndroidPickerStyle={true}
function
useNativeAndroidPickerStyle
Android only
The component defaults to using the native Android Picker in its un-selected state. Setting this flag to false will mimic the default iOS presentation where a tappable TextInput is displayed.
More details in styling
boolean
fixAndroidTouchableBug
Android only
Experimental flag to fix issue #354 boolean
InputAccessoryView
iOS only
Replace the InputAcessoryView section (bar with tabbing arrown and Done button) of the opened picker with your own custom component. Can also return null here to hide completely. While this bar is typical on select elements on the web, the interface guidelines does not include it. View the snack to see examples on how this can be customized. Component
doneText
iOS only
"Done" default text on the modal. Can be overwritten here string
onUpArrow / onDownArrow
iOS only
Presence enables the corresponding arrow
- Closes the picker
- Calls the callback provided
function
onDonePress
iOS only
Callback when the 'Done' button is pressed function
onClose
iOS only
Callback triggered right before the closing of the picker function
modalProps
iOS only
Additional props to pass to the Modal (some props are used in core functionality so use this carefully) object
touchableDoneProps
iOS only
Additional props to pass to the Done touchable (some props are used in core functionality so use this carefully) object

Styling

All properties mentioned below must be nested under the style prop. Examples of different styling options can be found on the example snack.

iOS-specific

  • The component wraps a TextInput without styling. You can target the TextInput styling with inputIOS.
  • Other styles that can be modified for iOS are named inputIOSContainer, placeholder, viewContainer, chevronContainer, chevron, chevronUp, chevronDown, chevronActive, done, modalViewTop, modalViewMiddle, and modalViewBottom

Android-specific

  • The native Picker in its inactive state acts looks similar to a TextInput, but it has limitations on custom styling. Any styling that is possible can be applied via inputAndroid.
  • You can add some styling customization to the active-state native Picker, but that requires modifying some xml files
  • If you set the prop useNativeAndroidPickerStyle to false, the component will allow a few other style objects: inputAndroidContainer, placeholder, and inputAndroid
  • Other styles that can be modified for Android are named headlessAndroidContainer and viewContainer

Web-specific

  • The component creates a select tag
  • The styling of this select tag can be modified using a nested object with the key inputWeb

Icon

  • If a component is passed in via the Icon prop - it will be rendered with { position: 'absolute', right: 0 } applied to its wrapping container. You can modify these values and add additional spacing to position the icon as needed by modifying iconContainer. You'll probably also want to add some paddingRight to your input styling to avoid any longer text appearing behind the icon.
  • You can pass a component of your choosing (css, image, svg, etc..) for use as the icon. For ease of use, consider a library such as react-native-shapes or react-native-vector-icons.
  • Examples of different icons and their usage can be found on the example snack.

Accessibility

If you need to add accessibility props to the rendered component, you may use pickerProps and touchableWrapperProps to pass these through.

pickerProps accepts an object of props that get passed directly to the native <Picker /> component. touchableWrapperProps also accepts an object of props, but this gets passed to a <TouchableOpacity /> that toggles the visibility of the picker.*note: touchableWrapperProps is not supported on web or when useNativeAndroidPickerStyle={true}

Accessibility Example

In the example below, we render the picker with supplementary description text, but for screen readers, we omit this by passing just the title to the accessibilityLabel prop.

const selectedItem = {
    title: 'Selected item title',
    description: 'Secondary long descriptive text ...',
};

export const Dropdown = () => {
    return (
        <RNPickerSelect
            pickerProps={{
                accessibilityLabel: selectedItem.title,
            }}
        >
            <Text>{selectedItem.title}</Text>
            <Text>{selectedItem.description}</Text>
        </RNPickerSelect>
    );
};

Testing

Test suite included. This component has been used and tested since React Native v0.51.

BrowserStack

License

react-native-picker-select is MIT licensed and built with ❤️ in Austin, TX by the team at LawnStarter

Issues
  • Invariant Violation: requireNativeComponent

    Invariant Violation: requireNativeComponent "RNCPicker" was not found in the UIManager

    RNCPicker was not found in the UIManager
    This happened when I moved to latest version 8.0.0

    To Reproduce
    (I din't try this in a new project, but here is what I did) Steps to reproduce the behavior:

    1. Update react-native-picker-select to 8.0.0
    2. rm -rf node_modules && yarn cache clean && yarn install
    3. cd ios && pod install
    4. run the IOS build
    5. Launch the open and click on RNPickerSelect component

    Expected behavior
    To behave like it was in the previous version

    Screenshots
    Screenshot 2020-08-06 at 02 07 33

    Additional details

    • Device: iPhone11
    • OS: iOS13.6
    • react-native-picker-select version: 8.0.0
    • react-native version: 0.61.5

    Reproduction and/or code sample

    <RNPickerSelect
       placeholder={{ label: this.props.placeholderText, value: null }}
       items={this.props.items}
       onValueChange={this.props.onValueChange}
       style={{ ...this.pickerSelectStyles() }}
       value={this.props.selectedValue}
    />
    
    opened by Kamalnrf 55
  • Cannot update component inside function

    Cannot update component inside function

    I have a standard Picker with Hooks updating the component.

    The hook is updated in a useeffect, the initial component is set waiting on the useeffect and then hits this warning. If I stick to RNC/Picker

                            <RNPickerSelect
                                onValueChange={(value) => handleStuff(value)}
                                placeholder={{ label: 'Select Stuff' }}
                                value={gStuff}
                                style={pickerSelectStyles}
                                pickerProps={styles.rnPickerProps}
                                useNativeAndroidPickerStyle={false}
                                items={Stuff} />
                        </View>
    

    Describe the bug
    Cannot Update a component from inside the function body of a different component.

    Again, a very standard picker. Set a useState, update and show component. This is a new warning which is concerning. I thought hooks were supposed to work this way.

    Additional details

    • Android Moto G6
    • OS: Android
    • react-native-picker-select version: 8.0
    • react-native version: latest
    • expo sdk version: none
    opened by dl-husky73 22
  • Cannot call this.inputRefs.picker.togglePicker() on Android

    Cannot call this.inputRefs.picker.togglePicker() on Android

    I am using your example on an Android and noticed that I cannot call 'this.inputRefs.picker.togglePicker() ' to the reference created in the example. This works perfectly for IOS but not Android.

    enhancement 
    opened by ghost 19
  • Placeholder does not seem to update even if objects are different

    Placeholder does not seem to update even if objects are different

    YOU MUST FILL OUT THE ENTIRE BUG REPORT

    Describe the bug
    I seem to be having issues with updating the placeholder after the component is mounted.

    To Reproduce
    Steps to reproduce the behavior:

    1. Have a managed loading state
    2. Set input to be loading
    3. Have a ternary to switch between placeholders
    4. See error

    Expected behavior
    The placeholder should update to the loading placeholder and back to the given placeholder

    Smartphone (please complete the following information):

    • Device: iPad Mini
    • OS: iOS 12.2
    • react-native-picker-select version: ^6.1.0
    • react-native version: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz
    • react version: 16.5.0

    Reproduction and/or code sample

    Investigation:
    export default class RNPickerSelect extends PureComponent {
        // <snip>
    
        static getDerivedStateFromProps(nextProps, prevState) {
            // <snip>
    
            // update selectedItem if value prop is defined and differs from currently selected item
            const { selectedItem, idx } = RNPickerSelect.getSelectedItem({
                items,
                key: nextProps.itemKey,
                value: nextProps.value,
            });
    
            const selectedItemChanged =
                !isEqual(nextProps.value, undefined) && !isEqual(prevState.selectedItem, selectedItem);
    
            console.log(selectedItem, selectedItemChanged) // <-- Logging here
    
            if (itemsChanged || selectedItemChanged) {
                if (selectedItemChanged) {
                    nextProps.onValueChange(selectedItem.value, idx);
                }
    
                return {
                    ...(itemsChanged ? { items } : {}),
                    ...(selectedItemChanged ? { selectedItem } : {}),
                };
            }
    
            return null;
        }
    
        // <snip>
    }
    
    Output:
    Object {
      "color": "#9EA0A4",
      "label": "Select an item...",
      "value": null,
    } false
    Object {
      "label": "Loading...",
      "value": null,
    } false
    
    JSX:
    <Select
        {...props}
        placeholder={(
            this.isLoading(name)
                ? {
                    label: 'Loading...',
                    value: null,
                }
                : null
        )}
        disabled={disabled}
        value={this.getValue(name)}
        items={options}
        style={{
            inputIOS: newStyle,
            inputAndroid: newStyle,
        }}
        onValueChange={text => call([this.onChange, onChange], { field, text })}
    />
    
    bug 
    opened by dextermb 16
  • [Android] FATAL EXCEPTION java.lang.ArrayIndexOutOfBoundsException

    [Android] FATAL EXCEPTION java.lang.ArrayIndexOutOfBoundsException

    The Android app is crashing when reseting items and value at the same time.

    In my app I have 3 dropdown which depend on each other, every time I try change the value from the first, I need to reset the items and value of the 2 others, and when that happen on Android the app crashed right away.

    Expected behavior
    By clearing the items array and the value, the picker should display the picker without any items.

    Smartphone (please complete the following information):

    • Device: All of them
    • OS: Android
    • react-native-picker-select version: 6.3.0
    • react-native version: 0.60.4
    • react version: 16.8.6

    Logs

    07-30 17:30:34.390	E	unknown	ReactNative: Exception in native call	
    07-30 17:30:34.390	E	unknown	ReactNative: java.lang.ArrayIndexOutOfBoundsException: length=2; index=2	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at java.util.Arrays$ArrayList.get(Arrays.java:3769)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.widget.ArrayAdapter.getItem(ArrayAdapter.java:393)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager$ReactPickerAdapter.getView(ReactPickerManager.java:116)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager$ReactPickerAdapter.getView(ReactPickerManager.java:107)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.widget.Spinner.makeView(Spinner.java:712)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.widget.Spinner.layout(Spinner.java:660)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.widget.AbsSpinner.setSelectionInt(AbsSpinner.java:306)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.widget.AbsSpinner.setSelection(AbsSpinner.java:283)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.views.picker.ReactPicker.commitStagedData(ReactPicker.java:142)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager.onAfterUpdateTransaction(ReactPickerManager.java:80)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager.onAfterUpdateTransaction(ReactPickerManager.java:36)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:47)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:139)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$UpdatePropertiesOperation.execute(UIViewOperationQueue.java:93)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:844)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:952)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue.access$2200(UIViewOperationQueue.java:44)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1012)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.view.Choreographer.doCallbacks(Choreographer.java:761)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.view.Choreographer.doFrame(Choreographer.java:693)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.os.Handler.handleCallback(Handler.java:873)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.os.Handler.dispatchMessage(Handler.java:99)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.os.Looper.loop(Looper.java:193)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at android.app.ActivityThread.main(ActivityThread.java:6669)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at java.lang.reflect.Method.invoke(Native Method)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)	
    07-30 17:30:34.390	E	unknown	ReactNative: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)	
    07-30 17:30:34.393	D	AndroidRuntime	 Shutting down VM	
    07-30 17:30:34.393	E	AndroidRuntime	 FATAL EXCEPTION: main	
    07-30 17:30:34.393	E	AndroidRuntime	 java.lang.ArrayIndexOutOfBoundsException: length=2; index=2	
    07-30 17:30:34.393	E	AndroidRuntime	 	at java.util.Arrays$ArrayList.get(Arrays.java:3769)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.widget.ArrayAdapter.getItem(ArrayAdapter.java:393)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at com.facebook.react.views.picker.ReactPickerManager$ReactPickerAdapter.getView(ReactPickerManager.java:116)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at com.facebook.react.views.picker.ReactPickerManager$ReactPickerAdapter.getView(ReactPickerManager.java:107)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.widget.Spinner.makeView(Spinner.java:712)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.widget.Spinner.layout(Spinner.java:660)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.widget.Spinner.onLayout(Spinner.java:622)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at com.facebook.react.views.picker.ReactPicker.onLayout(ReactPicker.java:98)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.view.View.layout(View.java:20672)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.view.ViewGroup.layout(ViewGroup.java:6194)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at com.facebook.react.views.picker.ReactPicker$2.run(ReactPicker.java:81)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.os.Handler.handleCallback(Handler.java:873)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.os.Handler.dispatchMessage(Handler.java:99)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.os.Looper.loop(Looper.java:193)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at android.app.ActivityThread.main(ActivityThread.java:6669)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at java.lang.reflect.Method.invoke(Native Method)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)	
    07-30 17:30:34.393	E	AndroidRuntime	 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
    
    help wanted 
    opened by elkinjosetm 16
  • Picker style is not working

    Picker style is not working

    RN 0.55.4 "name": "react-native-picker-select", "version": "3.1.1",

    <View style={{flex: 1}} >
        <Text style={{color: '#0082c6', fontSize: 16, fontWeight: 'bold', marginLeft: 5}}>SEXO</Text>
        <RNPickerSelect
            placeholder={{
                label: 'Seu Sexo',
                value: '',
            }}
            items={this.state.items}
            onValueChange={(value) => {
                this.setState({
                    sexo: value,
                });
            }}
            style={{ backgroundColor: '#000' }}
        />  
    </View>
    

    I've tried to change the style to approximate the Picker box to the label "SEXO" but none type of styling is working. How to fix that?

    Image to understand it better: img

    opened by rodrigofbm 15
  • Tried to register two views with the same name AndroidDropdownPicker

    Tried to register two views with the same name AndroidDropdownPicker

    Describe the bug
    Getting error with following message:

    Tried to register two views with the same name AndroidDropdownPicker

    The error seems to be similar to this: https://github.com/react-native-community/react-native-picker/issues/15

    To Reproduce
    Steps to reproduce the behavior: In my project, I have used also this component: import { Picker } from '@react-native-community/picker'; I believe it is a clash between these components. Any way to avoid this error and be able to use both?

    Expected behavior
    Be able to use this component without clashing with other components.

    Screenshots
    "n/a".

    Additional details

    • Device: Android
    • OS: Android 10
    • react-native-picker-select version: 7.0.0
    • react-native version: 0.62.2
    • react version: 16.11.0

    Reproduction and/or code sample

    import React, { useState } from 'react';
    import { StyleSheet, TouchableNativeFeedback, View, Text, Image } from 'react-native';
    import RNPickerSelect from 'react-native-picker-select';
    
    export default function AdminHome({ navigation }) {
        return (
                <View>
                    <RNPickerSelect
                    accessibilityLabel={'gender'}
                        onValueChange={(value) => console.log(value)}
                        items={[
                            { label: 'Football', value: 'football' },
                            { label: 'Baseball', value: 'baseball' },
                            { label: 'Hockey', value: 'hockey' },
                        ]}
                    />
            </View>
        );
    }
    
    duplicate 
    opened by appukuttan-shailesh 14
  • IOS picker bar icons not displaying properly on iPhone 7 Plus, 8 Plus

    IOS picker bar icons not displaying properly on iPhone 7 Plus, 8 Plus

    Followed the docs for installing and functionality seems fine and in smaller screens issue doesn't appear. But on iPhone 7 Plus, 8 Plus and maybe on larger screens (I havn't tried it) does not render the way it should.

    screen shot 2018-08-07 at 11 33 01

    Is this a bug or have I done something wrong / I forgot to do something ?

    opened by maroparo 14
  • Switch to community Picker

    Switch to community Picker

    Fixes: https://github.com/lawnstarter/react-native-picker-select/issues/301

    image

    waiting 
    opened by abumostafa 13
  • Bug: value={this.state.gender} does not reflect gender from onValueChange

    Bug: value={this.state.gender} does not reflect gender from onValueChange

    In following case, when Male or Female selected, the value passed in onValueChange is M or F, and it is set to state correctly by this.setState({gender:value}); but the value={this.state.gender} shows Male or Female, not M or F:

    const placeholder = { label: 'Select a gender...', value: null, color: '#9EA0A4', }; const genders = [ { id: 1, label: 'Male', value: 'M', }, {
    id: 2, label: 'Female', value: 'F', }, ]; <RNPickerSelect placeholder={placeholder} items={genders} onValueChange={(value) => { console.log("valueChange value: ", value); this.setState({ gender: value, }); }} style={pickerSelectStyles} value={this.state.gender} useNativeAndroidPickerStyle={false} ref={(ref) => this.genderRef = ref} />

    Steps to reproduce the behavior:

    1. Go to 'select a gender'
    2. Click on 'select a gender'
    3. Scroll down to select Male
    4. See the "Male" populated in the field, but M is printed out in console, which means the value is M in onValueChange() call.

    Expected behavior
    The field should show M instead of Male

    Smartphone (please complete the following information):

    • Device: [iPhone Simulator 8 plus]
    • OS: [iOS10.1]
    • react-native-picker-select version: [6.0.0]
    • react-native version: [0.57.7]
    • react version: [16.6.1]
    opened by idoor88 13
  • [iOS] Scrolling through items swipes parent modal up and down

    [iOS] Scrolling through items swipes parent modal up and down

    Describe the bug
    I have several pickers in a modal component and everytime I open the picker on iOS and scroll through the list of items, the modal component will reflect the swipe gesture.

    To Reproduce
    Steps to reproduce the behavior:

    1. Put a picker onto a modal component
    2. Open the picker and scroll through the items

    Expected behavior
    The modal component should not reflect the swipe gesture.

    Screenshots
    Here is a video of the issue: https://user-images.githubusercontent.com/12943469/148595036-73535324-fd7d-4671-ba6c-cd831f55a84a.mov

    Additional details

    • Device: iPhone 11
    • OS: 15.0.2
    • react-native-picker-select version: 8.0.4
    • react-native version: 0.65.1

    Reproduction and/or code sample
    import Modal from 'react-native-modal';

    <Modal swipeDirection={['up', 'left', 'right', 'down']} isVisible={true} animationIn="slideInUp" animationOut="slideOutDown"> <View> <RNPickerSelect value={selectedItem?.value} items={items} onValueChange={onValueChanged}/> </View> </Modal>

    opened by FelixBaum 0
  • styles input android

    styles input android

    Hello, I am having a problem with the styles, but it only happens with android devices, as you can see I am assigning font styles and it does not take them, otherwise the iphone that is applying them, I have the useNativeAndroidPickerStyle in true, according to the documentation for these changes to be applied, I attach the images and part of the code, I hope they can help me.

    This is on an iphone Captura de Pantalla 2021-12-14 a la(s) 10 40 16 a  m

    This is on an android Captura de Pantalla 2021-12-14 a la(s) 10 44 39 a  m

    this is the code I have

    Captura de Pantalla 2021-12-14 a la(s) 10 50 04 a  m <RNPickerSelect doneText='Seleccionar' placeholder={{ label: 'Tipo de documento', }} value={formData.type_document} useNativeAndroidPickerStyle={false} onValueChange={(text) => { setData('type_document', text) }}
    style={pickerStyleDocument} items={billing} />

    Captura de Pantalla 2021-12-14 a la(s) 10 49 49 a  m

    const pickerStyleDocument = { inputIOS: { color: '#271938', width: wp('80%'), height: wp('13%'), fontSize: hp(1.75), fontFamily: fontFamily.fontFamilyLight, marginLeft: wp(1) }, placeholder: { color: 'rgba(39,25,56,0.4)', fontSize: wp(4), fontFamily: fontFamily.fontFamilySemiBold, }, inputAndroid: { color: '#271938', width: wp('80%'), height: wp('13%'), fontSize: hp(1.75), fontFamily: fontFamily.fontFamilyLight, }, };

    the version is

    "react-native-picker-select": "8.0.4", "react-native": "0.63.4",

    opened by davidg327 0
  • Can't use custom icon with latest @react-native-picker/picker

    Can't use custom icon with latest @react-native-picker/picker

    Describe the bug

    Upgrading to @react-native-picker/picker's latest version prevents from using a custom icon in Android, because it never hides the original icon.

    To Reproduce
    Steps to reproduce the behavior:

    1. Use something like yarn add @react-native-picker/[email protected]^2.2.1
    2. Run react-native run-android in an app that has the dropdown with a custom icon

    Expected behavior

    Render just the custom icon, just like it does when using an older @react-native-picker/picker version (e.g. 1.9.11).

    Screenshots

    CleanShot 2021-12-01 at 11 35 05@2x

    Additional details

    • Device: Android Emulator, Google Pixel 6 with Android 12
    • react-native-picker-select version: 8.0.4
    • react-native version: 0.65.3
    • expo sdk version: n/a

    Reproduction and/or code sample

    Couldn't figure out a way of creating a snack with @react-native-picker/[email protected]^2.2.1.

    opened by fnando 1
  • Style picker dialog height on Android

    Style picker dialog height on Android

    This is a nice library and works well with IOS. Is it possible to set maxHeight/Height for the picker dialog on Android? I have a long selection list and it will take up almost my whole screen. I tried with headlessAndroidContainer and viewContainer, both not working; and I have set the prop useNativeAndroidPickerStyle to false.

    I also tried to change the style.xml but couldn't make it.

    Thanks in advance!

    Is your feature request related to a problem? Please describe.
    I have a long selection list and it will take up almost my whole screen. I tried with headlessAndroidContainer and viewContainer, both not working; I also tried to set MaxHeight in pickerProps = {{ }}, it only changed the Input box height;

    an example of the long list picker: 1637548464(1)

    Describe the solution you'd like
    I am thinking it would be nice we have a height / maxHeight and maybe also width/maxWidth in the PickerStyle.

    Describe alternatives you've considered

    Additional details
    Add any other details or screenshots about the feature request here.

    opened by flora8984461 0
  • Render Icon depending on current state of picker

    Render Icon depending on current state of picker

    Is your feature request related to a problem? Please describe.
    I want to render different icons for closed and open picker. For example, V for closed state and ^ for open state.

    Describe the solution you'd like
    Replace Icon?: React.ReactNode; with Icon?: (props) => React.ReactNode;

    Describe alternatives you've considered

    Additional details

    opened by indapublic 0
  • set accessibilityLabel for options

    set accessibilityLabel for options

    Hi,

    Great library!

    Do we have to add an accessibilityLabel for the options as well? Now all the options have the same resource-id="android:id/text1".

    I feel it's better if they are unique so we can easily locate them for our automated tests.

    Roy

    opened by roydekleijn 0
  • Setting `useNativeAndroidPickerStyle` to false makes picker unusable on Android

    Setting `useNativeAndroidPickerStyle` to false makes picker unusable on Android

    Describe the bug
    Setting property useNativeAndroidPickerStyle to false on the picker causes the dropdown menu of options to appear and immediately disappear upon pressing the component. This issue does not occur when running the app locally, but affects all Android devices which have installed and run the app. I tried using fixAndroidTouchableBug={true} with no luck.

    To Reproduce
    Versions: "react-native": "0.65.1", "react-native-picker-select": "^8.0.4", "@react-native-picker/picker": "^2.1.0",

    <RNPickerSelect useNativeAndroidPickerStyle={false} style={ { inputAndroid: { color: 'rgba(0, 0, 0, 1)', fontSize: 40 }, } } fixAndroidTouchableBug={true} onValueChange={(value) => dispatch(changeOption(value))} items={[{value: 0, label: 'option1'}, {value: 1, label: 'option2'}]} />

    Expected behavior
    When using your own styling for the component, the options should not disappear immediately after opening, but only disappear whenever a touch-away action is detected or an option is selected.

    Screenshots
    N/a

    Additional details

    • Device: 2016 Galaxy Tab A
    • OS: Android 5.0 Lollipop
    • react-native-picker-select version: 8.0.4
    • react-native version: 0.65.1
    • expo sdk version: 30

    Reproduction and/or code sample
    This seems to work when running on the snack, but upon deploying the app and installing on an android device the bug persists. https://snack.expo.dev/_2EsSY0SX

    opened by jlovoi 0
  • @react-native-picker/picker as a peerDependency to solve duplicate/Invariant violation issue

    @react-native-picker/picker as a peerDependency to solve duplicate/Invariant violation issue

    Problem

    On a fresh install and following the readme steps, you end up with 2 versions of @react-native-picker/picker installed. The one that you install yourself (the readme says to) and the version that's listed in the package.json dependencies.

    This causes the library to crash with this error: image

    sidenote: For me, I had already installed @react-native-picker/picker v2 and was using it before this package. And it was breaking due to this package installing v1 as well. I believe this is a good usecase for peerDependencies.

    Solution

    Move @react-native-picker/picker to peerDependencies in package.json. Keep separate install step in readme.

    opened by Rehubbard 2
  • Add support for iOS dark mode

    Add support for iOS dark mode

    I added a new prop darkTheme to have a dark theme on the picker (only on iOS). I used the same color as the native iOS picker in dark system theme when you open a <select> on the web. I wrote a test with the feature.

    Preview

    Picture

    dark-theme-ios

    Video

    https://user-images.githubusercontent.com/2452603/138324017-8165abd9-2841-4653-8636-5b847eebc8cf.mp4

    Test the feature

    1. Download the codeSandbox repo. I could not make a snack because I use the Appearance API of react-native in the example. To use Appearance, you need to edit the App.json if you use expo, a thing you can't do in a snack. I provided the App.json file in the codeSandbox repo.
    2. npm i && expo start
    3. Open the App with expo and open the picker, change your system theme on iOS then switch back to the App and open the picker again.

    Related issue

    #245

    opened by sarcadass 8
  • Feat/toggle picker android

    Feat/toggle picker android

    This allows to programmatically open the picker on android devices.

    See open Issue.

    opened by JoFlo07 2
Releases(8.0.3)
Owner
LawnStarter Organization
LawnStarter Organization
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 60 Jan 12, 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 301 Jan 19, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 68 Jan 17, 2022
react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

null 3 Dec 21, 2021
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 171 Jan 7, 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 397 Dec 23, 2021
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 330 Jan 15, 2022
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
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.1k Jan 8, 2022
Color picker component for IOS/Android

react-native-color-picker React Native implementation of color picker for both Android and iOS. works both in controlled and uncontrolled way old colo

null 240 Dec 30, 2021
A React-Native datetime-picker for Android and iOS

react-native-modal-datetime-picker A declarative cross-platform react-native date and time picker. This library exposes a cross-platform interface for

Matteo Mazzarolo 2.4k Jan 20, 2022
iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping

react-native-image-crop-picker iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping Result

Ivan Pusic 5.3k Jan 21, 2022
React Native Wrapper of Google Place Picker for iOS + Android.

react-native-google-place-picker React Native Wrapper of Google Place Picker for iOS + Android. iOS Android Table of contents Install iOS Android Usag

ZHANG Tai 181 Nov 27, 2021
React Native Picker Module Android & IOS

React Native Picker Module for Android & IOS With this package you can easily use picker with onPress function. Using react-native-modal and @react-na

Talut TASGIRAN 81 Dec 28, 2021
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.

Country Picker for React Native. iOS Android Web Demo ?? GO TO WEB DEMO ?? snack example Installation $ yarn add react-native-country-picker-modal Bas

Xavier Carpentier 885 Jan 18, 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) 289 Jan 4, 2022
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Jan 16, 2022