Skip to content

☑️ A customiseable FlatList that allows you to select multiple rows

License

Notifications You must be signed in to change notification settings

tableflip/react-native-select-multiple

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.