Skip to content

Commit 5e3039e

Browse files
joevilchesfacebook-github-bot
authored andcommitted
Fix some edge cases with box shadow
Summary: There were two issues with inset shadows here that I fixed * If spread was big enough it would "invert" the clear region. [RectF's inset](https://developer.android.com/reference/android/graphics/RectF#inset(float,%20float)) method does not bound to a 0x0 rect, it will instead start making the rect bigger if the inset value is large enough. * If the clear region was outside the rect the shadow disappeared. This is because [Canvas's drawDoubleRoundRect](https://developer.android.com/reference/android/graphics/Canvas#drawDoubleRoundRect(android.graphics.RectF,%20float[],%20android.graphics.RectF,%20float[],%20android.graphics.Paint)) will fail to draw if the inner rect is not completely inside of the outer. Changelog: [Android][Fixed] - Fix inset shadow edge cases Differential Revision: D72833275
1 parent 52947d2 commit 5e3039e

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/InsetBoxShadowDrawable.kt

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,20 +109,22 @@ internal class InsetBoxShadowDrawable(
109109
val spreadExtent = spread.dpToPx()
110110
val innerRect =
111111
RectF(paddingBoxRect).apply {
112-
inset(spreadExtent, spreadExtent)
112+
if (2 * spreadExtent > paddingBoxRect.width()) {
113+
setEmpty()
114+
} else {
115+
inset(spreadExtent, spreadExtent)
116+
}
113117
offset(x, y)
114118
}
115119

116120
// Graciously stolen from Blink
117121
// https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/box_painter_base.cc;l=338;drc=0a301506035e13015ea5c8dd39164d0d5954fa60
118122
val blurExtent = FilterHelper.sigmaToRadius(blurRadius)
119123
val outerRect =
120-
RectF(paddingBoxRect).apply {
124+
RectF(innerRect).apply {
125+
set(paddingBoxRect)
121126
inset(-blurExtent, -blurExtent)
122-
if (spreadExtent < 0) {
123-
inset(spreadExtent, spreadExtent)
124-
}
125-
union(RectF(this).apply { offset(-x, -y) })
127+
union(RectF(innerRect))
126128
}
127129

128130
canvas.save().let { saveCount ->

0 commit comments

Comments
 (0)