when setting new DATA without causing the wheel's layout changed, the wheel has not refresh UI

WheelCurvedPicker.android.js

@@ -1,95 +1,93 @@
-'use strict';
+'use strict'
 
-import React from 'react';
-import {
-	View,
-	ColorPropType,
-	requireNativeComponent,
-} from 'react-native';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, ColorPropType, requireNativeComponent } from 'react-native'
 
+export default class WheelCurvedPicker extends React.Component {
+    static propTypes = {
+        ...View.propTypes,
 
-var WheelCurvedPicker = React.createClass ({
+        data: PropTypes.array,
 
-	propTypes: {
-		...View.propTypes,
+        textColor: ColorPropType,
 
-		data: React.PropTypes.array,
+        indicatorColor: ColorPropType,
 
-		textColor: ColorPropType,
+        textSize: PropTypes.number,
 
-		textSize: React.PropTypes.number,
+        itemStyle: PropTypes.object,
 
-		itemStyle: React.PropTypes.object,
+        itemSpace: PropTypes.number,
 
-		itemSpace: React.PropTypes.number,
+        onValueChange: PropTypes.func,
 
-		onValueChange: React.PropTypes.func,
+        selectedValue: PropTypes.any,
 
-		selectedValue: React.PropTypes.any,
+        selectedIndex: PropTypes.number
+    }
 
-		selectedIndex: React.PropTypes.number,
-	},
+    static defaultProps = {
+        itemStyle: { color: 'white', fontSize: 26 },
+        itemSpace: 20
+    }
 
-	getDefaultProps(): Object {
-		return {
-			itemStyle : {color:"white", fontSize:26},
-			itemSpace: 20,
-		};
-	},
+    constructor(...params) {
+        super(...params)
 
-	getInitialState: function() {
-		return this._stateFromProps(this.props);
-	},
+        this.state = this._stateFromProps(this.props)
+    }
 
-	componentWillReceiveProps: function(nextProps) {
-		this.setState(this._stateFromProps(nextProps));
-	},
+    componentWillReceiveProps(nextProps) {
+        this.setState(this._stateFromProps(nextProps))
+    }
 
-	_stateFromProps: function(props) {
-		var selectedIndex = 0;
-		var items = [];
-		React.Children.forEach(props.children, function (child, index) {
-			if (child.props.value === props.selectedValue) {
-				selectedIndex = index;
-			}
-			items.push({value: child.props.value, label: child.props.label});
-		});
+    _stateFromProps(props) {
+        var selectedIndex = 0
+        var items = []
+        React.Children.forEach(props.children, function(child, index) {
+            if (child.props.value === props.selectedValue) {
+                selectedIndex = index
+            }
+            items.push({ value: child.props.value, label: child.props.label })
+        })
 
-		var textSize = props.itemStyle.fontSize
-		var textColor = props.itemStyle.color
+        var textSize = props.itemStyle.fontSize
+        var textColor = props.itemStyle.color
 
-		return {selectedIndex, items, textSize, textColor};
-	},
+        return { selectedIndex, items, textSize, textColor }
+    }
 
-	_onValueChange: function(e: Event) {
-		if (this.props.onValueChange) {
-			this.props.onValueChange(e.nativeEvent.data);
-		}
-	},
+    _onValueChange(e: Event) {
+        if (this.props.onValueChange) {
+            this.props.onValueChange(e.nativeEvent.data)
+        }
+    }
 
-	render() {
-		return <WheelCurvedPickerNative
-				{...this.props}
-				onValueChange={this._onValueChange}
-				data={this.state.items}
-				textColor={this.state.textColor}
-				textSize={this.state.textSize}
-				selectedIndex={parseInt(this.state.selectedIndex)} />;
-	}
-});
+    render() {
+        return (
+            <WheelCurvedPickerNative
+                {...this.props}
+                onValueChange={this._onValueChange.bind(this)}
+                data={this.state.items}
+                textColor={this.state.textColor}
+                textSize={this.state.textSize}
+                selectedIndex={parseInt(this.state.selectedIndex)}
+            />
+        )
+    }
+}
 
-WheelCurvedPicker.Item = React.createClass({
-	propTypes: {
-		value: React.PropTypes.any, // string or integer basically
-		label: React.PropTypes.string,
-	},
+WheelCurvedPicker.Item = class extends React.Component {
+    static propTypes: {
+        value: PropTypes.any, // string or integer basically
+        label: PropTypes.string
+    }
 
-	render: function() {
-		// These items don't get rendered directly.
-		return null;
-	},
-});
+    render() {
+        // These items don't get rendered directly.
+        return null
+    }
+}
 
-var WheelCurvedPickerNative = requireNativeComponent('WheelCurvedPicker', WheelCurvedPicker);
-
-module.exports = WheelCurvedPicker;
+let WheelCurvedPickerNative = requireNativeComponent('WheelCurvedPicker', WheelCurvedPicker)

android/build.gradle

@@ -2,7 +2,7 @@ apply plugin: 'com.android.library'
 
 android {
     compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    buildToolsVersion '25.0.0'
     defaultConfig {
         minSdkVersion 16
         targetSdkVersion 22
@@ -16,6 +16,6 @@ android {
 
 dependencies {
     compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile "cn.aigestudio.wheelpicker:WheelPicker:1.0.3"
+    compile "cn.aigestudio.wheelpicker:WheelPicker:1.1.2"
     compile 'com.facebook.react:react-native:+'
 }

android/src/main/java/com/zyu/ReactNativeWheelPickerPackage.java

@@ -19,11 +19,6 @@ public List<NativeModule> createNativeModules(ReactApplicationContext reactConte
         return Collections.emptyList();
     }
 
-    @Override
-    public List<Class<? extends JavaScriptModule>> createJSModules() {
-        return Collections.emptyList();
-    }
-
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
         return Arrays.<ViewManager>asList(

android/src/main/java/com/zyu/ReactWheelCurvedPicker.java

@@ -1,15 +1,6 @@
 package com.zyu;
 
-import android.graphics.Canvas;
-import android.graphics.Color;
-import android.graphics.LinearGradient;
-import android.graphics.Paint;
-import android.graphics.Shader;
-import android.os.SystemClock;
-import android.util.AttributeSet;
-
-import com.aigestudio.wheelpicker.core.AbstractWheelPicker;
-import com.aigestudio.wheelpicker.view.WheelCurvedPicker;
+import com.aigestudio.wheelpicker.WheelPicker;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.WritableMap;
@@ -23,60 +14,60 @@
 /**
  * @author <a href="mailto:lesliesam@hotmail.com"> Sam Yu </a>
  */
-public class ReactWheelCurvedPicker extends WheelCurvedPicker {
+public class ReactWheelCurvedPicker extends WheelPicker{
 
     private final EventDispatcher mEventDispatcher;
     private List<Integer> mValueData;
+    private int mState = SCROLL_STATE_IDLE;
+
+    public void setIndicatorColor(Integer indicatorColor) {
+        setIndicator(true);
+        super.setIndicatorColor(indicatorColor);
+    }
 
     public ReactWheelCurvedPicker(ReactContext reactContext) {
         super(reactContext);
         mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
         setOnWheelChangeListener(new OnWheelChangeListener() {
             @Override
-            public void onWheelScrolling(float deltaX, float deltaY) {
+            public void onWheelScrolled(int offset) {
+
             }
 
             @Override
-            public void onWheelSelected(int index, String data) {
-                if (mValueData != null && index < mValueData.size()) {
+            public void onWheelSelected(int position) {
+                if (mValueData != null && position < mValueData.size()) {
                     mEventDispatcher.dispatchEvent(
-                            new ItemSelectedEvent(getId(), mValueData.get(index)));
+                            new ItemSelectedEvent(getId(), mValueData.get(position)));
                 }
+
             }
 
             @Override
             public void onWheelScrollStateChanged(int state) {
+                mState = state;
+
             }
         });
     }
 
     @Override
-    protected void drawForeground(Canvas canvas) {
-        super.drawForeground(canvas);
-
-        Paint paint = new Paint();
-        paint.setColor(Color.WHITE);
-        int colorFrom = 0x00FFFFFF;//Color.BLACK;
-        int colorTo = Color.WHITE;
-        LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR);
-        paint.setShader(linearGradientShader);
-        canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint);
-        canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint);
-    }
-
-    @Override
-    public void setItemIndex(int index) {
-        super.setItemIndex(index);
-        unitDeltaTotal = 0;
-		mHandler.post(this);
+    public void setSelectedItemPosition(int index) {
+        super.setSelectedItemPosition(index);
     }
 
     public void setValueData(List<Integer> data) {
         mValueData = data;
     }
 
     public int getState() {
-        return state;
+        return mState;
+    }
+
+    @Override
+    public void setData(List data) {
+        super.setData(data);
+        this.postInvalidate();
     }
 }
 

android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java

@@ -2,7 +2,7 @@
 
 import android.graphics.Color;
 
-import com.aigestudio.wheelpicker.core.AbstractWheelPicker;
+import com.aigestudio.wheelpicker.WheelPicker;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.MapBuilder;
@@ -27,10 +27,12 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
     @Override
     protected ReactWheelCurvedPicker createViewInstance(ThemedReactContext reactContext) {
         ReactWheelCurvedPicker picker = new ReactWheelCurvedPicker(reactContext);
-        picker.setTextColor(Color.LTGRAY);
-        picker.setCurrentTextColor(Color.WHITE);
-        picker.setTextSize(DEFAULT_TEXT_SIZE);
+        picker.setItemTextColor(Color.LTGRAY);
+        picker.setSelectedItemTextColor(Color.WHITE);
+        picker.setItemTextSize(DEFAULT_TEXT_SIZE);
         picker.setItemSpace(DEFAULT_ITEM_SPACE);
+        picker.setAtmospheric(true);
+        picker.setCurved(true);
 
         return picker;
     }
@@ -59,24 +61,31 @@ public void setData(ReactWheelCurvedPicker picker, ReadableArray items) {
 
     @ReactProp(name="selectedIndex")
     public void setSelectedIndex(ReactWheelCurvedPicker picker, int index) {
-        if (picker != null && picker.getState() == AbstractWheelPicker.SCROLL_STATE_IDLE) {
-            picker.setItemIndex(index);
+        if (picker != null && picker.getState() == WheelPicker.SCROLL_STATE_IDLE) {
+            picker.setSelectedItemPosition(index);
             picker.invalidate();
         }
     }
 
     @ReactProp(name="textColor", customType = "Color")
     public void setTextColor(ReactWheelCurvedPicker picker, Integer color) {
         if (picker != null) {
-            picker.setCurrentTextColor(color);
-            picker.setTextColor(color);
+            picker.setSelectedItemTextColor(color);
+            picker.setItemTextColor(color);
+        }
+    }
+
+    @ReactProp(name="indicatorColor", customType = "Color")
+    public void setIndicatorColor(ReactWheelCurvedPicker picker, Integer color) {
+        if (picker != null) {
+            picker.setIndicatorColor(color);
         }
     }
 
     @ReactProp(name="textSize")
     public void setTextSize(ReactWheelCurvedPicker picker, int size) {
         if (picker != null) {
-            picker.setTextSize((int) PixelUtil.toPixelFromDIP(size));
+            picker.setItemTextSize((int) PixelUtil.toPixelFromDIP(size));
         }
     }
 

index.js

@@ -1,12 +1,9 @@
-'use strict';
+'use strict'
 
-import React from 'react';
+import React from 'react'
 
-import {
-	PickerIOS,
-	Platform,
-} from 'react-native';
+import { PickerIOS, Platform } from 'react-native'
 
 import WheelCurvedPicker from './WheelCurvedPicker'
 
-module.exports = (Platform.OS === 'ios' ? PickerIOS : WheelCurvedPicker)
+export default (Platform.OS === 'ios' ? PickerIOS : WheelCurvedPicker)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wheel-picker",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "React native cross platform picker.",
   "main": "index.js",
   "scripts": {