Home

Awesome

react-native-select-multiple

Build Status dependencies Status JavaScript Style Guide

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

PropDefaultTypeDescription
items-arrayAll items available in the list (array of string or { label, value })
selectedItems[]arrayThe currently selected items (array of string or { label, value })
onSelectionsChange-funcCallback called when a user selects or de-selects an item, passed (selections, item)
keyExtractorindexfunckeyExtractor for the FlatList
checkboxSourceimageobjectImage source for the checkbox (unchecked).
selectedCheckboxSourceimageobjectImage source for the checkbox (checked).
flatListProps{}objectAdditional props for the flat list
styledefault stylesobjectStyle for the FlatList container.
rowStyledefault stylesobjectStyle for the row container.
checkboxStyledefault stylesobjectStyle for the checkbox image.
labelStyledefault stylesobjectStyle for the text label.
selectedRowStyledefault stylesobjectStyle for the row container when selected.
selectedCheckboxStyledefault stylesobjectStyle for the checkbox image when selected.
selectedLabelStyledefault stylesobjectStyle for the text label when selected.
renderLabelnullfuncFunction for render label.
maxSelectnullintMaximum number of selected items

Contribute

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

License

ISC © TABLEFLIP


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