GitPedia

React native dropdown picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.

From hossein-zareยทUpdated June 16, 2026ยทView on GitHubยท

The above screenshots were taken from [this example](https://snack.expo.dev/8mHmLfcZf). The project is written primarily in JavaScript, distributed under the MIT License license, first published in 2020. It has gained significant community traction with 1,047 stars and 307 forks on GitHub. Key topics include: android, categorizable, category, dropdown, ios.

Latest release: v5.4.6

React Native Dropdown Picker

GitHub repo
Build Status
PRs welcome
react-native-dropdown-picker is released under the MIT license.
Current npm package version.
Weekly npm downloads
Documentation


๐Ÿ“ฑ Screenshots

Screenshot showing basic dropdown
Screenshot showing badges
Screenshot showing dark theme and parent items

The above screenshots were taken
from this example.

๐Ÿ‘‹ Usage

Basic usage

The following code shows basic usage of this library:

javascript
import React, {useState} from 'react'; import {View, Text} from 'react-native'; import DropDownPicker from 'react-native-dropdown-picker'; export default function App() { const [open, setOpen] = useState(false); const [value, setValue] = useState(null); const [items, setItems] = useState([ {label: 'Apple', value: 'apple'}, {label: 'Banana', value: 'banana'}, {label: 'Pear', value: 'pear'}, ]); return ( <View style={{flex: 1}}> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 15, }}> <DropDownPicker open={open} value={value} items={items} setOpen={setOpen} setValue={setValue} setItems={setItems} placeholder={'Choose a fruit.'} /> </View> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Chosen fruit: {value === null ? 'none' : value}</Text> </View> </View> ); }

Further information on usage

You can find more examples in the examples subdirectory. This subdirectory is
a working Expo project demonstrating this
library. It shows how to use this library with class components as well as with
function components, and in TypeScript as well as in JavaScript. Navigate into
the examples subdirectory, run npm install, and then run npx expo start to
see the examples working.

For further information on how to use this library,
read the usage documentation.

๐Ÿ“„ Further documentation

The docs can be read
at: https://hossein-zare.github.io/react-native-dropdown-picker-website

The docs can be edited
at: https://github.com/hossein-zare/react-native-dropdown-picker-website

๐Ÿ˜• Support and issues

If you have questions or need help, you
can ask a question on Stack Overflow
or make a GitHub issue.
You can also make a GitHub issue to report a bug or make a feature request.

๐Ÿš€๏ธ Contributing

See CONTRIBUTING.md.

Contributors

Showing top 12 contributors by commit count.

View all contributors on GitHub โ†’

This article is auto-generated from hossein-zare/react-native-dropdown-picker via the GitHub API.Last fetched: 6/16/2026