react-native-select-multiple

A customiseable ListView that allows you to select multiple rows

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-select-multiple
155232.1.03 years ago6 years agoMinified + gzip package size for react-native-select-multiple in KB

Readme

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

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.