# expo-select-dropdown > Expo / React Native Select Dropdown with search and other customizations Latest version **1.2.0** (published 2025-02-20) · MIT license · 0 weekly downloads ## Install ```sh npm install expo-select-dropdown pnpm add expo-select-dropdown yarn add expo-select-dropdown bun add expo-select-dropdown ``` ## Health **Score 35/100 (D)** — status: maintenance-mode. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2025-02-20 | | First published | 2023-01-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 1.3 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 11 | | Author | Ben Trounson | | Maintainers | btrounson | | Keywords | react-native, expo, dropdown, select, search, filter | ## Links - npm: https://www.npmjs.com/package/expo-select-dropdown - Repository: https://github.com/bjtrounson/expo-select-dropdown - Homepage: https://github.com/bjtrounson/expo-select-dropdown#readme - Issues: https://github.com/bjtrounson/expo-select-dropdown/issues - npm.io page: https://npm.io/package/expo-select-dropdown ## Dependencies (4) - [react](https://npm.io/package/react.md) 18.3.1 - [react-dom](https://npm.io/package/react-dom.md) 18.3.1 - [react-native](https://npm.io/package/react-native.md) 0.76.7 - [@expo/vector-icons](https://npm.io/package/@expo/vector-icons.md) ^14.0.2 ## Alternatives - [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads - [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads - [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads - [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads - [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2025-02-20 - 1.1.3 — 2023-02-21 - 1.1.2 — 2023-02-02 - 1.1.1 — 2023-01-31 - 1.1.0 — 2023-01-31 - 1.0.9 — 2023-01-31 - 1.0.8 — 2023-01-31 - 1.0.7 — 2023-01-31 - 1.0.6 — 2023-01-30 - 1.0.5 — 2023-01-27 - 1.0.4 — 2023-01-26 - 1.0.3 — 2023-01-26 - 1.0.2 — 2023-01-26 - 1.0.1 — 2023-01-26 - 1.0.0 — 2023-01-26 ## README | | | | | | |--------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ![NPM VERSION](https://img.shields.io/npm/v/expo-select-dropdown?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/expo-select-dropdown?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/bjtrounson/expo-select-dropdown?label=Give%20Us%20A%20Star&style=for-the-badge) | ![LICENSE](https://img.shields.io/npm/l/expo-select-dropdown?style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/expo-select-dropdown?color=%232CA215&style=for-the-badge) |

Expo / React Native Select Dropdown

Installation

npm install expo-select-dropdown OR yarn add expo-select-dropdown

Dependencies

This package depends on the following packages: - @expo/vector-icons

Example

| Without Filters | With Fitlers | |------------------|--------------------------| | ![](preview.gif) | ![](preview-filters.gif) |

Usage

```tsx import {SelectDropdown, DropdownData} from "expo-select-dropdown"; export default function App() { const [selected, setSelected] = useState | null>(null); const [data] = useState[]>([ {key: "1", value: "Toothbrush"}, {key: "2", value: "Laptop"}, {key: "3", value: "Sunglasses"}, {key: "4", value: "Baseball"}, {key: "5", value: "Scissors"}, {key: "6", value: "Bicycle"}, {key: "7", value: "Camera"}, {key: "8", value: "Umbrella"}, {key: "9", value: "Backpack"}, {key: "10", value: "Water bottle"} ]); return ( ); } ```

Filter Usage

```tsx export default function App() { const [selected, setSelected] = useState | null>(null); const data = [ {key: "1", value: "Toothbrush", location: "Bathroom", date: "2021-05-01", time: "12:00"}, {key: "2", value: "Laptop", location: "Bathroom", date: "2021-05-01", time: "12:00"}, {key: "3", value: "Sunglasses", location: "Bedroom", date: "2021-05-01", time: "12:00"}, {key: "4", value: "Baseball", location: "Bathroom", date: "2021-05-01", time: "12:00"}, {key: "5", value: "Scissors", location: "Bedroom", date: "2021-06-01", time: "1:00"}, {key: "6", value: "Bicycle", location: "Bedroom", date: "2021-05-01", time: "12:00"}, {key: "7", value: "Camera", location: "Bathroom", date: "2021-06-01", time: "1:00"}, {key: "8", value: "Umbrella", location: "Bedroom", date: "2021-06-01", time: "12:00"}, {key: "9", value: "Backpack", location: "Bathroom", date: "2021-05-01", time: "1:00"}, {key: "10", value: "Water bottle", location: "Bedroom", date: "2021-06-01", time: "12:00"}, ] const [tags] = useState([ {key: "1", name: "Location", onFilter: () => { return data.filter((item) => item.location.toLowerCase().includes("Bathroom".toLowerCase())); }}, {key: "2", name: "Date", onFilter: () => { return data.filter((item) => item.date.toLowerCase().includes("2021-05-01".toLowerCase())); }}, {key: "3", name: "Time", onFilter: () => { return data.filter((item) => item.time.toLowerCase().includes("12:00".toLowerCase())); }} ]) return ( {return {key: item.key, value: item.value}})} tags={tags} placeholder={"Select option"} selected={selected} setSelected={setSelected} searchOptions={{cursorColor: "#007bff"}} searchBoxStyles={{borderColor: "#007bff"}} dropdownStyles={{borderColor: "#007bff"}} /> ); } ```

SelectDropdownProps

```ts interface SelectDropdownProps { data: DropdownData[] placeholder: string selected: DropdownData | null setSelected: (selected: DropdownData) => void tags?: TagData[] searchOptions?: TextInputProps searchBoxStyles?: ViewStyle dropdownStyles?: ViewStyle } ```

TagData

```ts interface TagData { key: any; name: string; onFilter: () => DropdownData[] | undefined; } ``` **Work In Progress** - [x] Filter option added for searching items (optional) - [x] Tags for the filters - [x] Improved default styling - [ ] Restrict breaking styling options - [ ] Make search setting optional - [ ] Dependency clean up --- _Source: https://npm.io/package/expo-select-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._