rnm

react-native-multi-select

react native multi select just like select2 on the web

Showing:

Popularity

Downloads/wk

43

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

#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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial