tableflip/react-native-select-multiple

Name: react-native-select-multiple

Owner: TABLEFLIP

Description: A customiseable ListView that allows you to select multiple rows

Created: 2016-12-06 09:06:28.0

Updated: 2018-05-25 07:47:10.0

Pushed: 2018-02-28 13:19:41.0

Homepage: null

Size: 44

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-native-select-multiple

A customiseable ListView that allows you to select multiple rows.

Install

install react-native-select-multiple

Usage

rt React, { Component } from 'react'
rt { View } from 'react-native'
rt SelectMultiple from 'react-native-select-multiple'

t fruits = ['Apples', 'Oranges', 'Pears']
-- OR ---
onst fruits = [
 { label: 'Apples', value: 'appls' },
 { label: 'Oranges', value: 'orngs' },
 { label: 'Pears', value: 'pears' }


s App extends Component {
ate = { selectedFruits: [] }

SelectionsChange = (selectedFruits) => {
// selectedFruits is array of { label, value }
this.setState({ selectedFruits })


nder () {
return (
  <View>
    <SelectMultiple
      items={fruits}
      selectedItems={this.state.selectedFruits}
      onSelectionsChange={this.onSelectionsChange} />
  </View>
)

Customize label

rt React, { Component } from 'react'
rt { View, Text, Image } from 'react-native'
rt SelectMultiple from 'react-native-select-multiple'

t fruits = ['Apples', 'Oranges', 'Pears']
-- OR ---
onst fruits = [
 { label: 'Apples', value: 'appls' },
 { label: 'Oranges', value: 'orngs' },
 { label: 'Pears', value: 'pears' }


t renderLabel = (label, style) => {
turn (
<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>



s App extends Component {
ate = { selectedFruits: [] }

SelectionsChange = (selectedFruits) => {
// selectedFruits is array of { label, value }
this.setState({ selectedFruits })


nder () {
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. |

Contribute

Feel free to dive in! Open an issue or submit PRs.

License

ISC © TABLEFLIP

---

A (?°?°???TABLEFLIP side project.