react-native-select-two

Component like Select2 on web for React Native

Add it to your project

• Using NPM npm install react-native-select-two
• or:
• Using Yarn yarn add react-native-select-two

Install dependencies

1. react-native-modal

2. react-native-vector-icons

3. Insall package

   • Using NPM npm install react-native-select-two
   • Using Yarn yarn add react-native-select-two

4. 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', checked: true }, // set default checked for render option item
    { 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
• showSearchBox (Bool) - Set false if you want hide search box, default value is true
• cancelButtonText (String) - Cancel button text title
• selectButtonText (String) - Select button text title
• defaultFontName (String) - Set custom font for all components
• selectedTitlteStyle (Object) - Set custom style for display selected title text
• buttonTextStyle (Object) - Set custom button text style
• buttonStyle (Object) - Set custom button style

MIT Licensed