Awesome

react-native-select-multiple

A customiseable FlatList that allows you to select multiple rows.

select-multiple

Install

npm install react-native-select-multiple

Usage

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.
maxSelect	null	`int`	Maximum number of selected items

Contribute

Feel free to dive in! Open an issue or submit PRs.

License

A (╯°□°）╯︵TABLEFLIP side project.