Installation

Add the dependency:

npm i @freakycoder/react-native-multiple-select

Peer Dependencies

"@freakycoder/react-native-bounceable": ">= 0.1.0",
"react-native-animated-spinkit": ">= 1.5.2",
"react-native-bouncy-checkbox": ">= 1.0.7"

Usage

Import

import RNMultiSelect, {
  IMultiSelectDataTypes,
} from "@freakycoder/react-native-multiple-select";

Fundamental Usage

<RNMultiSelect
  disableAbsolute
  data={staticData}
  onSelect={(selectedItems) => console.log("SelectedItems: ", selectedItems)}
/>

Data Format

You MUST use this format to generate menu items

import RNMultiSelect, {
  IMultiSelectDataTypes,
} from "@freakycoder/react-native-multiple-select";

const staticData: Array<IMultiSelectDataTypes> = [
  {
    id: 0,
    value: "Euismod Justo",
    isChecked: false,
  },
  {
    id: 1,
    value: "Risus Venenatis",
    isChecked: false,
  },
  {
    id: 2,
    value: "Vestibulum Ullamcorper",
    isChecked: false,
  },
  {
    id: 3,
    value: "Lorem Nibh",
    isChecked: false,
  },
  {
    id: 4,
    value: "Ligula Amet",
    isChecked: false,
  },
];

Configuration - Props

| Property | Type | Default | Description | | ---------------------- | :--------------------------: | :-------: | --------------------------------------------------------------------------------------------------------------- | | onSelect | function | undefined | set the selection function when a menu item is selected | | data | Array | undefined | set the menu item data array for generating menu bar items | | width | number | 250 | change the width of the component | | height | number | 50 | change the height of the main single select button | | darkMode | boolean | false | change the theme of the component to dark theme | | placeholder | string | "Select" | change the placeholder of the single select component | | imageHeight | number | 25 | change the image source's menu item's image height | | imageWidth | number | 25 | change the image source's menu item's image width | | ImageComponent | component | Image | set your own custom Image component instead of default Image one | | TextComponent | component | Text | set your own custom Text component instead of default Text one | | buttonContainerStyle | ViewStyle | default | change/override the top of the single select button (the main one) | | menuBarContainerStyle | ViewStyle | default | change/override the top of the single select bottom menu bar | | arrowImageStyle | ImageStyle | default | change/override the top of the arrow image's style | | menuItemTextStyle | TextStyle | default | change/override the top of the each menu bar's item text style | | disableAbsolute | boolean | false | if you do not want to use the library without absolute to fix bottom menubar's overlaps simply make it true | | menuBarContainerWidth | number | 250 | change the bottom menu bar's width | | menuBarContainerHeight | number | 150 | change the bottom menu bar's height | | disableFilterAnimation | boolean | false | disable the filter animation for huge lists (especially on Android) | | onDoneButtonPress | function | undefined | handle the onDoneButtonPress function | | doneButtonTextStyle | style | default | change the done button's text style | | doneButtonShadowColor | style | default | change the done button's shadow style | | multiSelectionText | string | default | change the 3 or more items are selected's text part | | placeholderTextStyle | style | default | extends or override the default placeholder's text style | | Spinner | spinner component | Chase | change the spinner type | | spinnerSize | number | 30 | change the spinner size | | spinnerColor | color | default | change the spinner color |

List of available types for Spinner

• <Plane />
• <Chase />
• <Bounce />
• <Wave />
• <Pulse />
• <Flow />
• <Swing />
• <Circle />
• <CircleFade />
• <Grid />
• <Fold />
• <Wander />

Future Plans

• [x] ~~LICENSE~~
• [x] ~~Typescript Challenge!~~
• [x] ~~Dark Mode (Coming Soon!)~~
• [ ] Write an article about the lib on Medium

Credits

Heavily Inspired by Manuel Rovira's Work

Author

FreakyCoder, [email protected]

License

React Native Multi Select is available under the MIT license. See the LICENSE file for more info.