React-native-dropdown-multi NPM

react-native-dropdown-multi

react-native-dropdown-multi is supported on both Android and iOS, making it a versatile solution for cross-platform dropdown functionality in React Native applications. Here's a breakdown of its key features

Key Features

Multi-Select & Single Select
Searchable
Customizable Styling
Modal Interface
Clear Selection Option
Cross-Platform

Screenshots

Installation

Use the package manager npm to install react-native-dropdown-multi.

npm i react-native-dropdown-multi

yarn add react-native-dropdown-multi

Installation Steps

The library has specified dedicated steps for each platform. Please follow their installation guide in order to properly use icon fonts.

npm i react-native-vector-icons

IOS Installation

Please refer linked document react-native-vector-icons

Android Installation

Please refer linked document react-native-vector-icons

Usage

import React, { useState } from 'react';
import CustomDropdown from 'react-native-dropdown-multi';

const [selectedEmployee, setSelectedEmployee] = useState({ label: '', value: '' });
const [selectedEmployees, setSelectedEmployees] = useState([]);
const [isReportForVisible, setIsReportForVisible] = useState(false);
const [isAssignVisible, setIsAssignVisible] = useState(false);

const employees = Array.from({ length: 100 }, (_, i) => ({
    label: `Employee ${i + 1}`,
    value: i + 1,
  }));

const toggleReportForDropdown = () => setIsReportForVisible(!isReportForVisible);
const toggleAssignDropdown = () => setIsAssignVisible(!isAssignVisible);

const updateAssignedEmployees = (value) => {
    setSelectedEmployees(value.map((val) => val));
};

<View style={{ padding: 15, gap: 10 }}>
        <Text>Example 1 </Text>
        <CustomDropdown
          isClearable={true}
          selectedValue={selectedEmployee}
          isSearchEnabled={true}
          data={employees}
          isVisible={isReportForVisible}
          onClose={toggleReportForDropdown}
          onSelect={setSelectedEmployee}
          onPress={toggleReportForDropdown}
          customStyles={{
            pickerWrapper: { borderColor: 'blue' },
            itemText: { color: 'darkblue' },
            buttonText: { color: 'white', fontWeight: 'bold' },
          }}
          customButtonLabels={{ submit: 'Confirm', close: 'Cancel' }}
          dropdownHeight={500}
          searchPlaceholder="Type to search..."
          loading={false}
        />

        <Text>Example 2 (Multiselect)</Text>
        <CustomDropdown
          isClearable={true}
          selectedValue={selectedEmployees}
          isSearchEnabled={true}
          isMultiSelect={true}
          data={employees}
          isVisible={isAssignVisible}
          onClose={toggleAssignDropdown}
          onSelect={updateAssignedEmployees}
          onPress={toggleAssignDropdown}
        />
</View>

Props & Styling

Props

Certainly! Below is a table summarizing all the props, their types, whether they are required, and default values (if applicable). Additionally, I'll include the corresponding styling properties for each prop:

Prop	Type	Description	Required	Default Value
`data`	`Array<Object>`	The data array to populate the dropdown. Each object must have a `value` and `label` property.	Yes	Required. No default value.
`isVisible`	`boolean`	Controls whether the dropdown modal is visible or not.	Yes	Required. No default value.
`onClose`	`Function`	A function to handle closing the dropdown.	Yes	Required. No default value.
`onSelect`	`Function`	A function to handle item selection. Receives the selected item or items.	Yes	Required. No default value.
`isSearchEnabled`	`boolean`	If `true`, the search bar will be enabled in the dropdown.	No	`false`
`selectedValue`	`Object`	The initially selected item. The object should have a `value` and `label`.	No	`{}` (empty object)
`onPress`	`Function`	A function to be called when the dropdown is pressed (to open the modal).	Yes	Required. No default value.
`isClearable`	`boolean`	If `true`, a clear icon will be displayed to clear the selection.	No	`false`
`placeholder`	`string`	Placeholder text for the dropdown input when no item is selected.	No	`"Select an item"`
`isMultiSelect`	`boolean`	If `true`, the dropdown will allow multiple selections.	No	`false`
`customStyles`	`Object`	A set of custom styles to override default styles. Custom styles can include `pickerWrapper`, `item`, `modalContainer`, and more.	No	`{}` (empty object)
`customButtonLabels`	`Object`	Custom labels for the buttons. Supports `submit` and `close`.	No	`{ submit: "Submit", close: "Close" }`
`customIcons`	`Object`	Custom icons for the dropdown button and clear icon. Supports `dropdown` and `clear`.	No	`{ dropdown: <FontAwesomeIcon>, clear: <FontAwesomeIcon> }`
`dropdownHeight`	`number`	Defines the height of the dropdown modal.	No	`height * 0.7`
`searchPlaceholder`	`string`	Placeholder text for the search input.	No	`"Search..."`
`loading`	`boolean`	If `true`, a loading indicator will be shown instead of the dropdown items.	No	`false`

Custom Styles (for the customStyles prop)

Here are the available custom styles that can be passed within the customStyles prop:

Prop	Type	Description	Required	Default Value
`pickerWrapper`	`Object`	Custom styles for the wrapper of the dropdown input. This affects the overall outer container of the dropdown.	No	`{}` (empty object)
`contentWrapper`	`Object`	Custom styles for the wrapper inside the dropdown input, usually for the layout (row, alignment, etc.).	No	`{}` (empty object)
`item`	`Object`	Custom styles for individual dropdown items (each option). Can adjust padding, borders, etc.	No	`{}` (empty object)
`itemText`	`Object`	Custom styles for the text inside each dropdown item.	No	`{}` (empty object)
`selectedColor`	`string`	The color applied to the item circle when it's selected.	No	`'green'`
`selectedTextColor`	`string`	Custom text color for selected items (multi-select).	No	`'black'`
`modalContainer`	`Object`	Custom styles for the outer container of the dropdown modal.	No	`{}` (empty object)
`modalView`	`Object`	Custom styles for the modal view, where the dropdown list and buttons reside.	No	`{}` (empty object)
`searchContainer`	`Object`	Custom styles for the search bar container inside the dropdown modal.	No	`{}` (empty object)
`searchInput`	`Object`	Custom styles for the text input inside the search bar of the dropdown modal.	No	`{}` (empty object)
`clearButton`	`Object`	Custom styles for the clear button (appears when the search input is not empty).	No	`{}` (empty object)
`buttonContainer`	`Object`	Custom styles for the container holding the submit and close buttons.	No	`{}` (empty object)
`button`	`Object`	Custom styles for the individual buttons (submit or close).	No	`{}` (empty object)
`buttonText`	`Object`	Custom styles for the text inside the submit and close buttons.	No	`{}` (empty object)
`multiselectText`	`Object`	Custom styles for the text inside the multi-select dropdown (when multiple items are selected).	No	`{}` (empty object)
`placeholderText`	`Object`	Custom styles for the placeholder text when no item is selected in the dropdown.	No	`{}` (empty object)
`clearIcon`	`Object`	Custom styles for the clear icon (for clearing the selection).	No	`{}` (empty object)
`dropdownIcon`	`Object`	Custom styles for the dropdown icon (the arrow indicator).	No	`{}` (empty object)
`loadingContainer`	`Object`	Custom styles for the loading spinner container when the dropdown is in a loading state.	No	`{}` (empty object)
`emptyListText`	`Object`	Custom styles for the "No data found" text when the filtered list is empty.	No	`{}` (empty object)