/react-native-select-multiple

A customiseable ListView that allows you to select multiple rows

Primary LanguageJavaScriptISC LicenseISC

react-native-select-multiple dependencies Status

A customiseable ListView that allows you to select multiple rows.

select-multiple

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

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)
checkboxSource image object Image source for the checkbox (unchecked).
selectedCheckboxSource image object Image source for the checkbox (checked).
listViewProps {} object Additional props for the list view
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.
renderLabel null func Function for render label.

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

js-standard-style