# react-native-picker-view-urara

> Cross platform Picker component for IOS and Android

Latest version **1.0.6** (published 2019-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-picker-view-urara
pnpm add react-native-picker-view-urara
yarn add react-native-picker-view-urara
bun add react-native-picker-view-urara
```

## 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.6 |
| Published | 2019-11-01 |
| First published | 2019-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Surajit Sarkar |
| Maintainers | yulingyi |
| Keywords | NumberPicker, react-native-picker, picker, react native picker, react native, number picker, select, picker view, view, items, urara |

## Links

- npm: https://www.npmjs.com/package/react-native-picker-view-urara
- Repository: https://github.com/yulingyiyi/react-native-picker-view
- Homepage: https://github.com/surajitsarkar19/react-native-picker-view#readme
- Issues: https://github.com/surajitsarkar19/react-native-picker-view/issues
- npm.io page: https://npm.io/package/react-native-picker-view-urara

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2019-11-01

## README

# react-native-picker-view

## Getting started

`$ npm install react-native-picker-view --save`

### Mostly automatic installation

`$ react-native link react-native-picker-view`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-picker-view` and add `SRSPickerView.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libSRSPickerView.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.surajit.rnpv.SRSPickerViewPackage;` to the imports at the top of the file
  - Add `new SRSPickerViewPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':react-native-picker-view'
  	project(':react-native-picker-view').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-picker-view/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-picker-view')
  	```


## Usage
```javascript
import Picker from 'react-native-picker-view';

// TODO: What to do with the module?
<Picker
      values={["Kolkata","Delhi","Hydrabad","Banglore","Pune"]}
      selected={this.state.index}
      style={{width:100,height:200}}
      enableInput={false}
      onSelect={(value,index) => {
          console.log('onSelect', value, index);
          this.setState({index})
      }}
  />
```

## Sample Output

| Android | IOS |
|:---:|:---:|
| <img src="https://raw.githubusercontent.com/surajitsarkar19/react-native-picker-view/master/images/android.gif" width="100%"></img> | <img src="https://raw.githubusercontent.com/surajitsarkar19/react-native-picker-view/master/images/ios.gif" width="80%"></img> |


## props

#### values
Array of values. Array item must be of type string.

#### selected
It is the index of the item that needs to be selected in Picker view. It is a 0 based index. Index less than zero is not supported.

#### enableInput (Android Only)
It is a boolean flag that is determined whether to activate keyboard input in Picker view. This flag is used only for android. 

#### onSelect
It is a callback function, which is called from the library when a selection is changed.
Its signature is :--
```javascript
(selectedValue, selectedIndex) => {
   //selectedValue is the value of the selected item.
   //selectedIndex is the index of the item. 
}
```

---
_Source: https://npm.io/package/react-native-picker-view-urara · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._