add RN 0.20+ support

README.md

@@ -1,5 +1,5 @@
 # react-native-wheel
-the android wheel view for react-native component
+the android wheel view for react-native
 
 ## Installation and How to use
 
@@ -14,13 +14,8 @@ npm install --save react-native-wheel
 // file: android/settings.gradle
 ...
 
-include ':reactwheelview', ':app' 
-project(':reactwheelview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel')
- // if there are more library
- // include ':app' , ':libraryone' , ':librarytwo' , 'more...'
- // project(':libraryonename').projectDir = new File(rootProject.projectDir, '../node_modules/libraryonemodule')
- // project(':librarytwoname').projectDir = new File(rootProject.projectDir, '../node_modules/librarytwomodule')
- // more..
+include ':react-native-wheel', ':app' 
+project(':react-native-wheel').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel')
 ```
 
 #### Step 3 - Update app Gradle Build
@@ -31,7 +26,7 @@ project(':reactwheelview').projectDir = new File(rootProject.projectDir, '../nod
 
 dependencies {
     ...
-    compile project(':reactwheelview')
+    compile project(':react-native-wheel')
 }
 ```
 
@@ -41,26 +36,13 @@ dependencies {
 ...
 import com.heng.wheel.WheelPackage;
 
-public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
-
-    private ReactInstanceManager mReactInstanceManager;
-    private ReactRootView mReactRootView;
 
     @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        mReactRootView = new ReactRootView(this);
-        mReactInstanceManager = ReactInstanceManager.builder()
-                .setApplication(getApplication())
-                .setBundleAssetName("index.android.bundle")
-                .setJSMainModuleName("index.android")
-                .addPackage(new MainReactPackage())
-                .addPackage(new WheelPackage()) // register wheel package
-                .setUseDeveloperSupport(BuildConfig.DEBUG)
-                .setInitialLifecycleState(LifecycleState.RESUMED)
-                .build();
-        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
-        setContentView(mReactRootView);
+    protected List<ReactPackage> getPackages() {
+        return Arrays.<ReactPackage>asList(
+            new MainReactPackage(),
+            new WheelPackage()      // Added there
+        );
     }
 ...
 
@@ -69,70 +51,54 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
 #### Step 5 - Require and use in Javascript
 
 ```js
-// file: index.android.js
-
-'use strict';
 
-var React = require('react-native');
-var {
+import React, { Component } from 'react';
+import {
   AppRegistry,
   StyleSheet,
   Text,
-  ToastAndroid,
   View,
-} = React;
+  ToastAndroid
+} from 'react-native';
 
-var WheelView = require('react-native-wheel');
+import WheelView from './wheel';
 
-var Dimensions = require('Dimensions');
+import Dimensions from 'Dimensions';
 
+let SCREEN_WIDTH = Dimensions.get('window').width;
+let SCREEN_HEIGHT = Dimensions.get('window').height;
 
-var SCREEN_WIDTH = Dimensions.get('window').width;
-var SCREEN_HEIGHT = Dimensions.get('window').height;
 
+let wheelData = [1,'two',false,0.10,'six','seven','eight','nine','ten'];
 
-var wheelData = ['one','two','three','four','five','six','seven','eight','nine','ten'];
+let currentIndex;
 
-var currentIndex;
-
-var AwesomeProject = React.createClass({
-  previous(){
-    this.refs.wheel.previous();
-  },
-  next(){
-    this.refs.wheel.next();
-  },
-  finish(){
-    ToastAndroid.show('select item : ' + wheelData[currentIndex] ,ToastAndroid.LONG);
-  },
-  onItemChange(index){
+class AwesomeProject extends Component {
+  ok(){
+    ToastAndroid.show('select index : ' + currentIndex +' select item : ' + wheelData[currentIndex] ,ToastAndroid.SHORT);
+  }
+  _onItemChange(index){
     currentIndex = index;
-  },
-  render: function() {
+  }
+  render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome} onPress={this.previous} >
-          上一个
-        </Text>
-        <Text style={styles.instructions} onPress={this.next} >
-          下一个
-        </Text>
-        <Text style={styles.instructions} onPress={this.finish} >
-          完成
+        <Text style={styles.ok} onPress={this.ok.bind(this)} >
+          确定
         </Text>
         <WheelView
           style={styles.wheelview}
-          onItemChange={this.onItemChange}
+          onItemChange={this._onItemChange.bind(this)}
           values={wheelData}
           isLoop={false}
           selectedIndex={0}
           textSize={20}
-          ref='wheel'
+          velocityFling={20}
         />
       </View>
     );
   }
-});
+};
 
 var styles = StyleSheet.create({
   container: {
@@ -141,20 +107,10 @@ var styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-  previous: {
-    margin: 20,
-    fontSize: 22,
+  ok: {
+    margin: 5,
     color: '#000000',
-  },
-  next: {
-    margin: 20,
-    color: '#000000',
-    fontSize: 22,
-  },
-  finish: {
-    margin: 20,
-    color: '#000000',
-    fontSize: 22,
+    fontSize: 18,
   },
   wheelview: {
     width: SCREEN_WIDTH,
@@ -167,34 +123,10 @@ AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
 ```
 
 
-## Notes
-
-- Only in the following versions tested , other versions do not guarantee success
-```gradle
-// file: react-native-wheel/build.gradle
-
-android {
-    compileSdkVersion 23  //@
-    buildToolsVersion "23.0.1"  //@
-
-    defaultConfig {
-        minSdkVersion 16 
-        targetSdkVersion 22  //@
-    }
-}
-
-dependencies {
-    compile 'com.facebook.react:react-native:0.16.1'  //@
-}
-
-
-```
-
 ## Reference
 https://github.com/weidongjian/androidWheelView
 
 ## Run Renderings
-<center>
-    <img src="https://github.com/shexiaoheng/react-native-wheel/blob/master/Screenshot/wheel.gif"
-    width="300" height="450"/>
-</center>
+![1](/img/1.jpg)
+![2](/img/2.jpg)
+![3](/img/3.jpg)

build.gradle → android/build.gradle

@@ -11,5 +11,5 @@ android {
 }
 
 dependencies {
-    compile 'com.facebook.react:react-native:0.16.1'
+    compile 'com.facebook.react:react-native:0.20.1'
 }

android/index.js

@@ -0,0 +1,35 @@
+import React,{
+    Component,
+    PropTypes
+} from 'react';
+
+import ReactNative,{
+    requireNativeComponent
+} from 'react-native';
+
+
+let NativeWheelView = requireNativeComponent('RCTWheelView',WheelView);
+
+
+export default class WheelView extends React.Component{
+    static propTypes = {
+        onItemChange: PropTypes.func,
+        values: PropTypes.array,
+        isLoop: PropTypes.bool,
+        selectedIndex: PropTypes.number,
+        textSize: PropTypes.number,
+        itemsVisible: PropTypes.number,
+        velocityFling: PropTypes.number,
+    };
+
+    _onItemChange(event) {
+        if(this.props.onItemChange){
+            this.props.onItemChange(event.nativeEvent.index);
+        }
+    };
+
+    render(){
+        return <NativeWheelView {...this.props} onChange={this._onItemChange.bind(this)} />;
+    }
+};
+