react-native-select-multiple


> A customiseable FlatList that allows you to select multiple rows.

!select-multiple

Install

``sh
npm install react-native-select-multiple
`

Usage

`js
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 (

items={fruits}
selectedItems={this.state.selectedFruits}
onSelectionsChange={this.onSelectionsChange} />

)
}
}
export default App

`

Customize label

`js
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 (



{label}


)
}

class App extends Component {
state = { selectedFruits: [] }

onSelectionsChange = (selectedFruits) => {
// selectedFruits is array of { label, value }
this.setState({ selectedFruits })
}

render () {
return (

items={fruits}
renderLabel={renderLabel}
selectedItems={this.state.selectedFruits}
onSelectionsChange={this.onSelectionsChange} />

)
}
}
`

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.