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);