react-native-multiselect-dropdown-picker
Version:
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.
168 lines (141 loc) • 7.92 kB
Markdown
# React Native MultiSelect Dropdown
---
[](//npmjs.com/package/react-native-multiselect-dropdown-picker) 
> 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') | | |
---