Exposed Line Color, Line Gradient Start Color, Line Gradient End Color as props.

README.md

@@ -90,7 +90,11 @@ export default class App extends Component<{}> {
 				<Text style={styles.welcome}>
 					Welcome to React Native!
 				</Text>
+
 				<Picker style={{width: 150, height: 180}}
+				        lineColor="#000000" //to set top and bottom line color (Without gradients)
+				        lineGradientColorFrom="#008000" //to set top and bottom starting gradient line color
+				        lineGradientColorTo="#FF5733" //to set top and bottom ending gradient line color
 					selectedValue={this.state.selectedItem}
 					itemStyle={{color:"white", fontSize:26}}
 					onValueChange={(index) => this.onPickerSelect(index)}>

WheelCurvedPicker.android.js

@@ -22,33 +22,15 @@ const WheelCurvedPickerNativeInterface = {
 		onValueChange: PropTypes.func,
 		selectedValue: PropTypes.any,
 		selectedIndex: PropTypes.number,
+		lineColor: PropTypes.any,
+		lineGradientColorFrom: PropTypes.any,
+		lineGradientColorTo: PropTypes.any,
 	}
 }
 
 const WheelCurvedPickerNative = requireNativeComponent('WheelCurvedPicker', WheelCurvedPickerNativeInterface);
 
 class WheelCurvedPicker extends React.Component {
-
-	propTypes: {
-		...View.propTypes,
-
-		data: PropTypes.array,
-
-		textColor: ColorPropType,
-
-		textSize: PropTypes.number,
-
-		itemStyle: PropTypes.object,
-
-		itemSpace: PropTypes.number,
-
-		onValueChange: PropTypes.func,
-
-		selectedValue: PropTypes.any,
-
-		selectedIndex: PropTypes.number,
-	}
-
 	constructor(props){
 		super(props)
 		this.state = this._stateFromProps(props)
@@ -97,16 +79,31 @@ class WheelCurvedPicker extends React.Component {
 }
 
 class Item extends React.Component {
-	propTypes: {
-		value: React.PropTypes.any, // string or integer basically
-		label: React.PropTypes.string,
-	}
-
 	render () {
 		// These items don't get rendered directly.
 		return null;
 	}
 }
+
+WheelCurvedPicker.propTypes = {
+	...View.propTypes,
+	data: PropTypes.array,
+	textColor: ColorPropType,
+	textSize: PropTypes.number,
+	itemStyle: PropTypes.object,
+	itemSpace: PropTypes.number,
+	onValueChange: PropTypes.func,
+	selectedValue: PropTypes.any,
+	selectedIndex: PropTypes.number,
+	lineColor: PropTypes.any,
+	lineGradientColorFrom: PropTypes.any,
+	lineGradientColorTo: PropTypes.any
+}
+
+Item.propTypes = {
+	value: PropTypes.any, // string or integer basically
+	label: PropTypes.string,
+}
 
 WheelCurvedPicker.Item = Item;
 

android/build.gradle

@@ -1,11 +1,11 @@
 apply plugin: 'com.android.library'
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 28
+    buildToolsVersion "28.0.3"
     defaultConfig {
         minSdkVersion 16
-        targetSdkVersion 22
+        targetSdkVersion 28
         versionCode 1
         versionName "1.0"
         ndk {

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

@@ -27,6 +27,11 @@ public class ReactWheelCurvedPicker extends WheelCurvedPicker {
 
     private final EventDispatcher mEventDispatcher;
     private List<Integer> mValueData;
+
+    private Integer mLineColor = Color.WHITE; // Default line color
+    private boolean isLineGradient = false;    // By default line color is not a gradient
+    private Integer mLinegradientFrom = Color.BLACK; // Default starting gradient color
+    private Integer mLinegradientTo = Color.WHITE; // Default end gradient color
 
     public ReactWheelCurvedPicker(ReactContext reactContext) {
         super(reactContext);
@@ -55,14 +60,33 @@ 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);
+        paint.setColor(Color.BLACK); // changed this from WHITE to BLACK
+
+	if (this.isLineGradient) {
+	  int colorFrom = this.mLinegradientFrom;
+	  int colorTo = this.mLinegradientTo;
+
+	  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);
     }
+
+    public void setLineColor(Integer color) {
+        this.mLineColor = color;
+    }
+
+    public void setLineGradientColorFrom (Integer color) {
+        this.isLineGradient = true;
+        this.mLinegradientFrom = color;
+    }
+
+    public void setLineGradientColorTo (Integer color) {
+        this.isLineGradient = true;
+        this.mLinegradientTo = color;
+    }
 
     @Override
     public void setItemIndex(int index) {

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

@@ -21,7 +21,7 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
 
     private static final String REACT_CLASS = "WheelCurvedPicker";
 
-    private static final int DEFAULT_TEXT_SIZE = 25 * 2;
+    private static final int DEFAULT_TEXT_SIZE = 29 * 2;
     private static final int DEFAULT_ITEM_SPACE = 14 * 2;
 
     @Override
@@ -86,6 +86,30 @@ public void setItemSpace(ReactWheelCurvedPicker picker, int space) {
             picker.setItemSpace((int) PixelUtil.toPixelFromDIP(space));
         }
     }
+
+    @ReactProp(name="lineColor")
+    public void setLineColor(ReactWheelCurvedPicker picker, String color) {
+        if (picker != null) {
+            picker.setLineColor(Utils.parseColor(color));
+            picker.invalidate();
+        }
+    }
+
+    @ReactProp(name="lineGradientColorFrom")
+    public void setLineGradientColorFrom(ReactWheelCurvedPicker picker, String color) {
+        if (picker != null) {
+            picker.setLineGradientColorFrom(Utils.parseColor(color));
+            picker.invalidate();
+        }
+    }
+
+    @ReactProp(name="lineGradientColorTo")
+    public void setLineGradientColorTo(ReactWheelCurvedPicker picker, String color) {
+        if (picker != null) {
+            picker.setLineGradientColorTo(Utils.parseColor(color));
+            picker.invalidate();
+        }
+    }
 
     @Override
     public String getName() {

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

@@ -0,0 +1,42 @@
+package com.zyu;
+
+import android.graphics.Color;
+
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+public class Utils {
+
+    private static final String REGEXP_HEX = "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$";
+    private static final String REGEXP_RGB = "^rgb\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3})\\)$";
+    private static final String REGEXP_RGBA = "^rgba\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3}), ?(0|0.[0-9]+|1)\\)$";
+
+    private static final Pattern PATTERN_RGB = Pattern.compile(REGEXP_RGB);
+    private static final Pattern PATTERN_RGBA = Pattern.compile(REGEXP_RGBA);
+
+    public static int parseColor(String color) {
+        // Check if this is a Hex color
+        if (Pattern.matches(REGEXP_HEX, color)){
+            return Color.parseColor(color);
+        }
+        if (Pattern.matches(REGEXP_RGB, color)) {
+            Matcher matcher = PATTERN_RGB.matcher(color);
+            matcher.matches();
+            String hex = String.format(
+                    "#%02x%02x%02x",
+                    Integer.parseInt(matcher.group(1)),Integer.parseInt(matcher.group(2)), Integer.parseInt(matcher.group(3))
+            );
+            return Color.parseColor(hex);
+        }
+        if (Pattern.matches(REGEXP_RGBA, color)) {
+            Matcher matcher = PATTERN_RGBA.matcher(color);
+            matcher.matches();
+            String hex = String.format(
+                    "#%02x%02x%02x%02x",
+                    Integer.parseInt(matcher.group(1)), Integer.parseInt(matcher.group(2)), Integer.parseInt(matcher.group(3)), Integer.parseInt(matcher.group(4))
+            );
+            return Color.parseColor(hex);
+        }
+        return -1;
+    }
+}