react-native-multi-selectbox

react-native-multi-selectbox

Renders the Picker/SelectBox/Dropdown with common styling for iOS/Android.

Getting started

How to install:

npm install react-native-multi-selectbox

or

yarn add react-native-multi-selectbox

How to use ?

import React from 'react'
import { SelectBox } from 'react-native-multi-selectbox '
import { xor } from 'lodash'

class Example extends React.Component {
  state = {
    selectedLocations: [],
    selectedValues: [],
    locations: [
      { item: 'Afghanistan', id: 'AF' },
      { item: 'land Islands', id: 'AX' },
      { item: 'Albania', id: 'AL' },
      { item: 'Algeria', id: 'DZ' },
      { item: 'American Samoa', id: 'AS' },
      { item: 'AndorrA', id: 'AD' },
      { item: 'Angola', id: 'AO' },
      { item: 'Anguilla', id: 'AI' },
      { item: 'Antarctica', id: 'AQ' },
      { item: 'Antigua and Barbuda', id: 'AG' },
      { item: 'Argentina', id: 'AR' },
      { item: 'Armenia', id: 'AM' },
      { item: 'Aruba', id: 'AW' },
      { item: 'Australia', id: 'AU' },
      { item: 'Austria', id: 'AT' },
      { item: 'Azerbaijan', id: 'AZ' },
      { item: 'Bahamas', id: 'BS' },
      { item: 'Bahrain', id: 'BH' },
      { item: 'Bangladesh', id: 'BD' },
      { item: 'Barbados', id: 'BB' },
      { item: 'Belarus', id: 'BY' },
      { item: 'Belgium', id: 'BE' },
      { item: 'Belize', id: 'BZ' },
      { item: 'Benin', id: 'BJ' },
      { item: 'Bermuda', id: 'BM' },
      { item: 'Bhutan', id: 'BT' },
      { item: 'Bolivia', id: 'BO' },
      { item: 'Bosnia and Herzegovina', id: 'BA' },
      { item: 'Botswana', id: 'BW' },
      { item: 'Bouvet Island', id: 'BV' },
      { item: 'Brazil', id: 'BR' },
      { item: 'British Indian Ocean Territory', id: 'IO' },
      { item: 'Brunei Darussalam', id: 'BN' },
      { item: 'Bulgaria', id: 'BG' },
      { item: 'Burkina Faso', id: 'BF' },
      { item: 'Burundi', id: 'BI' },
      { item: 'Cambodia', id: 'KH' },
      { item: 'Cameroon', id: 'CM' },
      { item: 'Canada', id: 'CA' },
      { item: 'Cape Verde', id: 'CV' },
      { item: 'Cayman Islands', id: 'KY' },
      { item: 'Central African Republic', id: 'CF' },
      { item: 'Chad', id: 'TD' },
      { item: 'Chile', id: 'CL' },
      { item: 'China', id: 'CN' },
      { item: 'Christmas Island', id: 'CX' },
      { item: 'Cocos (Keeling) Islands', id: 'CC' },
      { item: 'Colombia', id: 'CO' },
      { item: 'Comoros', id: 'KM' },
      { item: 'Congo', id: 'CG' },
      { item: 'Congo, The Democratic Republic of the', id: 'CD' },
      { item: 'Cook Islands', id: 'CK' },
      { item: 'Costa Rica', id: 'CR' },
      { item: "Cote D'Ivoire'", id: 'CI' },
      { item: 'Croatia', id: 'HR' },
      { item: 'Cuba', id: 'CU' },
      { item: 'Cyprus', id: 'CY' },
      { item: 'Czech Republic', id: 'CZ' },
      { item: 'Denmark', id: 'DK' },
      { item: 'Djibouti', id: 'DJ' },
      { item: 'Dominica', id: 'DM' },
      { item: 'Dominican Republic', id: 'DO' },
      { item: 'Ecuador', id: 'EC' },
      { item: 'Egypt', id: 'EG' },
      { item: 'El Salvador', id: 'SV' },
      { item: 'Equatorial Guinea', id: 'GQ' },
      { item: 'Eritrea', id: 'ER' },
      { item: 'Estonia', id: 'EE' },
      { item: 'Ethiopia', id: 'ET' },
      { item: 'Falkland Islands (Malvinas)', id: 'FK' },
      { item: 'Faroe Islands', id: 'FO' },
      { item: 'Fiji', id: 'FJ' },
      { item: 'Finland', id: 'FI' },
      { item: 'France', id: 'FR' },
      { item: 'French Guiana', id: 'GF' },
      { item: 'French Polynesia', id: 'PF' },
      { item: 'French Southern Territories', id: 'TF' },
      { item: 'Gabon', id: 'GA' },
      { item: 'Gambia', id: 'GM' },
      { item: 'Georgia', id: 'GE' },
      { item: 'Germany', id: 'DE' },
      { item: 'Ghana', id: 'GH' },
      { item: 'Gibraltar', id: 'GI' },
      { item: 'Greece', id: 'GR' },
      { item: 'Greenland', id: 'GL' },
      { item: 'Grenada', id: 'GD' },
      { item: 'Guadeloupe', id: 'GP' },
      { item: 'Guam', id: 'GU' }
    ]
  }

  render() {
    const { locations, selectedLocations, selectedValues } = this.state
    return (
      <React.Fragment>
        <SelectBox
          label="Select Location"
          options={locations}
          value={selectedLocations[0]}
          onChange={val => this.setState({ selectedLocations: [val] })}
          hideInputFilter={false}
          viewMargin="0 0 20px 0"
        />
        <SelectBox
          label="Select Groups"
          options={locations}
          selectedValues={selectedValues}
          onMultiSelect={item => this.setState({ selectedValues: xor(selectedValues, [item]) })}
          onTapClose={val => this.setState({ selectedValues: xor(selectedValues, [val]) })}
          viewMargin="0 0 20px 0"
          isMulti
        />
      </React.Fragment>
    )
  }
}