A customiseable ListView that allows you to select multiple rows.
importReact,{Component}from'react'import{View}from'react-native'importSelectMultiplefrom'react-native-select-multiple'constfruits=['Apples','Oranges','Pears']// --- OR ---// const fruits = [// { label: 'Apples', value: 'appls' },// { label: 'Oranges', value: 'orngs' },// { label: 'Pears', value: 'pears' }// ]classAppextendsComponent{state={selectedFruits: []}onSelectionsChange=(selectedFruits)=>{// selectedFruits is array of { label, value }this.setState({ selectedFruits })}render(){return(<View><SelectMultipleitems={fruits}selectedItems={this.state.selectedFruits}onSelectionsChange={this.onSelectionsChange}/></View>)}}| 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) |
| checkboxSource | image | object | Image source for the checkbox (unchecked). |
| selectedCheckboxSource | image | object | Image source for the checkbox (checked). |
| listViewProps | {} | object | Additional props for the list view |
| style | default styles | object | Style for the ListView 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. |
A (╯°□°)╯︵TABLEFLIP side project.
