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 App Customize 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. |
Contribute
Feel free to dive in! Open an issue or submit PRs.
License
ISC © TABLEFLIP
A (╯°□°）╯︵TABLEFLIP side project.
