1.0.5 • Published 2 years ago

@marcelodiegues/react-native-select2 v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-select2

Component like Select2 on web for React Native

Single select

Add it to your project

  • Using NPM npm i @marcelodiegues/react-native-select2

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-select2"

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
cancelButtonTextstringCancelCancel button text title
selectButtonTextStringSelectSelect button text title
searchPlaceHolderTextStringSearch...Placeholder text for search field
listEmptyTitleStringNo matches foundTitle 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
disabledSelectBoolnoneDisable Select

MIT Licensed