JSPM – react-native-easy-dropdown@1.0.0

Package Exports

react-native-easy-dropdown
react-native-easy-dropdown/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-easy-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)
`pickerStyle`	`ViewStyle`	❌	default	Style for the main picker 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

{
  picker?: 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

react-native-easy-dropdown