feat: Add clip-path support for Android

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

@@ -21,6 +21,7 @@
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Point;
+import android.graphics.RectF;
 import android.os.SystemClock;
 import android.view.View;
 import android.view.accessibility.AccessibilityEvent;
@@ -1533,6 +1534,27 @@ public Map<String, Long> getPerformanceCounters() {
     return performanceCounters;
   }
 
+  @Nullable
+  private RectF computeInsetsToRectF(@Nullable float[] insets, int surfaceId, int viewTag) {
+    if (insets == null || surfaceId == View.NO_ID || viewTag == View.NO_ID) {
+      return null;
+    }
+    return new RectF(insets[0], insets[1], insets[2], insets[3]);
+  }
+
+  @Nullable
+  public RectF getComputedMarginInsets(int surfaceId, int viewTag) {
+    float[] insets = mBinding != null ? mBinding.getComputedMarginInsets(surfaceId, viewTag) : null;
+    return computeInsetsToRectF(insets, surfaceId, viewTag);
+  }
+
+  @Nullable
+  public RectF getComputedPaddingInsets(int surfaceId, int viewTag) {
+    float[] insets =
+        mBinding != null ? mBinding.getComputedPaddingInsets(surfaceId, viewTag) : null;
+    return computeInsetsToRectF(insets, surfaceId, viewTag);
+  }
+
   private class MountItemDispatchListener implements MountItemDispatcher.ItemDispatchListener {
     @UiThread
     @ThreadConfined(UI)

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

@@ -89,6 +89,10 @@ internal class FabricUIManagerBinding : HybridClassBase() {
 
   external fun mergeReactRevision(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

@@ -20,10 +20,16 @@ import android.os.Build
 import android.view.View
 import android.widget.ImageView
 import androidx.annotation.ColorInt
+import androidx.core.graphics.withSave
+import com.facebook.react.R
+import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.fabric.FabricUIManager
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PixelUtil.pxToDp
+import com.facebook.react.uimanager.common.UIManagerType
 import com.facebook.react.uimanager.drawable.BackgroundDrawable
 import com.facebook.react.uimanager.drawable.BackgroundImageDrawable
 import com.facebook.react.uimanager.drawable.BorderDrawable
@@ -42,6 +48,10 @@ import com.facebook.react.uimanager.style.BorderRadiusProp
 import com.facebook.react.uimanager.style.BorderRadiusStyle
 import com.facebook.react.uimanager.style.BorderStyle
 import com.facebook.react.uimanager.style.BoxShadow
+import com.facebook.react.uimanager.style.ClipPath
+import com.facebook.react.uimanager.style.ClipPathUtils
+import com.facebook.react.uimanager.style.GeometryBoxUtil
+import com.facebook.react.uimanager.style.GeometryBoxUtil.getGeometryBoxBounds
 import com.facebook.react.uimanager.style.LogicalEdge
 import com.facebook.react.uimanager.style.OutlineStyle
 
@@ -440,6 +450,95 @@ public object BackgroundStyleApplicator {
     BackgroundStyleApplicator.setBoxShadow(view, shadowStyles)
   }
 
+  @JvmStatic
+  public fun setClipPath(view: View, clipPathMap: ReadableMap?) {
+    val clipPath = ClipPath.parse(clipPathMap)
+    view.setTag(R.id.clip_path, clipPath)
+    view.invalidate()
+  }
+
+  @JvmStatic
+  public fun applyClipPathIfPresent(view: View, canvas: Canvas, drawContent: (() -> Unit?)?) {
+    val clipPath = view.getTag(R.id.clip_path) as? ClipPath
+    if (clipPath == null) {
+      drawContent?.invoke()
+      return
+    }
+
+    canvas.withSave {
+      val composite = getCompositeBackgroundDrawable(view)
+      val uiManager =
+          UIManagerHelper.getUIManager(view.context as ReactContext, UIManagerType.FABRIC)
+              as? FabricUIManager
+      val surfaceId = UIManagerHelper.getSurfaceId(view)
+      val viewId = view.id
+      val computedMarginInsets = uiManager?.getComputedMarginInsets(surfaceId, viewId)
+      val computedPaddingInsets = uiManager?.getComputedPaddingInsets(surfaceId, viewId)
+      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 borderRadius = composite?.borderRadius
+            if (borderRadius != null) {
+              val adjustedBorderRadius =
+                  GeometryBoxUtil.adjustBorderRadiusForGeometryBox(
+                      view,
+                      clipPath.geometryBox,
+                      borderRadius.resolve(
+                          composite.layoutDirection,
+                          view.context,
+                          PixelUtil.toDIPFromPixel(drawingRect.width().toFloat()),
+                          PixelUtil.toDIPFromPixel(drawingRect.height().toFloat()),
+                      ),
+                      computedMarginInsets,
+                      computedPaddingInsets,
+                      computedBorderInsets,
+                  )
+              if (adjustedBorderRadius != null) {
+                ClipPathUtils.createRoundedRectPath(bounds, adjustedBorderRadius)
+              } else {
+                null
+              }
+            } else {
+              null
+            }
+          } else {
+            null
+          }
+
+      if (path != null) {
+        clipPath(path)
+      } else {
+        clipRect(bounds)
+      }
+
+      drawContent?.invoke()
+    }
+  }
+
+  @JvmStatic
+  public fun getComputedBorderInsets(view: View): RectF? {
+    val composite = getCompositeBackgroundDrawable(view)
+    if (composite == null) {
+      return null
+    }
+    return composite.borderInsets?.resolve(composite.layoutDirection, view.context)
+  }
+
   /**
    * Sets a feedback underlay drawable for the view.
    *

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

@@ -133,6 +133,7 @@ public BaseViewManager(@Nullable ReactApplicationContext reactContext) {
     view.setTag(R.id.use_hardware_layer, null);
     view.setTag(R.id.filter, null);
     view.setTag(R.id.mix_blend_mode, null);
+    view.setTag(R.id.clip_path, null);
     LayerEffectsHelper.apply(view, null, null);
 
     // setShadowColor
@@ -902,6 +903,11 @@ public void setBoxShadow(T view, @Nullable ReadableArray shadows) {
     BackgroundStyleApplicator.setBoxShadow(view, shadows);
   }
 
+  @ReactProp(name = ViewProps.CLIP_PATH, customType = "ClipPath")
+  public void setClipPath(T view, @Nullable ReadableMap clipPath) {
+    BackgroundStyleApplicator.setClipPath(view, clipPath);
+  }
+
   private void logUnsupportedPropertyWarning(String propName) {
     FLog.w(ReactConstants.TAG, "%s doesn't support property '%s'", getName(), propName);
   }

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

@@ -82,6 +82,8 @@ public abstract class BaseViewManagerDelegate<
 
       ViewProps.BOX_SHADOW -> mViewManager.setBoxShadow(view, value as ReadableArray?)
 
+      ViewProps.CLIP_PATH -> mViewManager.setClipPath(view, value as ReadableMap?)
+
       ViewProps.ELEVATION -> mViewManager.setElevation(view, (value as Double?)?.toFloat() ?: 0.0f)
 
       ViewProps.FILTER -> mViewManager.setFilter(view, value as ReadableArray?)

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

@@ -146,6 +146,7 @@ public object ViewProps {
   public const val BORDER_START_COLOR: String = "borderStartColor"
   public const val BORDER_END_COLOR: String = "borderEndColor"
   public const val BOX_SHADOW: String = "boxShadow"
+  public const val CLIP_PATH: String = "clipPath"
   public const val FILTER: String = "filter"
   public const val MIX_BLEND_MODE: String = "mixBlendMode"
   public const val OUTLINE_COLOR: String = "outlineColor"