expo-sectioned-multi-select v0.0.2

react-native-sectioned-multi-select

A multi (or single) select component with support for sub categories, search, chips. It's intended for long-ish lists, as it opens in a Modal (I might make this optional in the future).

This is based on https://github.com/toystars/react-native-multiple-select. The problems I had were that I needed it to be in a modal, because of nested ScrollViews not working on Android, and I needed to display categories with sub-categories.

Changelog

Usage

npm i -S expo-sectioned-multi-select

Required props:
items | array
uniqueKey | string
onSelectedItemsChange | function

import React, { Component } from 'react';
import {
  View
} from 'react-native';
import SectionedMultiSelect from 'expo-sectioned-multi-select';

const icon = require('./icon.png');

const items = [
  {  
    name: "Fruits",
    id: 0,
    icon: icon, // local required file
    children: [{
        name: "Apple",
        id: 10,
      },{
        name: "Strawberry",
        id: 17,
      },{
        name: "Pineapple",
        id: 13,
      },{
        name: "Banana",
        id: 14,
      },{
        name: "Watermelon",
        id: 15,
      },{
        name: "Kiwi fruit",
        id: 16,
      }]
  },
  {
    name: "Gems",
    id: 1,
    icon: { uri: "https://cdn4.iconfinder.com/data/icons/free-crystal-icons/512/Gemstone.png" } // web uri
    children: [{
        name: "Quartz",
        id: 20,
      },{
        name: "Zircon",
        id: 21,
      },{
        name: "Sapphire",
        id: 22,
      },{
        name: "Topaz",
        id: 23,
      }]
  },
  {
    name: "Plants",
    id: 2,
    icon: "filter_vintage" // material icons icon name
    children: [{
        name: "Mother In Law\'s Tongue",
        id: 30,
      },{
        name: "Yucca",
        id: 31,
      },{
        name: "Monsteria",
        id: 32,
      },{
        name: "Palm",
        id: 33,
      }]
  },
]

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      selectedItems: [],
    }
  }
  onSelectedItemsChange = (selectedItems) => {
    this.setState({ selectedItems });
  }

  render() {
    return (
      <View>
      
        <SectionedMultiSelect
          items={items} 
          uniqueKey='id'
          subKey='children'
          iconKey='icon'
          selectText='Choose some things...'
          showDropDowns={true}
          readOnlyHeadings={true}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={this.state.selectedItems}
        />

      </View>
    );
  }
}

You can programatically remove all items by setting up a ref to the component:

<SectionedMultiSelect
    ...
    ref={SectionedMultiSelect => this.SectionedMultiSelect = SectionedMultiSelect}
/>

and then use the _removeAllItems function:

onPress={() => this.SectionedMultiSelect._removeAllItems()}

You can open the modal programatically with the _toggleSelector() method:

onPress={() => this.SectionedMultiSelect._toggleSelector()}

Items

Your items should have a uniqueKey(default: 'id') and a displayKey (default: 'name'). Any child items of that item should be in subKey, and they will have uniqueKey and displayKey properties. As you can see from the example above, my items all have a unique id property and the child items is an array within the subKey property.

Sub categories are optional, there's no need to have subKey items if you don't want to.

Props

Props, there are lots.

Main

Options

Customization

Colors

You can pass a colors object to theme it how you like.

These are the available colors and their defaults:

Styles

You can pass a styles object to style it how you like.

These are the styles you can change:
container
listContainer
selectToggle
selectToggleText
item
selectedItem
subItem
itemText selectedItemText
selectedSubItemText subItemText
searchBar
center
separator
subSeparator
chipsWrapper
chipContainer
chipText
chipIcon
searchTextInput
scrollView
button
confirmText
cancelButton
itemIconStyle