| Content type (Vertical and horizontal) | Modal Light | Modal Dark |
|---|---|---|
 |
 |
 |
react native multiple select
npm install react-native-multiple-select-hacimport MultipleSelect from "react-native-multiple-select-hac";
// ...See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
The component takes 3 compulsory props - items, uniqueKey, value and setValue . Other props are optional. The table below explains more.
| Prop | Required | Purpose |
|---|---|---|
| uniqueKey | No | (String) Defaults to "value". Unique identifier that is part of each item's properties. Used internally as means of identifying each item |
| items | No | State variable that holds the items. |
| value | No | (array) State variable that specifies the value of the selected item. It's an array of values for multiple item pickers. |
| setValue | No | ((callback: SetStateAction) => void) State callback that is called when the value changes. |
| displayedObject | No | (String) Defaults to "label". This string will be used to select the key to display the objects in the items array |
| topText | No | (String) Top Text for multiple select |
| topTextStyle | No | (StyleProp) Style for top text |
| theme | No | (light / dark) Theme for component |
| searchable | No | (boolean) Defaults to "false". Enables the search feature in the drop-down menu / modal. |
| placeholder | No | (String) Defaults to 'Select items'. Placeholder text displayed in multi-select filter input |
| onSelectedItemsChange | No | (void function) Callback that returns the selected item / items. |
| placeholderStyle | No | (StyleProp) Styling for placeholder |
| max | No | (number) Specifies the maximum number of items. |
| categorySelectable | No | (boolean) Defaults to 'false'. Allows selection of categories |
| parent | No | (string) The children have the parent's value as their parent key. |
| clearText | No | (string) Defaults to 'Clear'. Text for remove all selected button. |
| clearStyle | No | (StyleProp) Styling for clearText |
| confirmButtonText | No | (string) Defaults to 'Confirm'. Confirm button text. |
| confirmButtonTextStyle | No | (StyleProp) Styling for confirm button's text |
| confirmButtonStyle | No | (StyleProp) Styling for confirm button |
| vertical | No | (boolean) Defaults to 'false'. Display mode of selected items |
| verticalMaxHeight | No | (number) Defaults to '200'. Height of vertical mode |
| contentStyle | No | (StyleProp) Styling for content |
| modalContentStyle | No | (StyleProp) Styling for modal content |
| modalContainer | No | (StyleProp) Styling for modal container |
| containerStyle | No | (StyleProp) Styling for container |
| badgeIcon | No | (ReactNode) Icon for badge |
| badgeTextStyle | No | (StyleProp) Styling for badge's text |
| crossStyle | No | (string) Color for badge's cross icon |
| headerIcon | No | (ReactNode) Icon for modal close button |
| leftStyle | No | (StyleProp) Icon styling for modal close button |
| headerStyle | No | (StyleProp) Styling for modal header |