{"id":11770,"library":"react-native-element-dropdown","title":"React Native Element Dropdown","description":"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.","status":"active","version":"2.12.4","language":"javascript","source_language":"en","source_url":"https://github.com/hoaphantn7604/react-native-element-dropdown","tags":["javascript","react-native","elements","components","material","dropdown","lazy loading","load more","menu","typescript"],"install":[{"cmd":"npm install react-native-element-dropdown","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-element-dropdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-element-dropdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by React Native components.","package":"react","optional":false},{"reason":"Core dependency for any React Native UI library.","package":"react-native","optional":false}],"imports":[{"note":"The primary component for single-select dropdowns. Use named import for modern React Native (ESM).","wrong":"const Dropdown = require('react-native-element-dropdown');","symbol":"Dropdown","correct":"import { Dropdown } from 'react-native-element-dropdown';"},{"note":"Component for multi-select functionality. Also a named export. Ensure you import the correct component based on your use case.","wrong":"import MultiSelect from 'react-native-element-dropdown';","symbol":"MultiSelect","correct":"import { MultiSelect } from 'react-native-element-dropdown';"},{"note":"When importing types in TypeScript, it's best practice to use `import type` to ensure they are removed from the compiled JavaScript output.","wrong":"import { DropdownProps, IDataItem } from 'react-native-element-dropdown';","symbol":"DropdownProps, IDataItem","correct":"import type { DropdownProps, IDataItem } from 'react-native-element-dropdown';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport { Dropdown } from 'react-native-element-dropdown';\n\ninterface Item { label: string; value: string; }\n\nconst data: Item[] = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3' },\n  { label: 'Option 4', value: '4' },\n  { label: 'Option 5', value: '5' },\n];\n\nconst DropdownComponent: React.FC = () => {\n  const [value, setValue] = useState<string | null>(null);\n\n  return (\n    <View style={styles.container}>\n      <Dropdown\n        style={styles.dropdown}\n        placeholderStyle={styles.placeholderStyle}\n        selectedTextStyle={styles.selectedTextStyle}\n        inputSearchStyle={styles.inputSearchStyle}\n        iconStyle={styles.iconStyle}\n        data={data}\n        search\n        maxHeight={300}\n        labelField=\"label\"\n        valueField=\"value\"\n        placeholder=\"Select item\"\n        searchPlaceholder=\"Search...\"\n        value={value}\n        onChange={item => {\n          setValue(item.value);\n        }}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    padding: 16,\n  },\n  dropdown: {\n    height: 50,\n    borderColor: 'gray',\n    borderWidth: 0.5,\n    borderRadius: 8,\n    paddingHorizontal: 8,\n  },\n  icon: {\n    marginRight: 5,\n  },\n  placeholderStyle: {\n    fontSize: 16,\n  },\n  selectedTextStyle: {\n    fontSize: 16,\n  },\n  iconStyle: {\n    width: 20,\n    height: 20,\n  },\n  inputSearchStyle: {\n    height: 40,\n    fontSize: 16,\n  },\n});\n\nexport default DropdownComponent;\n","lang":"typescript","description":"This quickstart demonstrates a basic single-select dropdown component, including state management for the selected value, data definition, and essential styling using TypeScript."},"warnings":[{"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.","message":"The `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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"Users 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.","severity":"gotcha","affected_versions":"<=2.10.4"},{"fix":"Update your package to version 2.10.1 or newer to resolve the Android scrolling issue and ensure consistent functionality across platforms.","message":"Versions 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.","severity":"gotcha","affected_versions":"<=2.10.1"},{"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.","message":"For 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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import Dropdown from 'react-native-element-dropdown';` to `import { Dropdown } from 'react-native-element-dropdown';`.","cause":"Attempting to use `Dropdown` as a default import when it is a named export.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"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' }`.","cause":"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.","error":"TypeError: Cannot read property 'label' of undefined (or similar property access errors related to data items)."},{"fix":"Ensure that the `onChange` prop receives a valid callback function, for example: `onChange={item => setValue(item.value)}`.","cause":"The `onChange` prop was provided with a value that is not a function.","error":"Warning: Failed prop type: Invalid prop `onChange` of type `string` supplied to `Dropdown`, expected `function`."}],"ecosystem":"npm"}