@quanterdynamic/react-native-multiple-select

react-native-multiple-select

A customiseable FlatList that allows you to select multiple rows with custom objects as you want.

Install

npm i @quanterdynamic/react-native-multiple-select

Usage

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import SelectMultiple from '@quanterdynamic/react-native-multiple-select'


const renderLabel = (item) => {
  return (
    <View style={{ marginLeft: 5 }}>
       <Text style={[ { marginLeft: 0 }]}>Id #{item.id} </Text>
       <Text style={[ { marginLeft: 0 }]} >{item.name.firstName}</Text>
       <Text style={[ { marginLeft: 0 }]} >{item.name.lastName}</Text>
       <Text style={[ { marginLeft: 0, marginBottom: 0 }]} >Age {item.age}</Text>
    </View>
  )
}
//any form of array object
let people  = [
    {id : 1, name: {firstName : 'John' , lastName : 'Wick'}, age: '20' },
    {id : 2, name: {firstName : 'Amar',lastName : 'Kham'}, age: '18' },
    {id : 3, name: {firstName : 'Jenny' , lastName : 'Lopez'}, age: '23' }
  ]

class App extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      people: [],
      selectedPeople: [],
    };
  }

  componentDidMount (){
    this.setState({
      people : people 
    })
  }

  onSelectionsChange = (selectedPeople) => {
    this.setState({ selectedPeople })
  }


  render() {
    
    return (
      <View style={{flex : 1}}>
      
        <SelectMultiple
          items={people }
          renderLabel={renderLabel}
          selectedItems={this.state.selectedPeople}
          onSelectionsChange={this.onSelectionsChange} />
     
        </View>
    );
  }
 
}

export default App;