# react-native-select-list
> Simple **select** for React Native Applications.
Latest version **1.0.5** (published 2017-02-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-select-list
pnpm add react-native-select-list
yarn add react-native-select-list
bun add react-native-select-list
```
## 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.0.5 |
| Published | 2017-02-20 |
| First published | 2017-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Georgi Stoilov |
| Maintainers | georgest |
| Keywords | react-native-select, react-native-dropdown, android, ios, react-native-component, react-native |
## Links
- npm: https://www.npmjs.com/package/react-native-select-list
- npm.io page: https://npm.io/package/react-native-select-list
## 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.0.5 (latest) — 2017-02-20
- 1.0.4 — 2017-02-12
- 1.0.2 — 2017-02-12
- 1.0.1 — 2017-02-12
- 1.0.0 — 2017-02-12
## README
# React Native Select List
Simple **select** for React Native Applications.
[](https://github.com/georgest/react-native-select-list/issues)
[](https://github.com/georgest/react-native-select-list/blob/master/LICENSE)
___
## Instalation
```
npm i react-native-select-list --save-dev
```
## Usage
```js
import { Select, Option } from 'react-native-select-list';
```
### Select properties
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **onSelect** | Function | null | This function is invoked when some option is selected. |
| **padding** | number | 10 | Horizontal padding for select box. Text is always centered vertially. |
| **zIndex** | number | 999 | It is used to pop the select above all other elements. |
| **selectStyle** | Object | null | Set custom style to your select. |
| **selectTextStyle** | Object | null | Set custom style to your select box text. |
| **caret** | string or React element | null | You can set default caret with setting this property to 'down' or 'up'. If you want to set some custom image or view you can set an element to the caret property. Explicitly set width and height to caret element if you are using an Image element. |
| **caretSize** | number | 15 | Customize caret size. It is used only when caret is set to 'down' or 'up'. |
| **caretColor** | string | '#333333' | Customize caret color. It is used only when caret is set to 'down' or 'up'. |
| **listHeight** | number | 100 | The maximum list height.
| **listPosition** | string | 'down' | Change position of dropdown list. You can set it 'up', so it will shows above the select. If dropdown cannot fit the screen size it will expand to the oposite direction. |
| **listStyle** | Object | null | Styles for dropdown list.
### Option properties
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **optionStyle** | Object | null | Set custom style to Option element. |
| **optionTextStyle** | Object | null | Set custom style to Option text. |
| **last** | boolean | false | Add it to last element so it will not have bottom border. |
---
_Source: https://npm.io/package/react-native-select-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
___
## Instalation
```
npm i react-native-select-list --save-dev
```
## Usage
```js
import { Select, Option } from 'react-native-select-list';
```
### Select properties
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **onSelect** | Function | null | This function is invoked when some option is selected. |
| **padding** | number | 10 | Horizontal padding for select box. Text is always centered vertially. |
| **zIndex** | number | 999 | It is used to pop the select above all other elements. |
| **selectStyle** | Object | null | Set custom style to your select. |
| **selectTextStyle** | Object | null | Set custom style to your select box text. |
| **caret** | string or React element | null | You can set default caret with setting this property to 'down' or 'up'. If you want to set some custom image or view you can set an element to the caret property. Explicitly set width and height to caret element if you are using an Image element. |
| **caretSize** | number | 15 | Customize caret size. It is used only when caret is set to 'down' or 'up'. |
| **caretColor** | string | '#333333' | Customize caret color. It is used only when caret is set to 'down' or 'up'. |
| **listHeight** | number | 100 | The maximum list height.
| **listPosition** | string | 'down' | Change position of dropdown list. You can set it 'up', so it will shows above the select. If dropdown cannot fit the screen size it will expand to the oposite direction. |
| **listStyle** | Object | null | Styles for dropdown list.
### Option properties
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **optionStyle** | Object | null | Set custom style to Option element. |
| **optionTextStyle** | Object | null | Set custom style to Option text. |
| **last** | boolean | false | Add it to last element so it will not have bottom border. |
---
_Source: https://npm.io/package/react-native-select-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._