react-native-multiselect-dropdown-picker

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

Importing 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.

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

---