@react-native-picker/picker vs react-native-picker-select vs react-native-dropdown-picker vs @react-native-community/picker
React Native Picker and Dropdown Libraries
Search packages..
@react-native-picker/pickerreact-native-picker-selectreact-native-dropdown-picker@react-native-community/pickerSimilar Packages:
React Native Picker and Dropdown Libraries

React Native Picker and Dropdown Libraries are UI components that allow users to select a value from a list. They are essential for forms and user input in mobile applications. These libraries provide customizable, accessible, and touch-friendly dropdown menus that work seamlessly across iOS and Android platforms. They often support features like multi-select, search, and styling to match the app's design.

Npm Package Weekly Downloads Trend
3 Years
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@react-native-picker/picker630,2531,732399 kB250a month agoMIT
react-native-picker-select123,6641,84345.8 kB102a year agoMIT
react-native-dropdown-picker89,9351,038161 kB1653 years agoMIT
@react-native-community/picker8,6181,732-2505 years agoMIT
Feature Comparison: @react-native-picker/picker vs react-native-picker-select vs react-native-dropdown-picker vs @react-native-community/picker

Customization

  • @react-native-picker/picker:

    @react-native-picker/picker offers improved customization features, including the ability to style the picker and its items more extensively, making it more flexible for developers.

  • react-native-picker-select:

    react-native-picker-select is highly customizable, allowing developers to style the picker, use custom components for items, and implement placeholder and done buttons.

  • react-native-dropdown-picker:

    react-native-dropdown-picker allows for extensive customization, including multi-select, custom item rendering, and animated dropdowns, making it highly versatile for modern applications.

  • @react-native-community/picker:

    @react-native-community/picker provides basic customization options such as styling the picker and its items. However, it is limited compared to other libraries.

Multi-Select Support

  • @react-native-picker/picker:

    @react-native-picker/picker also does not support multi-select. It is focused on providing a single-value selection experience.

  • react-native-picker-select:

    react-native-picker-select is primarily a single-select picker but can be extended to support multi-select with custom implementations.

  • react-native-dropdown-picker:

    react-native-dropdown-picker supports multi-select out of the box, allowing users to select multiple items from the dropdown, which is a significant advantage for applications that require this feature.

  • @react-native-community/picker:

    @react-native-community/picker does not support multi-select functionality. It is designed for single-value selection only.

Accessibility

  • @react-native-picker/picker:

    @react-native-picker/picker improves accessibility features compared to its predecessor, ensuring better support for screen readers and keyboard navigation.

  • react-native-picker-select:

    react-native-picker-select is designed with accessibility in mind, providing support for screen readers and customizable accessibility labels.

  • react-native-dropdown-picker:

    react-native-dropdown-picker includes accessibility features but may require additional work to ensure it meets all standards, especially for custom components.

  • @react-native-community/picker:

    @react-native-community/picker follows native accessibility standards, making it usable for people with disabilities. However, it may lack some advanced accessibility features.

Code Example

  • @react-native-picker/picker:

    Basic usage of @react-native-picker/picker

    import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const App = () => {
  const [selectedValue, setSelectedValue] = useState('java');

  return (
    <View>
      <Text>Select a language:</Text>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
        <Picker.Item label="Python" value="python" />
      </Picker>
    </View>
  );
};

export default App;
  • react-native-picker-select:

    Basic usage of react-native-picker-select

    import React, { useState } from 'react';
import { View, Text } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

const App = () => {
  const [selectedValue, setSelectedValue] = useState(null);

  return (
    <View>
      <Text>Select a language:</Text>
      <RNPickerSelect
        onValueChange={(value) => setSelectedValue(value)}
        items={[
          { label: 'Java', value: 'java' },
          { label: 'JavaScript', value: 'js' },
          { label: 'Python', value: 'python' },
        ]}
      />
    </View>
  );
};

export default App;
  • react-native-dropdown-picker:

    Basic usage of react-native-dropdown-picker

    import React, { useState } from 'react';
import { View } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

const App = () => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    { label: 'Java', value: 'java' },
    { label: 'JavaScript', value: 'js' },
    { label: 'Python', value: 'python' },
  ]);

  return (
    <View>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
      />
    </View>
  );
};

export default App;
  • @react-native-community/picker:

    Basic usage of @react-native-community/picker

    import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Picker } from '@react-native-community/picker';

const App = () => {
  const [selectedValue, setSelectedValue] = useState('java');

  return (
    <View>
      <Text>Select a language:</Text>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
        <Picker.Item label="Python" value="python" />
      </Picker>
    </View>
  );
};

export default App;
How to Choose: @react-native-picker/picker vs react-native-picker-select vs react-native-dropdown-picker vs @react-native-community/picker
  • @react-native-picker/picker:

    Select @react-native-picker/picker for a more modern and actively maintained version of the picker component. It offers better performance, accessibility, and customization options, making it suitable for both simple and complex applications.

  • react-native-picker-select:

    Choose react-native-picker-select for a highly customizable picker that supports single and multi-select, as well as placeholder and done buttons. It is great for apps that need more control over the picker’s appearance and behavior.

  • react-native-dropdown-picker:

    Opt for react-native-dropdown-picker if you need a feature-rich dropdown with multi-select capabilities, custom styling, and animations. It is perfect for applications that require more interactive and visually appealing dropdowns.

  • @react-native-community/picker:

    Choose @react-native-community/picker if you need a simple, lightweight picker component that follows native design patterns. It is ideal for projects that require basic functionality without additional dependencies.

Similar Npm Packages to @react-native-picker/picker

@react-native-picker/picker is a versatile and customizable component for selecting values in React Native applications. It provides a native-like experience for users, allowing them to choose from a list of options in a dropdown format. This package is particularly useful for forms and settings where users need to select a single value from a predefined list. With its straightforward API and support for various customization options, @react-native-picker/picker is a popular choice among React Native developers.

However, there are several alternatives available that also provide similar functionality:

  • @react-native-community/picker was the original picker component for React Native before it was moved to the @react-native-picker namespace. While it still functions effectively, it is worth noting that the community has largely shifted towards using the newer @react-native-picker/picker package for ongoing support and updates. If you are maintaining an older project, you might still encounter this package, but for new projects, it is advisable to use @react-native-picker/picker.

  • react-native-dropdown-picker is another alternative that provides a customizable dropdown component for React Native applications. It allows for multi-select options and comes with features such as search functionality, theming, and the ability to customize styles. This package is ideal for developers looking for a more feature-rich dropdown experience that goes beyond simple selection.

  • react-native-picker-select is a lightweight and customizable picker component that allows for single or multi-select options. It supports both iOS and Android platforms and provides a simple API for integration. react-native-picker-select is particularly useful for developers who want a straightforward solution that can easily be styled and integrated into their applications.

To explore how these packages compare, visit the following link: Comparing @react-native-community/picker vs @react-native-picker/picker vs react-native-dropdown-picker vs react-native-picker-select.

Similar Npm Packages to react-native-picker-select

react-native-picker-select is a customizable select input component for React Native applications. It provides a simple and flexible way to create dropdowns that can be styled to match the look and feel of your app. With support for both iOS and Android platforms, react-native-picker-select allows developers to easily implement selection inputs in their mobile applications. It also supports various features such as placeholder text, custom styles, and the ability to handle multiple selections.

While react-native-picker-select is a robust choice for dropdowns in React Native, there are other libraries available that offer similar functionality. Here are a few alternatives:

  • react-native-dropdown-picker is a versatile dropdown component that allows for easy customization and supports multi-select functionality. It provides a rich set of features, including the ability to customize the dropdown's appearance, manage open and close states, and handle various events. If you need a more feature-rich dropdown solution with multi-select capabilities, react-native-dropdown-picker is an excellent option.
  • react-native-modal-selector is another alternative that provides a modal-based selector for React Native applications. This library allows you to create a customizable modal that displays a list of options for users to select from. It is particularly useful for applications that require a clean and user-friendly way to present selection options. If you prefer a modal interface for your dropdowns, react-native-modal-selector is a great choice.

To see how react-native-picker-select compares with react-native-dropdown-picker and react-native-modal-selector, check out the comparison: Comparing react-native-dropdown-picker vs react-native-modal-selector vs react-native-picker-select.

Similar Npm Packages to react-native-dropdown-picker

react-native-dropdown-picker is a customizable dropdown component for React Native applications. It provides an easy way to create dropdown menus that can be used for selecting items from a list. With features like multi-select, search functionality, and customizable styles, react-native-dropdown-picker is a popular choice for developers looking to enhance their user interfaces with dropdown selections.

One notable alternative to react-native-dropdown-picker is react-native-picker-select. This library offers a simple and customizable picker component for React Native applications. It allows developers to create dropdowns that can be styled to fit the design of their applications. react-native-picker-select is particularly useful for those who prefer a straightforward API and want to integrate a picker without the additional features that react-native-dropdown-picker provides.

Both libraries serve the purpose of creating dropdowns in React Native applications, but they cater to different needs. While react-native-dropdown-picker offers more advanced features like multi-select and search, react-native-picker-select focuses on simplicity and ease of use.

For a detailed comparison of these packages, check out: Comparing react-native-dropdown-picker vs react-native-picker-select.

Similar Npm Packages to @react-native-community/picker

@react-native-community/picker is a component for selecting items from a dropdown list in React Native applications. It provides a simple and customizable way to create dropdown menus, allowing users to select from a list of options. While this package has been widely used, there are several alternatives in the React Native ecosystem that offer similar functionality. Here are a few noteworthy alternatives:

  • @react-native-picker/picker is a maintained version of the original picker component that has been moved under the React Native community. It provides a more consistent and updated API, along with improved performance and accessibility features. If you are looking for a reliable and community-supported picker component, this is a great choice that builds on the foundation of the original package.
  • react-native-dropdown-picker is a flexible and customizable dropdown component that allows for multi-select options, search functionality, and more. It is designed to be easy to use and integrate into your React Native applications. If you need a dropdown that offers more features and customization options, react-native-dropdown-picker is an excellent alternative.
  • react-native-picker-select is another popular option that provides a simple way to create dropdowns with a native feel. It supports custom styling, placeholder text, and the ability to handle both single and multi-select options. If you are looking for a straightforward and lightweight solution for dropdowns in your React Native app, react-native-picker-select is worth considering.
  • react-native-select-dropdown is a highly customizable dropdown component that allows for easy selection of options. It supports features like search, custom styles, and the ability to handle multiple selections. If you want a dropdown component that is both feature-rich and easy to implement, react-native-select-dropdown is a solid choice.

To see how these packages compare, check out the comparison: Comparing @react-native-community/picker vs @react-native-picker/picker vs react-native-dropdown-picker vs react-native-picker-select vs react-native-select-dropdown.

README for @react-native-picker/picker

@react-native-picker/picker

npm version Build Supports Android, iOS, MacOS, and Windows MIT License Lean Core Extracted

AndroidiOSPickerIOS
WindowsMacOS

Supported Versions

@react-native-picker/pickerreact-nativereact-native-windows
>= 2.0.00.61+0.64+
>= 1.16.00.61+0.61+
>= 1.2.00.60+ or 0.59+ with JetifierN/A
>= 1.0.00.57N/A

Getting started

$ npm install @react-native-picker/picker --save

or

$ yarn add @react-native-picker/picker

For React Native v0.60 and above (Autolinking)

As react-native@0.60 and above supports autolinking there is no need to run the linking process. Read more about autolinking here. This is supported by react-native-windows@0.64 and above.

iOS

CocoaPods on iOS needs this extra step:

npx pod-install

Android

No additional step is required.

Windows (expand for details)

Windows

Usage in Windows without autolinking requires the following extra steps:

Add the ReactNativePicker project to your solution.
  1. Open the solution in Visual Studio 2019
  2. Right-click Solution icon in Solution Explorer > Add > Existing Project Select D:\dev\RNTest\node_modules\@react-native-picker\picker\windows\ReactNativePicker\ReactNativePicker.vcxproj
windows/myapp.sln

Add a reference to ReactNativePicker to your main application project. From Visual Studio 2019:

Right-click main application project > Add > Reference... Check ReactNativePicker from Solution Projects.

app.cpp

Add #include "winrt/ReactNativePicker.h" to the headers included at the top of the file.

Add PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); before InitializeComponent();.

MacOS

CocoaPods on MacOS needs this extra step (called from the MacOS directory)

pod install
React Native below 0.60 (Link and Manual Installation)

The following steps are only necessary if you are working with a version of React Native lower than 0.60

Mostly automatic installation

$ react-native link @react-native-picker/picker

Manual installation

iOS

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ @react-native-picker/picker and add RNCPicker.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project's Build Phases ➜ Link Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open application file (android/app/src/main/java/[...]/MainApplication.java)
  • Add import com.reactnativecommunity.picker.RNCPickerPackage; to the imports at the top of the file
  • Add new RNCPickerPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle: 
    include ':@react-native-picker_picker'
project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-picker/picker/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle: 
      implementation project(path: ':@react-native-picker_picker')

MacOS

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ @react-native-picker/picker and add RNCPicker.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project's Build Phases ➜ Link Binary With Libraries
  4. Run your project (Cmd+R)<

RTL Support

you need to add android:supportsRtl="true" to AndroidManifest.xml

   <application
      ...
      android:supportsRtl="true">

Usage

Import Picker from @react-native-picker/picker:

import {Picker} from '@react-native-picker/picker';

Create state which will be used by the Picker:

const [selectedLanguage, setSelectedLanguage] = useState();

Add Picker like this:

<Picker
  selectedValue={selectedLanguage}
  onValueChange={(itemValue, itemIndex) =>
    setSelectedLanguage(itemValue)
  }>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

If you want to open/close picker programmatically on android (available from version 1.16.0+), pass ref to Picker:

const pickerRef = useRef();

function open() {
  pickerRef.current.focus();
}

function close() {
  pickerRef.current.blur();
}

return <Picker
  ref={pickerRef}
  selectedValue={selectedLanguage}
  onValueChange={(itemValue, itemIndex) =>
    setSelectedLanguage(itemValue)
  }>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Props

Reference

Props

onValueChange

Callback for when an item is selected. This is called with the following parameters:

  • itemValue: the value prop of the item that was selected
  • itemPosition: the index of the selected item in this picker
TypeRequired
functionNo

selectedValue

Value matching value of one of the items. Can be a string or an integer.

TypeRequired
anyNo

style

TypeRequired
pickerStyleTypeNo

testID

Used to locate this view in end-to-end tests.

TypeRequired
stringNo

enabled

If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.

TypeRequiredPlatform
boolNoAndroid, Web, Windows

mode

On Android, specifies how to display the selection items when the user taps on the picker:

  • 'dialog': Show a modal dialog. This is the default.
  • 'dropdown': Shows a dropdown anchored to the picker view
TypeRequiredPlatform
enum('dialog', 'dropdown')NoAndroid

dropdownIconColor

On Android, specifies color of dropdown triangle. Input value should be value that is accepted by react-native processColor function.

TypeRequiredPlatform
ColorValueNoAndroid

dropdownIconRippleColor

On Android, specifies ripple color of dropdown triangle. Input value should be value that is accepted by react-native processColor function.

TypeRequiredPlatform
ColorValueNoAndroid

prompt

Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

TypeRequiredPlatform
stringNoAndroid

itemStyle

Style to apply to each of the item labels.

TypeRequiredPlatform
text stylesNoiOS, Windows

numberOfLines

On Android & iOS, used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Default is '1'

TypeRequiredPlatform
numberNoAndroid, iOS

onBlur

TypeRequiredPlatform
functionNoAndroid

onFocus

TypeRequiredPlatform
functionNoAndroid

selectionColor

TypeRequiredPlatform
ColorValueNoiOS

Methods

blur (Android only, lib version 1.16.0+)

Programmatically closes picker

focus (Android only, lib version 1.16.0+)

Programmatically opens picker

PickerItemProps

Props that can be applied to individual Picker.Item

label

Displayed value on the Picker Item

TypeRequired
stringYes

value

Actual value on the Picker Item

TypeRequired
number,stringYes

color

Displayed color on the Picker Item

TypeRequired
ColorValueNo

fontFamily

Displayed fontFamily on the Picker Item

TypeRequired
stringNo

style

Style to apply to individual item labels.

TypeRequiredPlatform
ViewStylePropNoAndroid

enabled

If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection

@default: true

TypeRequiredPlatform
booleanNoAndroid

contentDescription

Sets the content description to the Picker Item

TypeRequiredPlatform
stringNoAndroid

PickerIOS

Props

Reference

Props

itemStyle

TypeRequired
text stylesNo

onValueChange

TypeRequired
functionNo

selectedValue

TypeRequired
anyNo

selectionColor

TypeRequiredPlatform
ColorValueNoiOS

themeVariant

TypeRequired
enum('light', 'dark')No
npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.