Skip to content
Component like Select2 on web for React Native
JavaScript
Branch: master
Clone or download

Latest commit

Nguyễn Xuân Hoà
Nguyễn Xuân Hoà update readme
Latest commit df526e6 Mar 20, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib add custom style, update README Sep 2, 2019
LICENSE
README.md
index.js Update 1.1.0 Dec 16, 2019
package.json

README.md

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.