📦 react-native-easy-dropdown

A professional, searchable, and easy-to-use dropdown component for React Native. Supports both single-select and multi-select modes with smooth modal-based UI.

✨ Features

• ✅ Single & Multi-select support
• 🔍 Built-in search bar
• 🎨 Fully customizable styles and colors
• 🎯 Validations and prop deprecation warnings in development
• 📱 Compatible with iOS & Android
• 🌐 RTL layout support
• 🪶 Lightweight and dependency-free

📦 Installation

npm install react-native-easy-dropdown
# or
yarn add react-native-easy-dropdown

🚀 Usage

✅ Single Select

import React, { useState } from 'react';
import { View } from 'react-native';
import Dropdown from 'react-native-easy-dropdown';

const App = () => {
  const [selected, setSelected] = useState(null);

  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Mango', value: 'mango' },
  ];

  return (
    <View style={{ marginTop: 50 }}>
      <Dropdown
        options={options}
        selectedValue={selected}
        onChange={(value, item) => setSelected(value)}
        title="Select a fruit"
        placeholder="Choose a fruit"
      />
    </View>
  );
};

✅ Multi Select

import React, { useState } from 'react';
import { View } from 'react-native';
import Dropdown from 'react-native-easy-dropdown';

const App = () => {
  const [selected, setSelected] = useState([]);

  const hobbies = [
    { label: 'Reading', value: 'reading' },
    { label: 'Coding', value: 'coding' },
    { label: 'Gaming', value: 'gaming' },
  ];

  return (
    <View style={{ marginTop: 50 }}>
      <Dropdown
        options={hobbies}
        selectedValue={selected}
        multiSelect={true}
        onChange={(values, items) => setSelected(values)}
        title="Select hobbies"
        placeholder="Choose hobbies"
      />
    </View>
  );
};

🧩 Props

| Prop | Type | Required | Default | Description | |-------------------------|----------------------------------------------|----------|-------------|-----------------------------------------------------------------------------| | options | Array<{ label: string; value: any }> | ✅ | [] | The dropdown list items | | selectedValue | string \| number \| (string \| number)[] | ❌ | null | Current selected value(s) | | onChange | (value, item(s)) => void | ✅ | — | Callback with selected value(s) and item(s) | | multiSelect | boolean | ❌ | false | Enable multi-select mode | | searchSource | Array<{ label: string; value: any }> | ❌ | [] | Source to use for filtering search results | | title | string | ❌ | "Select" | Modal header title | | placeholder | string | ❌ | "Select" | Placeholder text | | modalAnimation | "slide" \| "fade" \| "none" | ❌ | "slide" | Animation type for modal | | arrowIcon | ImageSourcePropType | ❌ | null | Icon displayed next to dropdown text | | disabled | boolean | ❌ | false | Disable dropdown interaction | | showSearchBar | boolean | ❌ | true | Show or hide the internal search bar | | colors | object | ❌ | defaults | Customize internal color scheme (see below) | | dropdownStyle | ViewStyle | ❌ | default | Style for the main dropdown container | | placeholderStyle | TextStyle | ❌ | default | Style for placeholder text | | selectedTextStyle | TextStyle | ❌ | default | Style for selected text | | itemTextStyle | TextStyle | ❌ | default | Style for dropdown items | | searchBarContainerStyle | ViewStyle | ❌ | default | Style for the search bar container | | dropDownImageStyle | ViewStyle | ❌ | default | Style for the arrow icon container |

🎨 colors keys

{
  theme?: string,
  seperator?: string,
  placeHolder?: string,
  selectedText?: string,
  itemText?: string,
  itemRow?: string,
  itemDisabled?: string,
  itemDisabledText?: string,
  itemBackground?: string,
  selectedItemBackground?: string,
}

⚠️ Deprecated Props

These will show console warnings in __DEV__ mode:

| Deprecated Prop | Use Instead | |------------------|--------------------| | data | options | | dummyData | searchSource | | value | selectedValue | | multiple | multiSelect | | dropDownImage | arrowIcon | | placeHolder | placeholder | | animation | modalAnimation |

📄 License

MIT