#47 fix borderRadius on Android

android/src/main/java/com/BV/LinearGradient/LinearGradientManager.java

@@ -1,6 +1,7 @@
 package com.BV.LinearGradient;
 
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ReactProp;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -14,6 +15,7 @@ public class LinearGradientManager extends SimpleViewManager<LinearGradientView>
     public static final String PROP_LOCATIONS = "locations";
     public static final String PROP_START_POS = "start";
     public static final String PROP_END_POS = "end";
+    public static final String PROP_BORDER_RADIUS = "borderRadius";
 
     @Override
     public String getName() {
@@ -44,4 +46,11 @@ public class LinearGradientManager extends SimpleViewManager<LinearGradientView>
     public void setEndPosition(LinearGradientView gradientView, ReadableArray endPos) {
         gradientView.setEndPosition(endPos);
     }
+
+    // temporary solution until following issue is resolved:
+    // https://github.com/facebook/react-native/issues/3198
+    @ReactProp(name=PROP_BORDER_RADIUS, defaultFloat = 0f)
+    public void setBorderRadius(LinearGradientView gradientView, float borderRadius) {
+        gradientView.setBorderRadius(PixelUtil.toPixelFromDIP(borderRadius));
+    }
 }

android/src/main/java/com/BV/LinearGradient/LinearGradientView.java

@@ -6,6 +6,8 @@ import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.LinearGradient;
 import android.graphics.Paint;
+import android.graphics.Rect;
+import android.graphics.RectF;
 import android.graphics.Shader;
 import android.view.View;
 
@@ -13,11 +15,14 @@ public class LinearGradientView extends View {
 
     private final Paint mPaint = new Paint();
     private LinearGradient mShader;
+
     private float[] mLocations;
     private float[] mStartPos = {0, 0};
     private float[] mEndPos = {0, 1};
     private int[] mColors;
     private int[] mSize = {0, 0};
+    private float mBorderRadius = 0f;
+
 
     public LinearGradientView(Context context) {
         super(context);
@@ -53,6 +58,11 @@ public class LinearGradientView extends View {
         drawGradient();
     }
 
+    public void setBorderRadius(float borderRadius) {
+        mBorderRadius = borderRadius;
+        drawGradient();
+    }
+
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         mSize = new int[]{w, h};
@@ -75,6 +85,15 @@ public class LinearGradientView extends View {
     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
+        if (mBorderRadius != 0f) {
+            RectF clipBounds = new RectF(canvas.getClipBounds());
+            canvas.drawRoundRect(
+                clipBounds,
+                mBorderRadius,
+                mBorderRadius,
+                mPaint);
+        } else {
             canvas.drawPaint(mPaint);
         }
     }
+}

index.android.js

@@ -1,4 +1,5 @@
 var React = require('react-native');
+var StyleSheetRegistry = require('StyleSheetRegistry');
 var { requireNativeComponent, PropTypes, View, processColor } = React;
 
 
@@ -13,6 +14,19 @@ var LinearGradient = React.createClass({
 
   render: function() {
     var {style, children, colors, locations, start, end, ...otherProps} = this.props;
+
+    // inherit container borderRadius until this issue is resolved:
+    // https://github.com/facebook/react-native/issues/3198
+    var borderRadius;
+    if (typeof style === 'number') {
+      borderRadius = StyleSheetRegistry.getStyleByID(style).borderRadius;
+    } else {
+      borderRadius = style.borderRadius;
+    }
+    if (!borderRadius) {
+      borderRadius = 0;
+    }
+
     return (
       <View style={style}>
         <NativeLinearGradient
@@ -20,7 +34,9 @@ var LinearGradient = React.createClass({
           colors={colors.map(processColor)}
           start={start}
           end={end}
-          locations={locations} />
+          locations={locations}
+          borderRadius={borderRadius}
+        />
         { children }
       </View>
     );