react-native-select-multiple
A customiseable FlatList that allows you to select multiple rows.
Install
npm install react-native-select-multiple
Usage
const fruits = 'Apples' 'Oranges' 'Pears'// --- OR ---// const fruits = [// { label: 'Apples', value: 'appls' },// { label: 'Oranges', value: 'orngs' },// { label: 'Pears', value: 'pears' }// ] state = selectedFruits: { // selectedFruits is array of { label, value } this } { return <View> <SelectMultiple items=fruits selectedItems=thisstateselectedFruits onSelectionsChange=thisonSelectionsChange /> </View> }
Customize label
const fruits = 'Apples' 'Oranges' 'Pears'// --- OR ---// const fruits = [// { label: 'Apples', value: 'appls' },// { label: 'Oranges', value: 'orngs' },// { label: 'Pears', value: 'pears' }// ] const renderLabel = { return <View style=flexDirection: 'row' alignItems: 'center'> <Image style=width: 42 height: 42 source=uri: 'https://dummyimage.com/100x100/52c25a/fff&text=S' /> <View style=marginLeft: 10> <Text style=style>label</Text> </View> </View> } state = selectedFruits: { // selectedFruits is array of { label, value } this } { return <View> <SelectMultiple items=fruits renderLabel=renderLabel selectedItems=thisstateselectedFruits onSelectionsChange=thisonSelectionsChange /> </View> }
Properties
Prop | Default | Type | Description |
---|---|---|---|
items | - | array |
All items available in the list (array of string or { label, value } ) |
selectedItems | [] |
array |
The currently selected items (array of string or { label, value } ) |
onSelectionsChange | - | func |
Callback called when a user selects or de-selects an item, passed (selections, item) |
keyExtractor | index |
func |
keyExtractor for the FlatList |
checkboxSource | image | object |
Image source for the checkbox (unchecked). |
selectedCheckboxSource | image | object |
Image source for the checkbox (checked). |
flatListProps | {} | object |
Additional props for the flat list |
style | default styles | object |
Style for the FlatList container. |
rowStyle | default styles | object |
Style for the row container. |
checkboxStyle | default styles | object |
Style for the checkbox image. |
labelStyle | default styles | object |
Style for the text label. |
selectedRowStyle | default styles | object |
Style for the row container when selected. |
selectedCheckboxStyle | default styles | object |
Style for the checkbox image when selected. |
selectedLabelStyle | default styles | object |
Style for the text label when selected. |
renderLabel | null | func |
Function for render label. |
maxSelect | null | int |
Maximum number of selected items |
Contribute
Feel free to dive in! Open an issue or submit PRs.
License
ISC © TABLEFLIP
A (╯°□°)╯︵TABLEFLIP side project.