🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-native-select-multiple

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-select-multiple

A customiseable ListView that allows you to select multiple rows

2.1.0
latest
Source
npm
Version published
Weekly downloads
2.1K
-27.08%
Maintainers
1
Weekly downloads
 
Created
Source

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.

Keywords

select

FAQs

Package last updated on 21 Oct 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts