/ Select

Component like Select2 on web for React Native

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
react-native-select2-single-select
Multiple select
react-native-select2-multipe-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