react-native-select-multiple
A customiseable FlatList that allows you to select multiple rows.
Install
npm install react-native-select-multipleUsage
import React, { Component } from 'react'
import { View } from 'react-native'
import SelectMultiple from 'react-native-select-multiple'
const fruits = ['Apples', 'Oranges', 'Pears']
// --- OR ---
// const fruits = [
// { label: 'Apples', value: 'appls' },
// { label: 'Oranges', value: 'orngs' },
// { label: 'Pears', value: 'pears' }
// ]
class App extends Component {
state = { selectedFruits: [] }
onSelectionsChange = (selectedFruits) => {
// selectedFruits is array of { label, value }
this.setState({ selectedFruits })
}
render () {
return (
<View>
<SelectMultiple
items={fruits}
selectedItems={this.state.selectedFruits}
onSelectionsChange={this.onSelectionsChange} />
</View>
)
}
}
export default AppCustomize label
import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import SelectMultiple from 'react-native-select-multiple'
const fruits = ['Apples', 'Oranges', 'Pears']
// --- OR ---
// const fruits = [
// { label: 'Apples', value: 'appls' },
// { label: 'Oranges', value: 'orngs' },
// { label: 'Pears', value: 'pears' }
// ]
const renderLabel = (label, style) => {
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>
)
}
class App extends Component {
state = { selectedFruits: [] }
onSelectionsChange = (selectedFruits) => {
// selectedFruits is array of { label, value }
this.setState({ selectedFruits })
}
render () {
return (
<View>
<SelectMultiple
items={fruits}
renderLabel={renderLabel}
selectedItems={this.state.selectedFruits}
onSelectionsChange={this.onSelectionsChange} />
</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.