diff --git a/RNTester/js/examples/View/ViewExample.js b/RNTester/js/examples/View/ViewExample.js
index 06b27412120e4e..7f89797ed51570 100644
--- a/RNTester/js/examples/View/ViewExample.js
+++ b/RNTester/js/examples/View/ViewExample.js
@@ -148,12 +148,53 @@ exports.examples = [
},
},
{
- title: 'Circle with Border Radius',
+ title: 'Rounded Borders',
render(): React.Node {
return (
-
+
+
+
+
+
+
);
},
},
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 9fe66d2fad46df..b9863d87203bd8 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
@@ -526,11 +526,6 @@ private void updatePath() {
mTempRectForBorderRadiusOutline.set(getBounds());
mTempRectForCenterDrawPath.set(getBounds());
- float fullBorderWidth = getFullBorderWidth();
- if (fullBorderWidth > 0) {
- mTempRectForCenterDrawPath.inset(fullBorderWidth * 0.5f, fullBorderWidth * 0.5f);
- }
-
final RectF borderWidth = getDirectionAwareBorderInsets();
mInnerClipTempRectForBorderRadius.top += borderWidth.top;
@@ -538,6 +533,11 @@ private void updatePath() {
mInnerClipTempRectForBorderRadius.left += borderWidth.left;
mInnerClipTempRectForBorderRadius.right -= borderWidth.right;
+ mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f;
+ mTempRectForCenterDrawPath.bottom -= borderWidth.bottom * 0.5f;
+ mTempRectForCenterDrawPath.left += borderWidth.left * 0.5f;
+ mTempRectForCenterDrawPath.right -= borderWidth.right * 0.5f;
+
final float borderRadius = getFullBorderRadius();
float topLeftRadius = getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.TOP_LEFT);
float topRightRadius = getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.TOP_RIGHT);
@@ -663,14 +663,22 @@ private void updatePath() {
mCenterDrawPath.addRoundRect(
mTempRectForCenterDrawPath,
new float[] {
- innerTopLeftRadiusX + (topLeftRadius > 0 ? extraRadiusForOutline : 0),
- innerTopLeftRadiusY + (topLeftRadius > 0 ? extraRadiusForOutline : 0),
- innerTopRightRadiusX + (topRightRadius > 0 ? extraRadiusForOutline : 0),
- innerTopRightRadiusY + (topRightRadius > 0 ? extraRadiusForOutline : 0),
- innerBottomRightRadiusX + (bottomRightRadius > 0 ? extraRadiusForOutline : 0),
- innerBottomRightRadiusY + (bottomRightRadius > 0 ? extraRadiusForOutline : 0),
- innerBottomLeftRadiusX + (bottomLeftRadius > 0 ? extraRadiusForOutline : 0),
- innerBottomLeftRadiusY + (bottomLeftRadius > 0 ? extraRadiusForOutline : 0)
+ Math.max(topLeftRadius - borderWidth.left * 0.5f,
+ (borderWidth.left > 0.0f) ? (topLeftRadius / borderWidth.left) : 0.0f),
+ Math.max(topLeftRadius - borderWidth.top * 0.5f,
+ (borderWidth.top > 0.0f) ? (topLeftRadius / borderWidth.top) : 0.0f),
+ Math.max(topRightRadius - borderWidth.right * 0.5f,
+ (borderWidth.right > 0.0f) ? (topRightRadius / borderWidth.right) : 0.0f),
+ Math.max(topRightRadius - borderWidth.top * 0.5f,
+ (borderWidth.top > 0.0f) ? (topRightRadius / borderWidth.top) : 0.0f),
+ Math.max(bottomRightRadius - borderWidth.right * 0.5f,
+ (borderWidth.right > 0.0f) ? (bottomRightRadius / borderWidth.right) : 0.0f),
+ Math.max(bottomRightRadius - borderWidth.bottom * 0.5f,
+ (borderWidth.bottom > 0.0f) ? (bottomRightRadius / borderWidth.bottom) : 0.0f),
+ Math.max(bottomLeftRadius - borderWidth.left * 0.5f,
+ (borderWidth.left > 0.0f) ? (bottomLeftRadius / borderWidth.left) : 0.0f),
+ Math.max(bottomLeftRadius - borderWidth.bottom * 0.5f,
+ (borderWidth.bottom > 0.0f) ? (bottomLeftRadius / borderWidth.bottom) : 0.0f)
},
Path.Direction.CW);