Stylish Multi Select Component For React Native

An easy, customizable, and animated Multiple Select Library for React Native to select multiple options from a stylish popup.

Install & Import:

# NPM
$ npm i @freakycoder/react-native-multiple-select –save

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

Basic Usage:

// sample data
const staticData: Array<IMultiSelectDataTypes> = [
  {
    id: 0,
    value: "Vue",
    isChecked: false,
  },
  {
    id: 1,
    value: "Script",
    isChecked: false,
  },
  {
    id: 2,
    value: "Com",
    isChecked: false,
  }
  // more options here
];

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

Default props:

height?: number;
width?: number;
darkMode?: boolean;
imageWidth?: number;
TextComponent?: any;
imageHeight?: number;
ImageComponent?: any;
placeholder?: string;
arrowImageStyle?: any;
doneButtonText?: string;
menuItemTextStyle?: any;
disableAbsolute?: boolean;
doneButtonTextStyle?: any;
placeholderTextStyle?: any;
buttonContainerStyle?: any;
menuBarContainerStyle?: any;
multiSelectionText?: string;
doneButtonShadowColor?: string;
menuBarContainerWidth?: number;
menuBarContainerHeight?: number;
disableFilterAnimation?: boolean;
doneButtonBackgroundColor?: string;
data: Array<IMultiSelectDataTypes>;
onSelect: (selectedItems: Array<IMultiSelectDataTypes>) => void;
onDoneButtonPress?: () => void;

Preview:

Download Details:

Author: WrathChaos

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/WrathChaos/react-native-multiple-select

License: MIT