React Native Element Dropdown

Common errors

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

  cause 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).

  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.
  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`.

  cause 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)}`.

Warnings

• gotcha 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Update your package to version 2.10.1 or newer to resolve the Android scrolling issue and ensure consistent functionality across platforms.
• gotcha 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.
  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.

Install

• npm install react-native-element-dropdown npm
• yarn add react-native-element-dropdown yarn
• pnpm add react-native-element-dropdown pnpm

Imports

• Dropdown
  wrong:

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

  correct:

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

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

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

  correct:

  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
  wrong:

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

  correct:

  import type { 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.

Quickstart

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;