# 23mofang-react-native-picker

> cross platform picker for Ios and Android

Latest version **1.0.2** (published 2017-12-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install 23mofang-react-native-picker
pnpm add 23mofang-react-native-picker
yarn add 23mofang-react-native-picker
bun add 23mofang-react-native-picker
```

## 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.2 |
| Published | 2017-12-26 |
| First published | 2017-10-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | youkaisteve |
| Maintainers | 23mf |
| Keywords | react-native, picker |

## Links

- npm: https://www.npmjs.com/package/23mofang-react-native-picker
- Repository: https://github.com/MonkeyKingPlus/react-native-picker
- Homepage: https://github.com/MonkeyKingPlus/react-native-picker#readme
- Issues: https://github.com/MonkeyKingPlus/react-native-picker/issues
- npm.io page: https://npm.io/package/23mofang-react-native-picker

## Dependencies (1)

- [react-native-wheel](https://npm.io/package/react-native-wheel.md) ^1.1.3

## Recent versions

- 1.0.2 (latest) — 2017-12-26
- 1.0.1 — 2017-10-16
- 1.0.0 — 2017-10-16

## README

# react-native-picker
<!-- badge -->
[![travis status](https://img.shields.io/travis/MonkeyKingPlus/react-native-picker.svg)](https://travis-ci.org/MonkeyKingPlus/react-native-picker)
[![npm version](https://img.shields.io/npm/v/mkp-react-native-picker.svg)](https://www.npmjs.com/package/mkp-react-native-picker)
[![npm license](https://img.shields.io/npm/l/mkp-react-native-picker.svg)](https://www.npmjs.com/package/mkp-react-native-picker)
[![npm download](https://img.shields.io/npm/dm/mkp-react-native-picker.svg)](https://www.npmjs.com/package/mkp-react-native-picker)
[![npm download](https://img.shields.io/npm/dt/mkp-react-native-picker.svg)](https://www.npmjs.com/package/mkp-react-native-picker)
<!-- endbadge -->
Cross platform picker for IOS and Android.
It is based on PickerIOS for IOS while [react-native-wheel](https://github.com/shexiaoheng/react-native-wheel) for android.

![Image](doc/android.gif) ![Image](doc/ios.gif)

# Guide
## npm install
    $ npm i mkp-react-native-picker --save
## Update Gradle Settings
    // file: android/settings.gradle
    ...
    include ':react-native-wheel'
    project(':react-native-wheel').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel/android')
## Update app Gradle Build
    // file: android/app/build.gradle
    ...
    
    dependencies {
      ...
      compile project(':react-native-wheel')
    }
## Register React Package
    // file: android/src/main/java/com.xx/MainApplication.java
    ...
    
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
            protected boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }
    
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new WheelPackage()          // Added there
                );
            }
        };
## Usage
```js
import React ,{Component}from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Platform
} from 'react-native';

import BaseComponent from './baseComponent';
import SinglePicker from 'mkp-react-native-picker';

import {viewStyles} from '../themes/default';

const options = [{
    key: 1,
    value: "Option1"
}, {
    key: 2,
    value: "Option2"
}, {
    key: 3,
    value: "Option3"
}]

const another_options = [{
    key: 1,
    value: "OptionA"
}, {
    key: 2,
    value: "OptionB"
}, {
    key: 3,
    value: "OptionC"
}];

const optionsGroup = [options, another_options]

export default class Picker extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            selected: ''
        }
        this.optionsGroupIndex = 0
    }

    render() {
        return <View style={viewStyles.main}>
            <TouchableOpacity
                style={{height:30,flexDirection:'row',justifyContent:'center',alignItems:'center',backgroundColor:'red'}}
                onPress={()=>{
                    this.singlePicker.show();
                }}>
                <Text style={{fontSize:18,color:'white',fontWeight:'bold'}}>Single Picker(Click Me!)</Text>
            </TouchableOpacity>

            <View style={{height:50,justifyContent:'center'}}><Text>You have
                selected {this.state.selected}</Text></View>

            <TouchableOpacity
                style={{height:30,flexDirection:'row',justifyContent:'center',alignItems:'center',backgroundColor:'red'}}
                onPress={()=>{
                    this.optionsGroupIndex = Math.abs(this.optionsGroupIndex - 1)
                    this.singlePicker.setOption(optionsGroup[this.optionsGroupIndex]);
                }}>
                <Text>Switch Options</Text>
            </TouchableOpacity>

            <SinglePicker
                lang="en-US"
                ref={ref=>this.singlePicker=ref}
                onConfirm={(option)=>{
                    //this.setState({selected:option.value})
                }}
                onSelect={(option)=>{
                    this.setState({selected:option.value})
                }}
                options={options}
            >

            </SinglePicker>
        </View>
    }
}
```
    
# Documentation

## Properties
Key | Type | Required | Default | Description
--- | ---- | -------- | ------- | -----------
options | array | yes | | must be an array of key-value pairs,like {key:1,value:'option'}
lang | string | no | 'zh-CN' | enums:'zh-CN','en-US','es-AR',indicate the language of the text in buttons
style | object | no | {backgroundColor: "white"} | 
defaultSelectedValue | any | no |  | key of each option,if undefined, the first option will be selected
onConfirm | function | no | | option that be selected as the parameter
onSelect | function | no | | option that be selected as the parameter
onCancel | function | no | |     

## Methods
Name | Description
---- | -----------
show | show the Picker
hide | hide the Picker
setOption(options,defaultSelectedValue) | change options of the Picker

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