⚠️ **This is not maintained anymore.. Sorry 😢
A customizable react native component that lets you select multiple items.
Run
npm i multi-select-react-native
in your project directory.
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 | 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 |
This component mean to be very customizable so feel free to add any issue here.