:warning: **This is not maintained anymore.. Sorry 😢

Multi Select React Native

A customizable react native component that lets you select multiple items.

Installation

Run

npm i multi-select-react-native

in your project directory.

Usage

This snippet would produce the output shown in the above gif

import * as React from "react";
import { View, StyleSheet } from "react-native";
import MultiSelect from "multi-select-react-native";
const DATA = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
    title: "First Item"
  },
  {
    id: 1,
    title: "Second Item"
  },
  {
    id: "1a",
    title: "Third Item"
  }
];

export default function App() {
  const [selectedItems, setSelectedItems] = React.useState([]);

  return (
    <View style={styles.container}>
      <MultiSelect
        data={DATA}
        selectedItems={selectedItems}
        setSelectedItems={setSelectedItems}
        componentStyle={styles.centeredView}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
    fontSize: 20
  }
});

Props

| Props | Explanation | default value | |:-------------------:|:--------------------------------------------------------------------------:|:-------------:| | highlight | To highlight the selected items with the tint color or not | false | | data | the data is an array of objects of id and title ex. [{id:1,title:'first'}] | [] | | text | Text of the button | Select Item | | selectedItems | The selected ids of items: must be a state to re-render every select | [] | | setSelectedItems | function that set the selected items | | | tintColor | The color of the selected items | yellow | | componentStyle | The style of the whole component | | | buttonStyle | The style of the select button | | | containerItemsStyle | The style of the container of the item in the menu | | | hasResetButton | If it has a reset button or not | true |

Contributing

This component mean to be very customizable so feel free to add any issue here.