diff --git a/Examples/UIExplorer/BorderExample.js b/Examples/UIExplorer/BorderExample.js
index c6c22f553..1c547ea6e 100644
--- a/Examples/UIExplorer/BorderExample.js
+++ b/Examples/UIExplorer/BorderExample.js
@@ -98,6 +98,20 @@ var styles = StyleSheet.create({
marginRight: 10,
backgroundColor: 'lightgrey',
},
+ border9: {
+ borderWidth: 10,
+ borderTopLeftRadius: 10,
+ borderBottomRightRadius: 20,
+ borderColor: 'black',
+ },
+ border10: {
+ borderWidth: 10,
+ backgroundColor: 'white',
+ borderTopLeftRadius: 10,
+ borderBottomRightRadius: 20,
+ borderColor: 'black',
+ elevation: 10
+ }
});
exports.title = 'Border';
@@ -180,4 +194,19 @@ exports.examples = [
);
}
},
+ {
+ title: 'Corner Radii',
+ description: 'borderTopLeftRadius & borderBottomRightRadius',
+ render() {
+ return ;
+ }
+ },
+ {
+ title: 'Corner Radii / Elevation',
+ description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
+ platform: 'android',
+ render() {
+ return ;
+ }
+ },
];
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
index 33e52fe95..3cef8895a 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -77,6 +77,11 @@ public class ViewProps {
public static final String BORDER_TOP_WIDTH = "borderTopWidth";
public static final String BORDER_RIGHT_WIDTH = "borderRightWidth";
public static final String BORDER_BOTTOM_WIDTH = "borderBottomWidth";
+ public static final String BORDER_RADIUS = "borderRadius";
+ public static final String BORDER_TOP_LEFT_RADIUS = "borderTopLeftRadius";
+ public static final String BORDER_TOP_RIGHT_RADIUS = "borderTopRightRadius";
+ public static final String BORDER_BOTTOM_LEFT_RADIUS = "borderBottomLeftRadius";
+ public static final String BORDER_BOTTOM_RIGHT_RADIUS = "borderBottomRightRadius";
public static final int[] BORDER_SPACING_TYPES = {
Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM
};
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
index f36f70db7..742adbd84 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
@@ -11,6 +11,7 @@ package com.facebook.react.views.view;
import javax.annotation.Nullable;
+import java.util.Arrays;
import java.util.Locale;
import android.graphics.Canvas;
@@ -78,7 +79,9 @@ import com.facebook.csslayout.Spacing;
/* Used for rounded border and rounded background */
private @Nullable PathEffect mPathEffectForBorderStyle;
private @Nullable Path mPathForBorderRadius;
+ private @Nullable Path mPathForBorderRadiusOutline;
private @Nullable RectF mTempRectForBorderRadius;
+ private @Nullable RectF mTempRectForBorderRadiusOutline;
private boolean mNeedUpdatePathForBorderRadius = false;
private float mBorderRadius = CSSConstants.UNDEFINED;
@@ -87,9 +90,11 @@ import com.facebook.csslayout.Spacing;
private int mColor = Color.TRANSPARENT;
private int mAlpha = 255;
+ private @Nullable float[] mBorderCornerRadii;
+
@Override
public void draw(Canvas canvas) {
- if (!CSSConstants.isUndefined(mBorderRadius) && mBorderRadius > 0) {
+ if ((!CSSConstants.isUndefined(mBorderRadius) && mBorderRadius > 0) || mBorderCornerRadii != null) {
drawRoundedBackgroundWithBorders(canvas);
} else {
drawRectangularBackgroundWithBorders(canvas);
@@ -132,11 +137,10 @@ import com.facebook.csslayout.Spacing;
super.getOutline(outline);
return;
}
- if(!CSSConstants.isUndefined(mBorderRadius) && mBorderRadius > 0) {
- float extraRadiusFromBorderWidth = (mBorderWidth != null)
- ? mBorderWidth.get(Spacing.ALL) / 2f
- : 0;
- outline.setRoundRect(getBounds(), mBorderRadius + extraRadiusFromBorderWidth);
+ if((!CSSConstants.isUndefined(mBorderRadius) && mBorderRadius > 0) || mBorderCornerRadii != null) {
+ updatePath();
+
+ outline.setConvexPath(mPathForBorderRadiusOutline);
} else {
outline.setRect(getBounds());
}
@@ -181,8 +185,22 @@ import com.facebook.csslayout.Spacing;
}
public void setRadius(float radius) {
- if (mBorderRadius != radius) {
+ if (!FloatUtil.floatsEqual(mBorderRadius,radius)) {
mBorderRadius = radius;
+ mNeedUpdatePathForBorderRadius = true;
+ invalidateSelf();
+ }
+ }
+
+ public void setRadius(float radius, int position) {
+ if (mBorderCornerRadii == null) {
+ mBorderCornerRadii = new float[4];
+ Arrays.fill(mBorderCornerRadii, CSSConstants.UNDEFINED);
+ }
+
+ if (!FloatUtil.floatsEqual(mBorderCornerRadii[position], radius)) {
+ mBorderCornerRadii[position] = radius;
+ mNeedUpdatePathForBorderRadius = true;
invalidateSelf();
}
}
@@ -225,19 +243,61 @@ import com.facebook.csslayout.Spacing;
if (mPathForBorderRadius == null) {
mPathForBorderRadius = new Path();
mTempRectForBorderRadius = new RectF();
+ mPathForBorderRadiusOutline = new Path();
+ mTempRectForBorderRadiusOutline = new RectF();
}
+
mPathForBorderRadius.reset();
+ mPathForBorderRadiusOutline.reset();
+
mTempRectForBorderRadius.set(getBounds());
+ mTempRectForBorderRadiusOutline.set(getBounds());
float fullBorderWidth = getFullBorderWidth();
if (fullBorderWidth > 0) {
mTempRectForBorderRadius.inset(fullBorderWidth * 0.5f, fullBorderWidth * 0.5f);
}
+
+ float defaultBorderRadius = !CSSConstants.isUndefined(mBorderRadius) ? mBorderRadius : 0;
+ float topLeftRadius = mBorderCornerRadii != null && !CSSConstants.isUndefined(mBorderCornerRadii[0]) ? mBorderCornerRadii[0] : defaultBorderRadius;
+ float topRightRadius = mBorderCornerRadii != null && !CSSConstants.isUndefined(mBorderCornerRadii[1]) ? mBorderCornerRadii[1] : defaultBorderRadius;
+ float bottomRightRadius = mBorderCornerRadii != null && !CSSConstants.isUndefined(mBorderCornerRadii[2]) ? mBorderCornerRadii[2] : defaultBorderRadius;
+ float bottomLeftRadius = mBorderCornerRadii != null && !CSSConstants.isUndefined(mBorderCornerRadii[3]) ? mBorderCornerRadii[3] : defaultBorderRadius;
+
+
mPathForBorderRadius.addRoundRect(
mTempRectForBorderRadius,
- mBorderRadius,
- mBorderRadius,
+ new float[] {
+ topLeftRadius,
+ topLeftRadius,
+ topRightRadius,
+ topRightRadius,
+ bottomRightRadius,
+ bottomRightRadius,
+ bottomLeftRadius,
+ bottomLeftRadius
+ },
Path.Direction.CW);
+ float extraRadiusForOutline = 0;
+
+ if (mBorderWidth != null) {
+ extraRadiusForOutline = mBorderWidth.get(Spacing.ALL) / 2f;
+ }
+
+ mPathForBorderRadiusOutline.addRoundRect(
+ mTempRectForBorderRadiusOutline,
+ new float[] {
+ topLeftRadius + extraRadiusForOutline,
+ topLeftRadius + extraRadiusForOutline,
+ topRightRadius + extraRadiusForOutline,
+ topRightRadius + extraRadiusForOutline,
+ bottomRightRadius + extraRadiusForOutline,
+ bottomRightRadius + extraRadiusForOutline,
+ bottomLeftRadius + extraRadiusForOutline,
+ bottomLeftRadius + extraRadiusForOutline
+ },
+ Path.Direction.CW);
+
mPathEffectForBorderStyle = mBorderStyle != null
? mBorderStyle.getPathEffect(getFullBorderWidth())
: null;
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
index 88ac93397..bf57e47a6 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
@@ -207,6 +207,10 @@ public class ReactViewGroup extends ViewGroup implements
getOrCreateReactViewBackground().setRadius(borderRadius);
}
+ public void setBorderRadius(float borderRadius, int position) {
+ getOrCreateReactViewBackground().setRadius(borderRadius, position);
+ }
+
public void setBorderStyle(@Nullable String style) {
getOrCreateReactViewBackground().setBorderStyle(style);
}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
index 5e761b0f7..789b294e1 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
@@ -51,9 +51,23 @@ public class ReactViewManager extends ViewGroupManager {
view.setFocusable(accessible);
}
- @ReactProp(name = "borderRadius")
- public void setBorderRadius(ReactViewGroup view, float borderRadius) {
- view.setBorderRadius(PixelUtil.toPixelFromDIP(borderRadius));
+ @ReactPropGroup(names = {
+ ViewProps.BORDER_RADIUS,
+ ViewProps.BORDER_TOP_LEFT_RADIUS,
+ ViewProps.BORDER_TOP_RIGHT_RADIUS,
+ ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
+ ViewProps.BORDER_BOTTOM_LEFT_RADIUS
+ }, defaultFloat = CSSConstants.UNDEFINED)
+ public void setBorderRadius(ReactViewGroup view, int index, float borderRadius) {
+ if (!CSSConstants.isUndefined(borderRadius)) {
+ borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
+ }
+
+ if (index == 0) {
+ view.setBorderRadius(borderRadius);
+ } else {
+ view.setBorderRadius(borderRadius, index - 1);
+ }
}
@ReactProp(name = "borderStyle")