React Native Multi Select

you know select2 on web ? now you have it in react native at your command :)

Demo

Installation

npm i -S react-native-multi-select

Example

LocationDropDown.js

 
import React, {Component, PropTypes} from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';
import { Select, SelectTextBox, Option, OptionList } from 'react-native-multi-select';
 
 
export default class LocationDropDown extends Component {
    static propTypes = {};
 
    cities = [
        'Babolsar',
        'Sari',
        'Babol',
        'Qaemshahr',
        'Gorgan',
        'Tehran',
        'ali abad',
        'gonbad',
        'mashhad',
        'esfehan',
        'shiraz',
        'kerman',
        'ilam',
        'sanandaj',
        'mahshahr',
        'behshar',
        'tonekabon'
    ];
 
    state = {
        selectedItem: [],
        text: "",
        displayOptionList: false
    };
 
    updateText = text => {
        this.setState({text});
    };
 
    addItem = item => {
        this.setState({selectedItem: [...this.state.selectedItem, item]})
    };
 
    removeItem = removedItem => {
        this.setState({
            selectedItem: this.state.selectedItem.filter(item => {
                if (item._id !== removedItem._id)
                    return item;
            })
        });
    };
 
    render() {
        return (
            <Select style={styles.select}>
                <SelectTextBox
                    selectedItem={this.state.selectedItem}
                    placeholder={"شهر خود را انتخاب کنید."}
                    onPressOut={(removedItem) => this.setState({
                        selectedItem: this.state.selectedItem.filter(text => {
                            if (text !== removedItem)
                                return text;
                        })
                    })}
                    onTextInputFocus={() => this.setState({displayOptionList: true})}
                    onTextInputLoosFocus={() => this.setState({displayOptionList: false})}
                    onSelectTextBoxChanged={event => this.updateText(event.nativeEvent.text)}
                />
                <OptionList
                    text={this.state.text}
                    items={this.cities}
                    display={this.state.displayOptionList}
                    onAnItemSelected={item => this.addItem(item)}
                    removeItem={item => this.removeItem(item)}>
                    {this.cities.map((city, index) => <Option
                        onPress={item => this.setState({selectedItem: [...this.state.selectedItem, item]})}
                        key={index}
                        value={{_id: Math.random()}}>
                        {city}
                    </Option>)}
                </OptionList>
            </Select>
        );
    }
}
 
const styles = StyleSheet.create({
    select: {
        backgroundColor: '#6A85B1',
        width: 300,
    }
});
 
     

index.android.js

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import LocationDropDown from './LocationDropDown';
 
class App extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <LocationDropDown/>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({});
 
AppRegistry.registerComponent('dropdown', () => App);
 

Any contributions are welcome