{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-element-dropdown"],"cli":null},"imports":["import { Dropdown } from 'react-native-element-dropdown';","import { MultiSelect } from 'react-native-element-dropdown';","import type { DropdownProps, IDataItem } from 'react-native-element-dropdown';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}