Skip to content

Fix inset shadows when blur < spread #49448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
joevilches wants to merge 2 commits into from
Closed

Fix inset shadows when blur < spread #49448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b315648
Fix bug where we can crash with small blurRadius
joevilches Feb 15, 2025
90aac5b
Fix inset shadows when blur < spread
joevilches Feb 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions ...ages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/FilterHelper.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,8 +394,9 @@ internal object FilterHelper {
internal fun sigmaToRadius(sigma: Float): Float {
// Android takes blur amount as a radius while web takes a sigma. This value
// is used under the hood to convert between them on Android
// https://cs.android.com/android/platform/superproject/main/+/main:frameworks/base/libs/hwui/jni/RenderEffect.cpp
// https://cs.android.com/android/platform/superproject/main/+/main:frameworks/base/libs/hwui/utils/Blur.cpp;l=34
val sigmaToRadiusRatio = 0.57_735f
return (PixelUtil.toPixelFromDIP(sigma) - 0.5f) / sigmaToRadiusRatio
val pxSigma = PixelUtil.toPixelFromDIP(sigma)
return if (pxSigma > 0.5f) (pxSigma - 0.5f) / sigmaToRadiusRatio else 0f
}
}
10 changes: 4 additions & 6 deletions ...eactAndroid/src/main/java/com/facebook/react/uimanager/drawable/InsetBoxShadowDrawable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,9 @@ internal class InsetBoxShadowDrawable(
private val shadowPaint =
Paint().apply {
color = shadowColor
if (blurRadius > 0) {
maskFilter =
BlurMaskFilter(
FilterHelper.sigmaToRadius(blurRadius * BLUR_RADIUS_SIGMA_SCALE),
BlurMaskFilter.Blur.NORMAL)
val convertedBlurRadius = FilterHelper.sigmaToRadius(blurRadius * BLUR_RADIUS_SIGMA_SCALE)
if (convertedBlurRadius > 0) {
maskFilter = BlurMaskFilter(convertedBlurRadius, BlurMaskFilter.Blur.NORMAL)
}
}

Expand Down Expand Up @@ -119,7 +117,7 @@ internal class InsetBoxShadowDrawable(
// https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/box_painter_base.cc;l=338;drc=0a301506035e13015ea5c8dd39164d0d5954fa60
val blurExtent = FilterHelper.sigmaToRadius(blurRadius)
val outerRect =
RectF(innerRect).apply {
RectF(paddingBoxRect).apply {
inset(-blurExtent, -blurExtent)
if (spreadExtent < 0) {
inset(spreadExtent, spreadExtent)
Expand Down
8 changes: 3 additions & 5 deletions ...actAndroid/src/main/java/com/facebook/react/uimanager/drawable/OutsetBoxShadowDrawable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,9 @@ internal class OutsetBoxShadowDrawable(
private val shadowPaint =
Paint().apply {
color = shadowColor
if (blurRadius > 0) {
maskFilter =
BlurMaskFilter(
FilterHelper.sigmaToRadius(blurRadius * BLUR_RADIUS_SIGMA_SCALE),
BlurMaskFilter.Blur.NORMAL)
val convertedBlurRadius = FilterHelper.sigmaToRadius(blurRadius * BLUR_RADIUS_SIGMA_SCALE)
if (convertedBlurRadius > 0) {
maskFilter = BlurMaskFilter(convertedBlurRadius, BlurMaskFilter.Blur.NORMAL)
}
}

Expand Down
Loading