# React Native MultiSelect Dropdown
---

[![npm version](https://img.shields.io/badge/npm%20package-1.0.2-green)](//npmjs.com/package/react-native-multiselect-dropdown-picker)  ![platform support](https://img.shields.io/badge/Platform-Android%20%7C%20iOS-orange)

> A Multi Select Dropdown Picker component with searchable feature for react native which supports both Android & iOS. Easy to integrate and use. It can be bind to any data source.

### Features : 
- No pre-defined format for data source. Can pass any type of data source.
- Can display user-defined label in dropdown.
- Ability to customize the component as per your need by changing the dropdown properties.
- Search the data from the data source.
- Works on both Android & iOS.

### Demo :

### Changelogs :

### Installation : 

```
npm install react-native-multiselect-dropdown-picker
                or
yarn add react-native-multiselect-dropdown-picker
```

### Importing NPM Package :
```
import { MultiSelectDropdown } from 'react-native-multiselect-dropdown-picker'
```

### Examples :


### Properties : 
| Prop | Type | Required | Description  | Default Value |
| ------ | ------ | ------ | ------ | ------ |
| [containerStyle](#containerstyle-) | Object | Optional | Additional styles for the container view. Used to adjust the outer part of the dropdown component. Refer [```Available props descriptions```](#available-props-description-) section for more details | {} |
| [style](#style-) | Object | Optional | Additional styles for the dropdown component. Used to adjust the inner part of the dropdown component. Refer [```Available props descriptions```](#available-props-description-) section for more details | {} |
| [dropDownStyle](#dropdownstyle-) | Object | Optional | Additional styles for the dropdown box.Refer [```Available props descriptions```](#available-props-description-) section for more details | {} |
| [itemStyle](#itemstyle-) | Object | Optional | Additional styles for the items.Refer [```Available props descriptions```](#available-props-description-) section for more details | {} |
| [labelStyle](#labelstyle-) | Object | Optional | Additional styles for the labels.Refer [```Available props descriptions```](#available-props-description-) section for more details | {} |
| [dropDownLabelStyle](#dropdownlabelstyle-) | Object | Optional | Additional styles for the dropdown labels.Refer [```Available props descriptions```](#available-props-description-) section for more details | {} |
| data | Array of Object(s) | Yes | An array of object(s) to be displayed in the dropdown.||
| selectedData | Array of Object(s) | Optional | An array of object(s) that has to be pre-selected in the dropdown. ||
| onItemChange | Callback Function | Optional | Callback which returns selected object(s). It returns an entire object of the selected items. (data,index) =>  ||
| checkBoxCheckedColor | String | Optional | Checkbox color to be displayed when the item is selected | black |
| checkBoxUncheckedColor | String | Optional | Checkbox color to be displayed when the item is not/un selected. | black |
| checkBoxSize | Number | Optional | Size of the checkbox |	22 |
| dropDownMaxHeight | Number | Optional | Height of the dropdown box. | 250 |
| zIndex | Number | Optional | This property specifies the stack order of the component. |	5000 |
| searchableErrorMessage | String | Optional | Error text message to be displayed | No Records Found |
| multipleDataSelectedText | String | Optional | Text message to be displayed when items are selected from the dropdown. %d denotes how many items are selected from the dropdown | %d records have been selected |
| placeHolder | String | Optional | Default Text to be shown to the user | Select an option |
| displayLabel | String | Yes | The label to be displayed in the dropdown. The defined displayLabel should be present in data prop. | |

### Available Props Description :
---

#### containerStyle : 
| Prop | Type | Description |  Default Value |
| ------ | ------ | ------ | ------ |
| width | Number | | |
| height | Number | | 30 |
| margin | Number  | | |
| marginTop | Number  | | |
| marginBottom | Number  | | |
| marginLeft | Number  | | |
| marginRight | Number  | | |
---

#### style : 
| Prop | Type | Description |  Default Value |
| ------ | ------ | ------ | ------ |
| borderLeftColor | String | | #dfdfdf |
| borderRightColor | String | | #dfdfdf |
| borderBottomColor | String  | | #dfdfdf |
| borderTopColor | String  | | #dfdfdf |
| borderWidth | Number  | | 1 |
| borderTopWidth | Number | |  |
| borderBottomWidth | Number | | |
| borderLeftWidth | Number | | |
| borderRightWidth | Number | | |
| backgroundColor | String | | #fff |
| paddingHorizontal | Nunber | | 10 |
| paddingVertical | Number | | 5 | 
---

#### dropDownStyle : 
| Prop | Type | Description | Default Value |
| ------ | ------ | ------ | ------ |
| borderLeftColor | String | | #dfdfdf |
| borderRightColor | String | | #dfdfdf |
| borderBottomColor | String  | | #dfdfdf |
| borderTopColor | String  | | #dfdfdf |
| borderWidth | Number  | | 1 |
| borderTopWidth | Number | |  |
| borderBottomWidth | Number | | |
| borderLeftWidth | Number | | |
| borderRightWidth | Number | | |
| backgroundColor | String | | #fff |
| paddingHorizontal | Nunber | | 10 |
| paddingVertical | Number | | 5 | 
---

#### itemStyle :
| Prop | Type | Description | Default Value |
| ------ | ------ | ------ | ------ |
| paddingVertical |  |  | 8 |
| width |  |  | '100%' |
---

#### labelStyle : 
| Prop | Type | Description | Default Value |
| ------ | ------ | ------ | ------ |
| textShadowOffset | object: {width: number,height: number} |  |  |
| color | String |  |  |
| fontSize | Number |  |  |
| fontStyle | enum('normal', 'italic') |  |  |
| fontWeight | enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') |  |  |
| lineHeight | Number |  |  |
| textAlign | enum('auto', 'left', 'right', 'center', 'justify') |  |  |
| textDecorationLine | enum('none', 'underline', 'line-through', 'underline line-through') |  |  |
| textShadowColor | String |  |  |
| fontFamily | String |  |  |
| textShadowRadius | Number |  |  |
| includeFontPadding | Bool  |  |  |
| textAlignVertical | enum('auto', 'top', 'bottom', 'center') |  |  |
| fontVariant | array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') |  |  |
| letterSpacing | Number |  |  |
| textDecorationColor | String |  |  |
| textDecorationStyle | enum('solid', 'double', 'dotted', 'dashed') |  |  |
| textTransform | enum('none', 'uppercase', 'lowercase', 'capitalize') |  |  |
| writingDirection | enum('auto', 'ltr', 'rtl') |  |  |
---

#### dropDownLabelStyle : 
| Prop | Type | Description | Default Value |
| ------ | ------ | ------ | ------ |
| textShadowOffset | object: {width: number,height: number} |  |  |
| color | String |  |  |
| fontSize | Number |  |  |
| fontStyle | enum('normal', 'italic') |  |  |
| fontWeight | enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') |  |  |
| lineHeight | Number |  |  |
| textAlign | enum('auto', 'left', 'right', 'center', 'justify') |  |  |
| textDecorationLine | enum('none', 'underline', 'line-through', 'underline line-through') |  |  |
| textShadowColor | String |  |  |
| fontFamily | String |  |  |
| textShadowRadius | Number |  |  |
| includeFontPadding | Bool  |  |  |
| textAlignVertical | enum('auto', 'top', 'bottom', 'center') |  |  |
| fontVariant | array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') |  |  |
| letterSpacing | Number |  |  |
| textDecorationColor | String |  |  |
| textDecorationStyle | enum('solid', 'double', 'dotted', 'dashed') |  |  |
| textTransform | enum('none', 'uppercase', 'lowercase', 'capitalize') |  |  |
| writingDirection | enum('auto', 'ltr', 'rtl') |  |  |
---