react-native-multiselect-dropdown-picker
v1.0.2
Published
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.
Downloads
3
Maintainers
shariq_ahmedReadme
React Native MultiSelect Dropdown
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-pickerImporting NPM Package :
import { MultiSelectDropdown } from 'react-native-multiselect-dropdown-picker'Examples :
Properties :
| Prop | Type | Required | Description | Default Value |
| ------ | ------ | ------ | ------ | ------ |
| containerStyle | Object | Optional | Additional styles for the container view. Used to adjust the outer part of the dropdown component. Refer Available props descriptions section for more details | {} |
| style | Object | Optional | Additional styles for the dropdown component. Used to adjust the inner part of the dropdown component. Refer Available props descriptions section for more details | {} |
| dropDownStyle | Object | Optional | Additional styles for the dropdown box.Refer Available props descriptions section for more details | {} |
| itemStyle | Object | Optional | Additional styles for the items.Refer Available props descriptions section for more details | {} |
| labelStyle | Object | Optional | Additional styles for the labels.Refer Available props descriptions section for more details | {} |
| dropDownLabelStyle | Object | Optional | Additional styles for the dropdown labels.Refer Available props descriptions 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. | |