Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (70 sloc) 5.04 KB

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 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 Hủy Cancel button text title
selectButtonText String Chọn Select button text title
searchPlaceHolderText String Nhập vào từ khóa Placeholder text for search field
listEmptyTitle String Không tìm thấy lựa chọn phù hợp 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

MIT Licensed

You can’t perform that action at this time.