# @schmelman/rns2 > Component like Select2 on web for React Native Latest version **1.1.7** (published 2021-01-13) · MIT license · 0 weekly downloads ## Install ```sh npm install @schmelman/rns2 pnpm add @schmelman/rns2 yarn add @schmelman/rns2 bun add @schmelman/rns2 ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.7 | | Published | 2021-01-13 | | First published | 2021-01-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 20.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | schmelman | | Maintainers | schmelman | | Keywords | react-native, react-component, react-native-component, react, mobile, ios, android, ui, react-native-select2, select2, component | ## Links - npm: https://www.npmjs.com/package/@schmelman/rns2 - Repository: https://github.com/schmelman/rns2 - Homepage: https://github.com/schmelman/rns2#readme - Issues: https://github.com/schmelman/rns2/issues - npm.io page: https://npm.io/package/@schmelman/rns2 ## Dependencies (1) - [react-native-modal](https://npm.io/package/react-native-modal.md) ^11.1.0 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.1.7 (latest) — 2021-01-13 - 1.1.6 — 2021-01-13 - 1.1.5 — 2021-01-12 - 1.1.4 — 2021-01-12 - 1.1.3 — 2021-01-12 - 1.1.2 — 2021-01-12 - 1.1.1 — 2021-01-12 - 1.1.0 — 2021-01-11 ## README # react-native-select-two ## Component like [Select2](https://select2.org/) on web for React Native ![Single select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-single-select.gif) #### Note that this lib isn't mine, originally it was made by [Xuho](https://github.com/xuho), and you can find the original work [here](https://github.com/xuho/react-native-select-two) ## Add it to your project - Using NPM `npm install @schmelman/rns2` - or: - Using Yarn `yarn add @schmelman/rns2` ## Install dependencies 1. [react-native-modal](https://github.com/react-native-community/react-native-modal) 2. [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) ## Usage ```javascript 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 ( { this.setState({ data }) }} onRemoveItem={data => { this.setState({ data }) }} /> ) } } ``` ### Multiple select ![Multiple select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-multipe-select.gif) ## 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 | | **listTextColor** | _Color_ | none | Hex code to change the color of all list items | | **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** --- _Source: https://npm.io/package/@schmelman/rns2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._