Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

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

bhumitdara120MIT1.1.2

A React Native dropdown with search and checkbox functionality

react-native, dropdown, multi-select, multiselect, checkbox, checkbox-dropdown, multi-checkbox-dropdown, dropdown-with-search, dropdown-with-checkbox, multiselect-dropdown, dropdown-multiselect, react-native-dropdown, dropdown-search, dropdown-select, checkbox-select, single-select-dropdown, multi-select-dropdown, react-native-checkbox, react-native-multiselect

readme

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

Dropdown Screenshot

Dropdown Screenshot

Dropdown 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

Dropdown Screenshot

Dropdown Screenshot

Dropdown 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

Dropdown Screenshot

License

MIT

Author

Bhumit Dara