From 55d5c4497621a8dfd6545899754451fcf68dce70 Mon Sep 17 00:00:00 2001 From: Jorge Cabiedes Acosta Date: Mon, 27 Jan 2025 14:41:16 -0800 Subject: [PATCH] Fix elevation with border-radius set (#48982) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/48982 We were missing a conversion to px on the `getOutline()` function of `CompositeBackgroundDrawable` which led to incorrect elevation prop rendering Changelog: [Android][Fixed] - Elevation prop on android has incorrect border-radius Reviewed By: NickGerleman Differential Revision: D68724947 fbshipit-source-id: b3a7a4919bfd7c60fac7c3d6e3ba760e3f74d190 --- .../drawable/CompositeBackgroundDrawable.kt | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt index 7105d09d60a..230e2a5cb0c 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt @@ -16,6 +16,7 @@ import android.graphics.drawable.LayerDrawable import android.os.Build import com.facebook.react.common.annotations.UnstableReactNativeAPI import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags +import com.facebook.react.uimanager.PixelUtil.dpToPx import com.facebook.react.uimanager.style.BorderInsets import com.facebook.react.uimanager.style.BorderRadiusStyle @@ -200,14 +201,14 @@ internal class CompositeBackgroundDrawable( pathForOutline.addRoundRect( RectF(bounds), floatArrayOf( - it.topLeft.horizontal + (computedBorderInsets?.left ?: 0f), - it.topLeft.vertical + (computedBorderInsets?.top ?: 0f), - it.topRight.horizontal + (computedBorderInsets?.right ?: 0f), - it.topRight.vertical + (computedBorderInsets?.top ?: 0f), - it.bottomRight.horizontal + (computedBorderInsets?.right ?: 0f), - it.bottomRight.vertical + (computedBorderInsets?.bottom ?: 0f), - it.bottomLeft.horizontal + (computedBorderInsets?.left ?: 0f), - it.bottomLeft.vertical) + (computedBorderInsets?.bottom ?: 0f), + (it.topLeft.horizontal + (computedBorderInsets?.left ?: 0f)).dpToPx(), + (it.topLeft.vertical + (computedBorderInsets?.top ?: 0f)).dpToPx(), + (it.topRight.horizontal + (computedBorderInsets?.right ?: 0f)).dpToPx(), + (it.topRight.vertical + (computedBorderInsets?.top ?: 0f)).dpToPx(), + (it.bottomRight.horizontal + (computedBorderInsets?.right ?: 0f)).dpToPx(), + (it.bottomRight.vertical + (computedBorderInsets?.bottom ?: 0f)).dpToPx(), + (it.bottomLeft.horizontal + (computedBorderInsets?.left ?: 0f)).dpToPx(), + (it.bottomLeft.vertical + (computedBorderInsets?.bottom ?: 0f)).dpToPx()), Path.Direction.CW) }