1.0.2 • Published 5 years ago
Share package 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 {} style Object Optional Additional styles for the dropdown component. Used to adjust the inner part of the dropdown component. Refer Available props descriptions {} dropDownStyle Object Optional Additional styles for the dropdown box.Refer Available props descriptions {} itemStyle Object Optional Additional styles for the items.Refer Available props descriptions {} labelStyle Object Optional Additional styles for the labels.Refer Available props descriptions {} dropDownLabelStyle Object Optional Additional styles for the dropdown labels.Refer Available props descriptions {} 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')
