react-native-dropdown-with-search-and-checkbox

A customizable React Native dropdown component featuring search functionality and checkbox selection (single & multiple). Ideal for creating dynamic, user-friendly dropdowns in your mobile applications.

Features

• 🔍 Searchable Dropdown: Easily search through the options.
• ☑️ Checkbox Selection: Supports both single and multiple selection.
• 📱 Modal-based Dropdown: Beautiful modal dropdown UI.
• 🎨 Customizable Styles: Extensive styling options for every aspect of the dropdown.

Installation

Install the package using npm:

npm install react-native-dropdown-with-search-and-checkbox

Additionally, make sure to install the required dependencies:

npm install react-native-elements react-native-vector-icons

For React Native versions below 0.60, link react-native-vector-icons manually:

npx react-native link react-native-vector-icons

Usage

To use the dropdown in your React Native app, follow the example below:

Basic Example

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { DropdownSearch } from 'react-native-dropdown-with-search-and-checkbox';

const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);

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

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>Select Fruits</Text>
      <DropdownSearch
        label="Fruits"
        data={data}
        placeholder="Select fruits"
        multiSelect={true}
        showCheckbox="multiple"
        showFilter={true}
        onSelect={(items) => setSelectedItems(items)}
      />
    </View>
  );
};

export default App;

Example 1 Search with Single Select :

Screenshot

Props

| Prop | Type | Default | Description | |---------------------|-----------|---------------|-------------| | data | array | [] | List of items to display in the dropdown | | onSelect | func | required | Callback function to handle selected items | | label | string | '' | Label displayed above the dropdown | | placeholder | string | 'Select...' | Placeholder text displayed when no selection is made | | labelKey | string | 'label' | The key name to access the label in each data item | | valueKey | string | 'value' | The key name to access the value in each data item | | multiSelect | bool | false | Enables or disables multiple selection | | showCheckbox | string | null | Set to 'multiple' to display checkboxes for multiple selection | | showFilter | bool | false | Shows the filter icon and search input | | saveButtonText | string | 'Save' | Text for the Save button when multiple items are selected | | placeholderStyle | object | {} | Custom styling for the placeholder text | | downArrowStyle | object | {} | Custom styling for the dropdown arrow icon | | filterIconStyle | object | {} | Custom styling for the filter icon | | searchInputStyle | object | {} | Custom styling for the search input | | dropdownButtonStyle | object | {} | Custom styling for the dropdown button | | checkboxStyle | object | {} | Custom styling for the checkbox | | checkboxColor | string | '#007bff' | Color for the checkbox |

Example 2 Search with Multiple Select :

Screenshot

Example with Multiple Selection

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { DropdownSearch } from 'react-native-dropdown-with-search-and-checkbox';

const MultiSelectExample = () => {
  const [selectedItems, setSelectedItems] = useState([]);

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

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>Multi-select Fruits</Text>
      <DropdownSearch
        label="Fruits"
        data={data}
        placeholder="Select fruits"
        multiSelect={true}
        showCheckbox="multiple"
        onSelect={(items) => setSelectedItems(items)}
      />
      <Text>Selected: {selectedItems.map(item => item.label).join(', ')}</Text>
    </View>
  );
};

export default MultiSelectExample;

Example 3 Search with Multi Select :

Screenshot

License

MIT

Author

Bhumit Dara

• GitHub: @bhumitdara
• NPM: @bhumitdara