Neil Patrick's Mansion
Need private packages and team management tools?Check out npm Orgs. »

react-native-select-multiple

2.1.0 • Public • Published

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.

Install

npm i react-native-select-multiple

DownloadsWeekly Downloads

516

Version

2.1.0

License

ISC

Unpacked Size

14.7 kB

Total Files

10

Last publish

Collaborators

  • avatar