react-select2-native

Component like Select2 on web for React Native

Add it to your project

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

Install dependencies

1. react-native-modal
2. react-native-vector-icons

Usage

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import Select2 from "react-select2-native";
 
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>
    );
  }
}

Multiple select

Properties

Property name	Type	Default	Description
style	Object	none	Custom style for component
modalStyle	Object	none	Custom style for modal
title	String	none	String display when you don't select any item
data	Array	*required	Datasource of list options: an array of objects (each object have name and id property)
onSelect	Function	none	The callback function trigger after you press select button
onRemoveItem	Function	none	The callback function trigger after you press tags to remove them
popupTitle	String	none	Title of modal select item
colorTheme	string/color	#16a45f	Color for componet
isSelectSingle	Bool	false	Selelect only one option
showSearchBox	Bool	true	Show or hide search field
cancelButtonText	string	Cancel	Cancel button text title
selectButtonText	String	Select	Select button text title
searchPlaceHolderText	String	Start typing...	Placeholder text for search field
listEmptyTitle	String	No item to select	Title to show when there's no item to be render
defaultFontName	String	none	Set custom font for all component
selectedTitleStyle	Object	none	Set custom style for display selected title text
buttonTextStyle	Object	none	Set custom button text style
buttonStyle	Object	none	Set custom button style
value	string	none	Selected Value
searchBoxTextChanged	Function	none	Function fired when the search box text has changed

MIT Licensed