Component like Select2 on web for React Native

react-native-select-two

Component like Select2 on web for React Native.

Add it to your project

1. Insall package
   • Using NPM
     npm install react-native-select-two
   • Using Yarn
     yarn add react-native-select-two
2. Import package
   import Select2 from 'react-native-select-two';

Usage

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Select2 from 'react-native-select-two';

const mockData = [
    { id: 1, name: 'React Native Developer' },
    { id: 2, name: 'Android Developer' },
    { id: 3, name: 'iOS Developer' }
];

// create a component
class CreateNewAppointment extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Select2
                    isSelectSingle
                    style={{ borderRadius: 5 }}
                    colorTheme={'blue'}
                    popupTitle='Select item'
                    title='Select item'
                    data={mockData}
                    onSelect={data => {
                        this.setState({ data });
                    }}
                    onRemoveItem={data => {
                        this.setState({ data });
                    }} 
                />
            </View>
        );
    }
}

Usage

Single select

Multiple select

Props

• style (Object) - Custom style for component
• title (String) String display when you don't select any item
• data (Array) - Datasource of list options: an array of objects (each object have name property)
• onSelect (Function) - The callback function trigger after you press select button
• onRemoveItem (Function) - The callback function trigger after you press tags to remove them
• popupTitle (String) - Title of modal select item
• colorTheme (String) - Color theme
• isSelectSingle (Bool) - Set false if you want select multiple
• cancelButtonText (String) - Cancel button text title
• selectButtonText (String) - Select button text title

GitHub