# @bahmanbinary/rnpicker

Latest version **1.0.10** (published 2020-09-09) · 0 weekly downloads

## Install

```sh
npm install @bahmanbinary/rnpicker
pnpm add @bahmanbinary/rnpicker
yarn add @bahmanbinary/rnpicker
bun add @bahmanbinary/rnpicker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-09-09 |
| First published | 2020-03-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | bahmanbinary |
| Keywords | React Native, Picker, React Native Picker, Select, Selector, React Native Selector, List, React Native List |

## Links

- npm: https://www.npmjs.com/package/@bahmanbinary/rnpicker
- Repository: https://github.com/BahmanBinary/rnpicker
- Issues: https://github.com/BahmanBinary/rnpicker/issues
- npm.io page: https://npm.io/package/@bahmanbinary/rnpicker

## Dependencies (3)

- [react-native-elements](https://npm.io/package/react-native-elements.md) ^1.2.7
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^6.6.0
- [react-native-responsive-screen](https://npm.io/package/react-native-responsive-screen.md) ^1.4.0

## Recent versions

- 1.0.10 (latest) — 2020-09-09
- 1.0.9 — 2020-09-08
- 1.0.8 — 2020-09-08
- 1.0.7 — 2020-09-08
- 1.0.6 — 2020-09-07
- 1.0.5 — 2020-09-07
- 1.0.4 — 2020-09-07
- 1.0.3 — 2020-09-07
- 1.0.2 — 2020-09-06
- 1.0.0 — 2020-03-17

## README

# RNPicker



## Preface

Hello friends!
For a while I was looking for a good, customizable Picker for react native but most of these pickers have little flexibility. For example you can't support RTL correctly or use custom component for each picker items.



![](./assets/img/RNPicker.gif)



## Documentation

##### Installation

```
npm install @bahmanbinary/rnpicker
```

```
yarn add @bahmanbinary/rnpicker
```



##### APIs

###### Props

|       Prop       |                             Type                             |     Default     |                      Description                      |
| :--------------: | :----------------------------------------------------------: | :-------------: | :---------------------------------------------------: |
|       data       | {label: string \| number, value: string \| number, selected?:boolean}[] |       []        |                  Data for each item                   |
|       rtl        |                           boolean                            |      false      |             Enable right to left support              |
|  itemComponent   |                    React Native Component                    |                 |            Wrapper component for each item            |
|    itemStyle     |                              {}                              |        -        |      Custom style applied to each itemComponent       |
|  iconComponent   | React Native Component (props: { iconColor:string, iconSize:number, iconStyle:{} ,...props:any }) |                 |                    Icon component                     |
|     onSelect     |       ( item:string \| number, index:number ) => void        |        -        | Function that will be executed for each item selected |
|  containerStyle  |                              {}                              |        -        |            RNPicker container custom style            |
|   placeholder    |                            string                            | 'Please select' |                      Placeholder                      |
| placeholderStyle |                              {}                              |        -        |           RNPicker placeholder custom style           |
|    iconColor     |                            string                            |     'black'     |       Icon color applied to each iconComponent        |
|     iconSize     |                            number                            |                 |        Icon size applied to each iconComponent        |
|    iconStyle     |                              {}                              |        -        |      Custom style applied to each iconComponent       |

###### Methods

|    Method     |    Type    |      Description      |
| :-----------: | :--------: | :-------------------: |
| dismissPicker | () => void | Dismiss opened picker |



##### Usage

```javascript
import React,{Component} from 'react';
import RNPicker from '@bahmanbinary/rnpicker';

export default class Example extends Component{
    render(){
return <RNPicker data=[
	{label:'item 1', value:1},
    {label:'item 2', value:2},
    {label:'item 3', value:3, selected:true},
    {label:'item 4', value:4},
    {label:'item 5', value:5}
]        
        />
    }
}
```



*If this project was useful to you, give it a* **Star** *!* ⭐😎😉

---
_Source: https://npm.io/package/@bahmanbinary/rnpicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._