feat(android): storing computed margin and padding information

Author: Kamil Paradowski

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java

@@ -1334,6 +1334,16 @@ public Map<String, Long> getPerformanceCounters() {
     return performanceCounters;
   }
 
+  @Nullable
+  public float[] getComputedMarginInsets(int surfaceId, int viewTag) {
+    return mBinding != null ? mBinding.getComputedMarginInsets(surfaceId, viewTag) : null;
+  }
+
+  @Nullable
+  public float[] getComputedPaddingInsets(int surfaceId, int viewTag) {
+    return mBinding != null ? mBinding.getComputedPaddingInsets(surfaceId, viewTag) : null;
+  }
+
   private class MountItemDispatchListener implements MountItemDispatcher.ItemDispatchListener {
     @UiThread
     @ThreadConfined(UI)

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManagerBinding.kt

@@ -83,6 +83,10 @@ internal class FabricUIManagerBinding : HybridClassBase() {
 
   external fun reportMount(surfaceId: Int)
 
+  external fun getComputedMarginInsets(surfaceId: Int, viewTag: Int): FloatArray?
+  
+  external fun getComputedPaddingInsets(surfaceId: Int, viewTag: Int): FloatArray?
+
   fun register(
       runtimeExecutor: RuntimeExecutor,
       runtimeScheduler: RuntimeScheduler,

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

@@ -486,32 +486,35 @@ public object BackgroundStyleApplicator {
   @JvmStatic
   public fun applyClipPathIfPresent(view: View, canvas: Canvas) {
     val clipPath = getClipPath(view) ?: return
-    val bounds = getGeometryBoxBounds(view, clipPath.geometryBox, getComputedBorderInsets(view))
+    val composite = getCompositeBackgroundDrawable(view)
+    val computedMarginInsets = UIManagerHelper.getComputedMarginInsets(view)
+    val computedPaddingInsets = UIManagerHelper.getComputedPaddingInsets(view)
+    val computedBorderInsets =
+      composite?.borderInsets?.resolve(composite.layoutDirection, view.context)
+    val bounds = getGeometryBoxBounds(
+      view,
+      clipPath.geometryBox,
+      computedMarginInsets,
+      computedPaddingInsets,
+      computedBorderInsets
+    )
     val drawingRect = Rect()
     view.getDrawingRect(drawingRect)
     bounds.offset(drawingRect.left.toFloat(), drawingRect.top.toFloat())
 
     val path: Path? = if (clipPath.shape != null) {
       ClipPathUtils.createPathFromBasicShape(clipPath.shape, bounds)
     } else if (clipPath.geometryBox != null) {
-      val composite = getCompositeBackgroundDrawable(view)
       val borderRadius = composite?.borderRadius
-      val computedBorderInsets =
-        composite?.borderInsets?.resolve(composite.layoutDirection, view.context)
-
       if (borderRadius != null) {
         val adjustedBorderRadius = GeometryBoxUtil.adjustBorderRadiusForGeometryBox(
-          clipPath.geometryBox,
-          borderRadius.resolve(
+          view, clipPath.geometryBox, borderRadius.resolve(
             composite.layoutDirection,
             view.context,
             PixelUtil.toDIPFromPixel(drawingRect.width().toFloat()),
             PixelUtil.toDIPFromPixel(drawingRect.height().toFloat())
-          ), 
-          computedBorderInsets, 
-          view
+          ), computedMarginInsets, computedPaddingInsets, computedBorderInsets
         )
-
         if (adjustedBorderRadius != null) {
           ClipPathUtils.createRoundedRectPath(bounds, adjustedBorderRadius)
         } else {

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

@@ -11,6 +11,7 @@ package com.facebook.react.uimanager
 
 import android.content.Context
 import android.content.ContextWrapper
+import android.graphics.RectF
 import android.view.View
 import android.widget.EditText
 import androidx.core.view.ViewCompat
@@ -247,4 +248,35 @@ public object UIManagerHelper {
     padding[PADDING_BOTTOM_INDEX] = PixelUtil.toDIPFromPixel(editText.paddingBottom.toFloat())
     return padding
   }
+
+  @JvmStatic
+  public fun getComputedMarginInsets(view: View): RectF? =
+    getComputedLayoutMetrics(view) { uiManager, surfaceId, viewTag ->
+      uiManager.getComputedMarginInsets(surfaceId, viewTag)
+    }
+
+  @JvmStatic
+  public fun getComputedPaddingInsets(view: View): RectF? =
+    getComputedLayoutMetrics(view) { uiManager, surfaceId, viewTag ->
+      uiManager.getComputedPaddingInsets(surfaceId, viewTag)
+    }
+
+  private inline fun getComputedLayoutMetrics(
+    view: View,
+    getter: (com.facebook.react.fabric.FabricUIManager, Int, Int) -> FloatArray?
+  ): RectF? {
+    val viewTag = view.id
+    if (viewTag == View.NO_ID || getUIManagerType(viewTag) != UIManagerType.FABRIC) {
+      return null
+    }
+
+    val context = view.context as? ThemedReactContext ?: return null
+    val surfaceId = getSurfaceId(context)
+    val uiManager = getUIManager(
+      context.reactApplicationContext,
+      UIManagerType.FABRIC
+    ) as? com.facebook.react.fabric.FabricUIManager ?: return null
+    val array = getter(uiManager, surfaceId, viewTag) ?: return null
+    return RectF(array[0], array[1], array[2], array[3])
+  }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/ClipPathUtils.kt

@@ -198,10 +198,10 @@ internal object ClipPathUtils {
   public fun createRoundedRectPath(bounds: RectF, borderRadius: ComputedBorderRadius): Path {
     val path = Path()
 
-    val topLeftRadii = borderRadius.topLeft
-    val topRightRadii = borderRadius.topRight
-    val bottomRightRadii = borderRadius.bottomRight
-    val bottomLeftRadii = borderRadius.bottomLeft
+    val topLeftRadii = borderRadius.topLeft.toPixelFromDIP()
+    val topRightRadii = borderRadius.topRight.toPixelFromDIP()
+    val bottomRightRadii = borderRadius.bottomRight.toPixelFromDIP()
+    val bottomLeftRadii = borderRadius.bottomLeft.toPixelFromDIP()
 
     val radii = floatArrayOf(
         topLeftRadii.horizontal, topLeftRadii.vertical,