@evolvier/react-native-select
Version:
A multi (or single) select component
91 lines (69 loc) • 3.83 kB
Markdown
# React Native Select [](https://badge.fury.io/js/%40evolvier%2Freact-native-select) [](https://david-dm.org/evolvier/react-native-select)
A multi (or single) select component
## Installation
This library is available on npm, you need to have [node.js](https://nodejs.org/en/) installed.
install it with npm:
```bash
npm i --save @evolvier/react-native-select
```
Alternatively you can use [yarn](https://yarnpkg.com/lang/en/docs/install/).
```bash
yarn add @evolvier/react-native-select
```
## Usage
```jsx
import React, { Component } from "react";
import ReactNativeSelect from "@evolvier/react-native-select";
class Example extends Component {
render() {
let data = [
{
key: "10011",
title: "William",
subtitle: "Developer",
},
{
key: "10012",
title: "Emma",
subtitle: "UI/UX Designer",
},
{
key: "10013",
title: "James",
},
];
return (
<ReactNativeSelect
items={data}
onSubmit={(selectedItem) => console.log(selectedItem)}
/>
);
}
}
```
## Props
| Property | Type | Default | Description |
| ---------------------------- | ----------------- | --------------- | -------------------------------------- |
| `items` [`*`](#`*`) | `Array` | | Array of objects to populate the list [More info](#items) |
| `onSubmit` [`*`](#`*`) | `Func` | | Called when selectedItem(s) changes |
| `type` | `String` | `select` | Type of selection [`select` or `multi`] |
| `placeholderText` | `String` | "`Select Item`" | Select input placeholder text |
| `renderItem` | `Func` | | |
| `selectedItemsPosition` | `String` | `inside` | Position of selected items in `multi` type [`inside` or `below`] |
| `renderSelectedItem` | `Func` | | |
| `enableSearch` | `Boolean` | `false` | Enable search |
| `searchInputPlaceholderText` | `String` | "`Search...`" | Search box placeholder text |
| `renderSearchInput` | `Func` | | |
| `defaultSelectedItems` | `Array` | | |
| `defaultSelectedItem` | `String | Number` | | |
| `hideOnBackdropPress` | `Boolean` | `false` | |
| `disableAndroidBack` | `Boolean` | `false` | |
###### `*` `isRequired fields`
### items
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
@evolvier/react-native-select is [MIT Licensed](LICENSE).
Copyright 2020 [Evolvier Technologies](https://www.evolvier.com). All rights reserved.