# react-native-wheel

> android wheel view for react-native

Latest version **1.1.4** (published 2018-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-wheel
pnpm add react-native-wheel
yarn add react-native-wheel
bun add react-native-wheel
```

## 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.1.4 |
| Published | 2018-02-06 |
| First published | 2015-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | heng |
| Maintainers | heng, shexiaoheng |
| Keywords | react-native-wheel |

## Links

- npm: https://www.npmjs.com/package/react-native-wheel
- Repository: https://github.com/shexiaoheng/react-native-wheel
- Homepage: https://github.com/shexiaoheng/react-native-wheel#readme
- Issues: https://github.com/shexiaoheng/react-native-wheel/issues
- npm.io page: https://npm.io/package/react-native-wheel

## Recent versions

- 1.1.4 (latest) — 2018-02-06
- 1.1.3 — 2016-11-03
- 1.1.2 — 2016-08-03
- 1.1.1 — 2016-08-03
- 1.0.8 — 2015-12-21
- 1.0.7 — 2015-12-09
- 1.0.6 — 2015-12-09
- 1.0.5 — 2015-12-09
- 1.0.4 — 2015-12-03
- 1.0.3 — 2015-12-02
- 1.0.2 — 2015-12-02
- 1.0.1 — 2015-11-30
- 1.0.0 — 2015-11-27

## README

# react-native-wheel [![npm version](https://img.shields.io/npm/v/react-native-wheel.svg?style=flat-square)](https://www.npmjs.com/package/react-native-wheel) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) <a href="https://david-dm.org/shexiaoheng/react-native-wheel"><img src="https://david-dm.org/shexiaoheng/react-native-wheel.svg" alt="Dependency Status"></a>
RN的Android滚轮组件

### [Combination use](https://github.com/beefe/react-native-picker)

## PropTypes
* values            数据源（支持 String int double boolean）
* isLoop            是否循环滚动
* textSize          字体大小
* selectedIndex     默认选中的下标
* velocityFling     滚动速度，建议 15-25
* onItemChange      滚动回调

## Install And Use

#### Npm Install

```shell
$ npm install --save react-native-wheel
```

#### Update Gradle Settings
```gradle
// 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

```gradle
// file: android/app/build.gradle
...

dependencies {
  ...
  compile project(':react-native-wheel')
}
```

#### Register React Package

```java
// 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
            );
        }
    };

```

#### Use

```js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ToastAndroid
} from 'react-native';

import WheelView from 'react-native-wheel';

import Dimensions from 'Dimensions';

let SCREEN_WIDTH = Dimensions.get('window').width;
let SCREEN_HEIGHT = Dimensions.get('window').height;


let wheelData = [1,'two',false,0.10,'six','seven','eight','nine','ten'];

let currentIndex;

class AwesomeProject extends Component {
  ok(){
    ToastAndroid.show('select index : ' + currentIndex +' select item : ' + wheelData[currentIndex] ,ToastAndroid.SHORT);
  }
  _onItemChange(index){
    currentIndex = index;
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.ok} onPress={this.ok.bind(this)} >
          确定
        </Text>
        <WheelView
          style={styles.wheelview}
          onItemChange={this._onItemChange.bind(this)}
          values={wheelData}
          isLoop={false}
          selectedIndex={0}
          textSize={20}
          velocityFling={20}
        />
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  ok: {
    margin: 5,
    color: '#000000',
    fontSize: 18,
  },
  wheelview: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT/5*2,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

```

## Run Renderings
![1](/img/1.jpg)
![2](/img/2.jpg)
![3](/img/3.jpg)

## Reference
https://github.com/weidongjian/androidWheelView

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