React-native-checkbox-selection NPM

react-native-checkbox-selection

A customizables ListView that allows you to select multiple and single rows.

Install

Using NPM

npm install react-native-checkbox-selection

Using Yarn

yarn add react-native-checkbox-selection

Example

Single Select at a time	Select With Title	Select Without Title

Usage

import React, { Component } from "react";
import { View } from "react-native";
import MultiSelect from "react-native-checkbox-selection";

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>
        <MultiSelect
          data={fruits}
          onSelectedItemsChange={onSelectionsChange}
          selectedItems={this.state.selectedFruits}
          enableTitle
          title={"Select Fruits"}
        />
      </View>
    );
  }
}
export default App;

Properties

Prop	Default	Type	Description
data	`[]`	`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 }`)
onSelectedItemsChange	-	`func`	Callback called when a user selects or de-selects an item, passed `(selections)`
checkboxSource	image	`object`	Image source for the checkbox (unchecked).
selectedCheckboxSource	image	`object`	Image source for the checkbox (checked).	single	`false`	`bool`	Make an signle selection
disableAutoClose	`false`	`bool`	Disable Automatic Closing funcation
iconDisabled	`false`	`bool`	Disable caret icon
enableTitle	`false`	`bool`	enable title for component
icon	`caret-down`	`string`	change caret icon
containerStyle	`{}`	`object`	Style for the container label.
styleTextDropdown	`{}`	`object`	Style for the dropdown text.