react-native-select-two

Component like Select2 on web for React Native

Single select

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

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>
    )
  }
}

Multiple select

Multiple select

Properties

Property nameTypeDefaultDescription
styleObjectnoneCustom style for component
modalStyleObjectnoneCustom style for modal
titleStringnoneString display when you don’t select any item
dataArray*requiredDatasource of list options: an array of objects (each object have name and id property)
onSelectFunctionnoneThe callback function trigger after you press select button
onRemoveItemFunctionnoneThe callback function trigger after you press tags to remove them
popupTitleStringnoneTitle of modal select item
colorThemestring/color#16a45fColor for componet
isSelectSingleBoolfalseSelelect only one option
showSearchBoxBooltrueShow or hide search field
cancelButtonTextstringHủyCancel button text title
selectButtonTextStringChọnSelect button text title
searchPlaceHolderTextStringNhập vào từ khóaPlaceholder text for search field
listEmptyTitleStringKhông tìm thấy lựa chọn phù hợpTitle to show when there’s no item to be render
defaultFontNameStringnoneSet custom font for all component
selectedTitleStyleObjectnoneSet custom style for display selected title text
buttonTextStyleObjectnoneSet custom button text style
buttonStyleObjectnoneSet custom button style

MIT Licensed

Download Resource