@horizonlime/react-native-select-multiple

A customizable FlatList that allows you to select multiple rows AND:

• display checkboxes as disabled
• use icons instead of images

This is a modified version of TABLEFLIP's react-native-select-multiple

Install

npm install @horizonlime/react-native-select-multiple

Usage

import React, { Component } from 'react'
import { View } from 'react-native'
import SelectMultiple from '@horizonlime/react-native-select-multiple'

const fruits = ['Apples', 'Oranges', 'Pears']
// --- OR ---
// const fruits = [
//   { label: 'Apples', value: 'appls', disable: false },
//   { label: 'Oranges', value: 'orngs', disable: true },
//   { label: 'Pears', value: 'pears', disable: false }
// ]

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 '@horizonlime/react-native-select-multiple'
import { Ionicons } from '@expo/vector-icons'

const fruits = ['Apples', 'Oranges', 'Pears']
// --- OR ---
// const fruits = [
//   { label: 'Apples', value: 'appls', disable: false },
//   { label: 'Oranges', value: 'orngs', disable: true },
//   { label: 'Pears', value: 'pears', disable: false }
// ]

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}
          checkboxIcon={<Ionicons name="ios-radio-button-off" size={30} color={grey} />} />
      </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).
disabledCheckboxSource	image	object	Image source for the checkbox (disabled).
checkboxIcon	[element]	object	Icon component for the checkbox (unchecked).
selectedCheckboxIcon	[element]	object	Icon component for the checkbox (checked).
disabledCheckboxIcon	[element]	object	Icon component for the checkbox (disabled).
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.
disabledRowStyle	default styles	object	Style for the row container when disabled.
disabledCheckboxStyle	default styles	object	Style for the checkbox image when disabled.
disabledLabelStyle	default styles	object	Style for the text label when disabled.
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 © Horizon Lime

---

Many thanks to TABLEFLIP's react-native-select-multiple