react-native-select-multiple

react-native-select-multiple

A customiseable ListView that allows you to select multiple rows.

Example

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>
    )
  }
}

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)
checkboxSource	image	object	Image source for the checkbox (unchecked).
selectedCheckboxSource	image	object	Image source for the checkbox (checked).
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.