react-native-dropdown-multi

# 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 <div style="display: flex; flex-direction: column; align-items: center;"> <img src="https://github.com/sonideep239/react-native-dropdown-multi/blob/main/src/assets/1.png" width="230" alt="App Screenshot" /> <img src="https://github.com/sonideep239/react-native-dropdown-multi/blob/main/src/assets/2.png" width="230" alt="App Screenshot" /> <img src="https://github.com/sonideep239/react-native-dropdown-multi/blob/main/src/assets/3.png" width="230" alt="App Screenshot" /> <img src="https://github.com/sonideep239/react-native-dropdown-multi/blob/main/src/assets/4.png" width="230" alt="App Screenshot" /> </div> ## Installation Use the package manager [npm](https://www.npmjs.com) to install react-native-dropdown-multi. ```bash npm i react-native-dropdown-multi ``` OR ```bash 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. ```bash npm i react-native-vector-icons ``` ### IOS Installation Please refer linked document [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons#ios-setup) ### Android Installation Please refer linked document [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons#android-setup) ## Usage ```react-native 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](https://choosealicense.com/licenses/mit/)