Registry / web-framework / react-native-element-dropdown

react-native-element-dropdown

library2.12.4jsnpmunverified

React Native Element Dropdown is a versatile library providing highly customizable dropdown and multi-select components for React Native applications. It aims to simplify the creation of selection menus, offering a consistent look and feel across iOS and Android platforms. The current stable version is 2.12.4, with a fairly active release cadence, typically seeing bug fixes and minor feature additions every few months. Key differentiators include built-in support for both single-select dropdowns and multi-select functionality within a single package, extensive customization options for styling (font size, colors, animation duration, 'default', 'modal', or 'auto' display modes), and robust TypeScript support. It also features search capabilities, lazy loading (indicated by keywords), and specific props for controlling item visibility and modal behavior.

web-framework

npm install react-native-element-dropdown

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-ELEME

react-native-element-dropdown

web-frameworkjavascriptv2.12.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Dropdown

✓ import { Dropdown } from 'react-native-element-dropdown';

✗ const Dropdown = require('react-native-element-dropdown');

The primary component for single-select dropdowns. Use named import for modern React Native (ESM).

MultiSelect

✓ import { MultiSelect } from 'react-native-element-dropdown';

✗ import MultiSelect from 'react-native-element-dropdown';

Component for multi-select functionality. Also a named export. Ensure you import the correct component based on your use case.

DropdownProps, IDataItem

✓ import type { DropdownProps, IDataItem } from 'react-native-element-dropdown';

✗ import { DropdownProps, IDataItem } from 'react-native-element-dropdown';

When importing types in TypeScript, it's best practice to use `import type` to ensure they are removed from the compiled JavaScript output.

This quickstart demonstrates a basic single-select dropdown component, including state management for the selected value, data definition, and essential styling using TypeScript.

import React, { useState } from 'react'; import { StyleSheet, View, Text } from 'react-native'; import { Dropdown } from 'react-native-element-dropdown'; interface Item { label: string; value: string; } const data: Item[] = [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, { label: 'Option 4', value: '4' }, { label: 'Option 5', value: '5' }, ]; const DropdownComponent: React.FC = () => { const [value, setValue] = useState<string | null>(null); return ( <View style={styles.container}> <Dropdown style={styles.dropdown} placeholderStyle={styles.placeholderStyle} selectedTextStyle={styles.selectedTextStyle} inputSearchStyle={styles.inputSearchStyle} iconStyle={styles.iconStyle} data={data} search maxHeight={300} labelField="label" valueField="value" placeholder="Select item" searchPlaceholder="Search..." value={value} onChange={item => { setValue(item.value); }} /> </View> ); }; const styles = StyleSheet.create({ container: { backgroundColor: 'white', padding: 16, }, dropdown: { height: 50, borderColor: 'gray', borderWidth: 0.5, borderRadius: 8, paddingHorizontal: 8, }, icon: { marginRight: 5, }, placeholderStyle: { fontSize: 16, }, selectedTextStyle: { fontSize: 16, }, iconStyle: { width: 20, height: 20, }, inputSearchStyle: { height: 40, fontSize: 16, }, }); export default DropdownComponent;

Debug

Known issues

gotchaThe `data` prop requires specific `labelField` and `valueField` props to be correctly configured. If these fields do not match the keys in your data array objects, the component will not render items correctly or will throw errors related to undefined properties.

fix

Always ensure your `data` array items (e.g., `{ label: 'Name', value: 'id' }`) have keys that exactly match the `labelField` and `valueField` string props you provide to the Dropdown component.

affects: All versions

gotchaUsers on older versions (pre-2.10.4) might encounter `scrollToIndex out of range` errors, particularly when dynamically changing the `data` prop to an empty array or manipulating list items in a way that causes the scroll index to become invalid. This has been addressed in recent patches.

fix

Upgrade to version 2.10.4 or higher to benefit from bug fixes related to `scrollToIndex` issues. When manipulating `data` dynamically, consider rendering the dropdown conditionally or ensuring `data` is valid before passing it.

affects: <=2.10.4

gotchaVersions prior to 2.10.1 had a known bug where list scrolling did not work correctly on Android devices, severely impacting usability for long lists.

fix

Update your package to version 2.10.1 or newer to resolve the Android scrolling issue and ensure consistent functionality across platforms.

affects: <=2.10.1

gotchaFor applications dealing with very large datasets, the component's default rendering might lead to performance issues if proper virtualization or lazy loading is not implemented. While 'lazy loading' is mentioned in keywords, the core component itself might not inherently virtualize lists without additional configuration or custom render functions.

fix

For large lists, explore React Native's `FlatList` performance optimizations. If the library doesn't offer explicit virtualization props, consider implementing custom `renderItem` or externalizing the list rendering logic to a virtualized component.

affects: All versions

Errors

Common errors & fixes

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Attempting to use `Dropdown` as a default import when it is a named export.

fix

Change your import statement from `import Dropdown from 'react-native-element-dropdown';` to `import { Dropdown } from 'react-native-element-dropdown';`.

TypeError: Cannot read property 'label' of undefined (or similar property access errors related to data items).

The `labelField` or `valueField` props do not correspond to actual keys present in the objects within your `data` array, or the `data` array itself is empty/invalid.

fix

Verify that your `data` array contains objects with keys matching exactly what you specify in `labelField` and `valueField`. For example, if `labelField="name"` and `valueField="id"`, your data items should look like `{ name: 'Item Name', id: 'item-id' }`.

Warning: Failed prop type: Invalid prop `onChange` of type `string` supplied to `Dropdown`, expected `function`.

The `onChange` prop was provided with a value that is not a function.

fix

Ensure that the `onChange` prop receives a valid callback function, for example: `onChange={item => setValue(item.value)}`.

Upgrade

Version history

2.12.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency required by React Native components.

react-nativerequiredCore dependency for any React Native UI library.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/hoaphantn7604/react-native-element-dropdown ↗

packagehttps://www.npmjs.com/package/react-native-element-dropdown ↗