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

OR

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) |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT