react-native-smooth-clip-view 0.3.0 → 0.4.1

package/android/src/main/java/com/smoothclipview/SmoothClipView.kt

@@ -1,8 +1,14 @@
 package com.smoothclipview
 
 import android.content.res.Configuration
+import android.graphics.BlurMaskFilter
+import android.graphics.Canvas
+import android.graphics.Color
 import android.graphics.Outline
+import android.graphics.Paint
 import android.graphics.Path
+import android.graphics.Region
+import android.os.Build
 import android.os.Trace
 import android.view.MotionEvent
 import android.view.View
@@ -11,14 +17,35 @@ import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
+import kotlin.math.roundToInt
+import kotlin.math.abs
+import kotlin.math.pow
 
 class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
+    private val clipPath = Path()
+    private val supportsPathOutlineClipping =
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU
+    private val clipContainer: ReactViewGroup =
+        if (supportsPathOutlineClipping) {
+            ReactViewGroup(context)
+        } else {
+            object : ReactViewGroup(context) {
+                override fun dispatchDraw(canvas: Canvas) {
+                    val saveCount = canvas.save()
+                    canvas.clipPath(clipPath)
+                    try {
+                        super.dispatchDraw(canvas)
+                    } finally {
+                        canvas.restoreToCount(saveCount)
+                    }
+                }
+            }
+        }
     internal val contentContainer = ReactViewGroup(context)
     private var requestedX = 0f
     private var requestedY = 0f
     private var requestedWidth = 0f
     private var requestedHeight = 0f
-    private var requestedRadius = 0f
     private var requestedTopLeftRadius = 0f
     private var requestedTopRightRadius = 0f
     private var requestedBottomRightRadius = 0f
@@ -27,43 +54,35 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
     private var requestedContentTranslateX = 0f
     private var requestedContentTranslateY = 0f
     private var requestedContentScale = 1f
-    private var requestedUsesV2Geometry = false
+    private var requestedShadowEnabled = false
+    private var requestedShadowRed = 0f
+    private var requestedShadowGreen = 0f
+    private var requestedShadowBlue = 0f
+    private var requestedShadowAlpha = 1f
+    private var requestedShadowOffsetX = 0f
+    private var requestedShadowOffsetY = 0f
+    private var requestedShadowBlurRadius = 0f
+    private var requestedShadowSpreadDistance = 0f
     private var clipLeft = 0f
     private var clipTop = 0f
     private var clipRight = 0f
     private var clipBottom = 0f
-    private var clipRadius = 0f
     private var clipTopLeftRadius = 0f
     private var clipTopRightRadius = 0f
     private var clipBottomRightRadius = 0f
     private var clipBottomLeftRadius = 0f
     private var clipCurveCode = CLIP_CURVE_CIRCULAR
-    private val clipPath = Path()
-    private var outlineUsesPath = false
-    private var outlineUsesFloatRoundRect = false
-    // Rounded edges actually emitted to the outline provider. Sub-pixel changes
-    // that round to the same integers must not invalidate the outline.
-    private var outlineLeft = 0
-    private var outlineTop = 0
-    private var outlineRight = 0
-    private var outlineBottom = 0
+    private var boxShadowPath: Path? = null
+    private var boxShadowPaint: Paint? = null
     private var clipIsEmpty = true
-    // Sub-pixel remainder of the clip origin, carried on this view's own
-    // translation and subtracted back out of the content container.
-    private var clipResidualX = 0f
-    private var clipResidualY = 0f
-    // The consumer's `transform` translation, kept apart from the residual so
-    // the two compose instead of clobbering each other.
-    private var userTranslationX = 0f
-    private var userTranslationY = 0f
     private var requestedImportantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_AUTO
+    private var autonomousMotion = false
     private var acceptingTouchStream = false
-    private var retainedTouchEvent: MotionEvent? = null
 
     /** Driver this view is registered with in the native registry (0 = none). */
     internal var boundDriverId: Double = 0.0
 
-    /** Set once a legacy command arrives; later initialClip* props are ignored. */
+    /** Set once a command arrives; later initial presentation props are ignored. */
     internal var commandIsAuthoritative = false
 
     private val clipOutlineProvider = object : ViewOutlineProvider() {
@@ -73,93 +92,32 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
                 return
             }
 
-            if (outlineUsesPath) {
-                outline.setPath(clipPath)
-            } else if (outlineUsesFloatRoundRect) {
-                // Android's public Outline.setRoundRect overload accepts only
-                // integer edges. Path.addRoundRect is the platform float
-                // round-rect primitive; Outline.setPath preserves those edges
-                // without falling back to V1's integer/residual placement.
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                // Outline.setRoundRect only accepts integer edges. The raw path
+                // keeps sub-pixel coordinates and off-host geometry intact.
                 outline.setPath(clipPath)
             } else {
-                outline.setRoundRect(
-                    outlineLeft,
-                    outlineTop,
-                    outlineRight,
-                    outlineBottom,
-                    clipRadius,
-                )
+                outline.setEmpty()
             }
         }
     }
 
     init {
-        super.addView(contentContainer)
-        outlineProvider = clipOutlineProvider
-        clipToOutline = true
+        clipContainer.addView(contentContainer)
+        super.addView(clipContainer)
+        if (supportsPathOutlineClipping) {
+            clipContainer.outlineProvider = clipOutlineProvider
+            clipContainer.clipToOutline = true
+        }
+        clipToOutline = false
+        setWillNotDraw(false)
         visibility = INVISIBLE
         importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
     }
 
-    fun setClipGeometryDip(
-        x: Double,
-        y: Double,
-        width: Double,
-        height: Double,
-        radius: Double,
-    ) = setClipPresentationDip(x, y, width, height, radius, 0.0, 0.0)
-
+    /** DIP fallback used until a registered view has pushed host metrics. */
     @DoNotStrip
     fun setClipPresentationDip(
-        x: Double,
-        y: Double,
-        width: Double,
-        height: Double,
-        radius: Double,
-        contentTranslateX: Double,
-        contentTranslateY: Double,
-    ) {
-        if (!x.isFinite() || !y.isFinite() || !width.isFinite() ||
-            !height.isFinite() || !radius.isFinite() ||
-            !contentTranslateX.isFinite() || !contentTranslateY.isFinite()
-        ) {
-            return
-        }
-
-        val nextX = PixelUtil.toPixelFromDIP(x).toFloat()
-        val nextY = PixelUtil.toPixelFromDIP(y).toFloat()
-        val nextWidth = PixelUtil.toPixelFromDIP(width).toFloat()
-        val nextHeight = PixelUtil.toPixelFromDIP(height).toFloat()
-        val nextRadius = PixelUtil.toPixelFromDIP(radius).toFloat()
-        val nextContentTranslateX = PixelUtil.toPixelFromDIP(contentTranslateX).toFloat()
-        val nextContentTranslateY = PixelUtil.toPixelFromDIP(contentTranslateY).toFloat()
-        if (!nextX.isFinite() || !nextY.isFinite() || !nextWidth.isFinite() ||
-            !nextHeight.isFinite() || !nextRadius.isFinite() ||
-            !nextContentTranslateX.isFinite() || !nextContentTranslateY.isFinite()
-        ) {
-            return
-        }
-
-        requestedX = nextX
-        requestedY = nextY
-        requestedWidth = nextWidth
-        requestedHeight = nextHeight
-        requestedRadius = nextRadius
-        requestedTopLeftRadius = nextRadius
-        requestedTopRightRadius = nextRadius
-        requestedBottomRightRadius = nextRadius
-        requestedBottomLeftRadius = nextRadius
-        requestedCurveCode = CLIP_CURVE_CIRCULAR
-        requestedContentTranslateX = nextContentTranslateX
-        requestedContentTranslateY = nextContentTranslateY
-        requestedContentScale = 1f
-        requestedUsesV2Geometry = false
-        applyRequestedGeometry()
-    }
-
-    /** V2 DIP fallback used until a registered view has pushed host metrics. */
-    @DoNotStrip
-    fun setClipPresentationV2Dip(
         x: Double,
         y: Double,
         width: Double,
@@ -172,13 +130,29 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         contentTranslateX: Double,
         contentTranslateY: Double,
         contentScale: Double,
+        shadowEnabled: Boolean = false,
+        shadowRed: Double = 0.0,
+        shadowGreen: Double = 0.0,
+        shadowBlue: Double = 0.0,
+        shadowAlpha: Double = 1.0,
+        shadowOffsetX: Double = 0.0,
+        shadowOffsetY: Double = 0.0,
+        shadowBlurRadius: Double = 0.0,
+        shadowSpreadDistance: Double = 0.0,
     ) {
         if (!x.isFinite() || !y.isFinite() || !width.isFinite() ||
             !height.isFinite() || !topLeftRadius.isFinite() ||
             !topRightRadius.isFinite() || !bottomRightRadius.isFinite() ||
             !bottomLeftRadius.isFinite() || !contentTranslateX.isFinite() ||
             !contentTranslateY.isFinite() || !contentScale.isFinite() ||
-            contentScale <= 0.0 ||
+            !shadowRed.isFinite() || !shadowGreen.isFinite() ||
+            !shadowBlue.isFinite() || !shadowAlpha.isFinite() ||
+            !shadowOffsetX.isFinite() ||
+            !shadowOffsetY.isFinite() || !shadowBlurRadius.isFinite() ||
+            !shadowSpreadDistance.isFinite() || contentScale <= 0.0 ||
+            shadowRed !in 0.0..1.0 || shadowGreen !in 0.0..1.0 ||
+            shadowBlue !in 0.0..1.0 || shadowAlpha !in 0.0..1.0 ||
+            shadowBlurRadius < 0.0 ||
             (curveCode != CLIP_CURVE_CIRCULAR && curveCode != CLIP_CURVE_CONTINUOUS)
         ) {
             return
@@ -195,12 +169,19 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         val nextContentTranslateX = PixelUtil.toPixelFromDIP(contentTranslateX).toFloat()
         val nextContentTranslateY = PixelUtil.toPixelFromDIP(contentTranslateY).toFloat()
         val nextContentScale = contentScale.toFloat()
+        val nextShadowOffsetX = PixelUtil.toPixelFromDIP(shadowOffsetX).toFloat()
+        val nextShadowOffsetY = PixelUtil.toPixelFromDIP(shadowOffsetY).toFloat()
+        val nextShadowBlurRadius = PixelUtil.toPixelFromDIP(shadowBlurRadius).toFloat()
+        val nextShadowSpreadDistance =
+            PixelUtil.toPixelFromDIP(shadowSpreadDistance).toFloat()
         if (!nextX.isFinite() || !nextY.isFinite() || !nextWidth.isFinite() ||
             !nextHeight.isFinite() || !nextTopLeftRadius.isFinite() ||
             !nextTopRightRadius.isFinite() || !nextBottomRightRadius.isFinite() ||
             !nextBottomLeftRadius.isFinite() || !nextContentTranslateX.isFinite() ||
             !nextContentTranslateY.isFinite() || !nextContentScale.isFinite() ||
-            nextContentScale <= 0f
+            !nextShadowOffsetX.isFinite() || !nextShadowOffsetY.isFinite() ||
+            !nextShadowBlurRadius.isFinite() ||
+            !nextShadowSpreadDistance.isFinite() || nextContentScale <= 0f
         ) {
             return
         }
@@ -209,7 +190,6 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         requestedY = nextY
         requestedWidth = nextWidth
         requestedHeight = nextHeight
-        requestedRadius = 0f
         requestedTopLeftRadius = nextTopLeftRadius
         requestedTopRightRadius = nextTopRightRadius
         requestedBottomRightRadius = nextBottomRightRadius
@@ -218,47 +198,23 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         requestedContentTranslateX = nextContentTranslateX
         requestedContentTranslateY = nextContentTranslateY
         requestedContentScale = nextContentScale
-        requestedUsesV2Geometry = true
+        storeShadow(
+            shadowEnabled,
+            shadowRed.toFloat(),
+            shadowGreen.toFloat(),
+            shadowBlue.toFloat(),
+            shadowAlpha.toFloat(),
+            nextShadowOffsetX,
+            nextShadowOffsetY,
+            nextShadowBlurRadius,
+            nextShadowSpreadDistance,
+        )
         applyRequestedGeometry()
     }
 
-    /**
-     * Driver hot path: called from the C++ registry with final pixel-space,
-     * pre-normalized values (see deliverToView in SmoothClipRegistry.cpp).
-     * No validation, scaling or normalization happens here.
-     */
+    /** Driver hot path. Geometry is canonical, raw, and host-independent. */
     @DoNotStrip
     fun setClipPresentationPx(
-        left: Float,
-        top: Float,
-        right: Float,
-        bottom: Float,
-        radius: Float,
-        contentTranslateX: Float,
-        contentTranslateY: Float,
-    ) {
-        // Debug-only Perfetto slice for the Kotlin share of the C++
-        // SmoothClip.setPresentation section (see SmoothClipTrace.h).
-        if (BuildConfig.DEBUG) Trace.beginSection("SmoothClip.applyPx")
-        try {
-            // Stored only; applyNormalizedClipPx computes the clip residual and
-            // applyClipPlacement writes both translations together, because the
-            // content's final offset depends on the residual as well.
-            requestedContentTranslateX = contentTranslateX
-            requestedContentTranslateY = contentTranslateY
-            requestedContentScale = 1f
-            applyNormalizedClipPx(left, top, right, bottom, radius)
-        } finally {
-            if (BuildConfig.DEBUG) Trace.endSection()
-        }
-    }
-
-    /**
-     * V2 driver hot path. Geometry is already intersected with the host and
-     * its four radii have already had the CSS overlap factor applied in C++.
-     */
-    @DoNotStrip
-    fun setClipPresentationV2Px(
         left: Float,
         top: Float,
         right: Float,
@@ -271,24 +227,51 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         contentTranslateX: Float,
         contentTranslateY: Float,
         contentScale: Float,
+        shadowEnabled: Boolean = false,
+        shadowRed: Float = 0f,
+        shadowGreen: Float = 0f,
+        shadowBlue: Float = 0f,
+        shadowAlpha: Float = 1f,
+        shadowOffsetX: Float = 0f,
+        shadowOffsetY: Float = 0f,
+        shadowBlurRadius: Float = 0f,
+        shadowSpreadDistance: Float = 0f,
     ) {
         if (!left.isFinite() || !top.isFinite() || !right.isFinite() ||
             !bottom.isFinite() || !topLeftRadius.isFinite() ||
             !topRightRadius.isFinite() || !bottomRightRadius.isFinite() ||
             !bottomLeftRadius.isFinite() || !contentTranslateX.isFinite() ||
             !contentTranslateY.isFinite() || !contentScale.isFinite() ||
-            contentScale <= 0f ||
+            !shadowRed.isFinite() || !shadowGreen.isFinite() ||
+            !shadowBlue.isFinite() || !shadowAlpha.isFinite() ||
+            !shadowOffsetX.isFinite() ||
+            !shadowOffsetY.isFinite() || !shadowBlurRadius.isFinite() ||
+            !shadowSpreadDistance.isFinite() || contentScale <= 0f ||
+            shadowRed !in 0f..1f || shadowGreen !in 0f..1f ||
+            shadowBlue !in 0f..1f || shadowAlpha !in 0f..1f ||
+            shadowBlurRadius < 0f ||
             (curveCode != CLIP_CURVE_CIRCULAR && curveCode != CLIP_CURVE_CONTINUOUS)
         ) {
             return
         }
 
-        if (BuildConfig.DEBUG) Trace.beginSection("SmoothClip.applyV2Px")
+        if (BuildConfig.DEBUG) Trace.beginSection("SmoothClip.applyPresentationPx")
         try {
             requestedContentTranslateX = contentTranslateX
             requestedContentTranslateY = contentTranslateY
             requestedContentScale = contentScale
-            applyNormalizedClipV2Px(
+            storeShadow(
+                shadowEnabled,
+                shadowRed,
+                shadowGreen,
+                shadowBlue,
+                shadowAlpha,
+                shadowOffsetX,
+                shadowOffsetY,
+                shadowBlurRadius,
+                shadowSpreadDistance,
+            )
+            applyCanonicalClipPx(
                 left,
                 top,
                 right,
@@ -305,135 +288,155 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
     }
 
     private fun applyRequestedGeometry() {
-        if (requestedUsesV2Geometry) {
-            normalizeClipGeometryV2Px(
-                requestedX,
-                requestedY,
-                requestedWidth,
-                requestedHeight,
-                requestedTopLeftRadius,
-                requestedTopRightRadius,
-                requestedBottomRightRadius,
-                requestedBottomLeftRadius,
-                requestedCurveCode,
-                width.toFloat(),
-                height.toFloat(),
-            ) { left, top, right, bottom, topLeft, topRight, bottomRight, bottomLeft, curve ->
-                applyNormalizedClipV2Px(
-                    left,
-                    top,
-                    right,
-                    bottom,
-                    topLeft,
-                    topRight,
-                    bottomRight,
-                    bottomLeft,
-                    curve,
-                )
-            }
-        } else {
-            normalizeClipGeometryPx(
-                requestedX,
-                requestedY,
-                requestedWidth,
-                requestedHeight,
-                requestedRadius,
-                width.toFloat(),
-                height.toFloat(),
-            ) { left, top, right, bottom, radius ->
-                applyNormalizedClipPx(left, top, right, bottom, radius)
-            }
+        canonicalizeClipGeometryPx(
+            requestedX,
+            requestedY,
+            requestedWidth,
+            requestedHeight,
+            requestedTopLeftRadius,
+            requestedTopRightRadius,
+            requestedBottomRightRadius,
+            requestedBottomLeftRadius,
+            requestedCurveCode,
+        ) { left, top, right, bottom, topLeft, topRight, bottomRight, bottomLeft, curve ->
+            applyCanonicalClipPx(
+                left,
+                top,
+                right,
+                bottom,
+                topLeft,
+                topRight,
+                bottomRight,
+                bottomLeft,
+                curve,
+            )
         }
     }
 
-    private fun applyNormalizedClipPx(
-        left: Float,
-        top: Float,
-        right: Float,
-        bottom: Float,
-        radius: Float,
+    private fun storeShadow(
+        enabled: Boolean,
+        red: Float,
+        green: Float,
+        blue: Float,
+        alpha: Float,
+        offsetX: Float,
+        offsetY: Float,
+        blurRadius: Float,
+        spreadDistance: Float,
     ) {
-        // Far edges are derived, not rounded independently: see outlineFarEdge.
-        // Independent rounding breathes the emitted size by 1 px under pure
-        // translation, which is the visible artifact once an animation's tail
-        // slows below a pixel per frame.
-        val nextOutlineLeft = outlineOrigin(left)
-        val nextOutlineTop = outlineOrigin(top)
-        val nextOutlineRight = outlineFarEdge(left, right)
-        val nextOutlineBottom = outlineFarEdge(top, bottom)
-        // Outline.setRoundRect collapses a degenerate integer rect to empty.
-        // Use the exact emitted geometry as the single semantic source for
-        // rendering, visibility, accessibility and hit testing.
-        val isEmpty = outlineRectIsEmpty(
-            nextOutlineLeft,
-            nextOutlineTop,
-            nextOutlineRight,
-            nextOutlineBottom,
-        )
-        val outlineGeometryChanged = outlineUsesPath || outlineUsesFloatRoundRect || outlineChanged(
-            nextOutlineLeft,
-            nextOutlineTop,
-            nextOutlineRight,
-            nextOutlineBottom,
-            radius,
-            outlineLeft,
-            outlineTop,
-            outlineRight,
-            outlineBottom,
-            clipRadius,
+        val wasVisible = requestedShadowEnabled && requestedShadowAlpha > 0f
+        val isVisible = enabled && alpha > 0f
+        val paintChanged = red != requestedShadowRed ||
+            green != requestedShadowGreen || blue != requestedShadowBlue ||
+            alpha != requestedShadowAlpha || blurRadius != requestedShadowBlurRadius
+        val pathChanged = offsetX != requestedShadowOffsetX ||
+            offsetY != requestedShadowOffsetY ||
+            spreadDistance != requestedShadowSpreadDistance
+        requestedShadowEnabled = enabled
+        requestedShadowRed = red
+        requestedShadowGreen = green
+        requestedShadowBlue = blue
+        requestedShadowAlpha = alpha
+        requestedShadowOffsetX = offsetX
+        requestedShadowOffsetY = offsetY
+        requestedShadowBlurRadius = blurRadius
+        requestedShadowSpreadDistance = spreadDistance
+        if (!isVisible) {
+            if (wasVisible) invalidate()
+            return
+        }
+        if (paintChanged || boxShadowPaint == null) updateBoxShadowPaint()
+        if (pathChanged || !wasVisible || boxShadowPath == null) {
+            rebuildBoxShadowPath()
+        }
+        if (paintChanged || pathChanged || !wasVisible) invalidate()
+    }
+
+    private fun updateBoxShadowPaint() {
+        val paint = boxShadowPaint ?: Paint(Paint.ANTI_ALIAS_FLAG).also {
+            boxShadowPaint = it
+        }
+        paint.color = Color.argb(
+            (requestedShadowAlpha * 255f).roundToInt(),
+            (requestedShadowRed * 255f).roundToInt(),
+            (requestedShadowGreen * 255f).roundToInt(),
+            (requestedShadowBlue * 255f).roundToInt(),
         )
+        val sigmaPx = requestedShadowBlurRadius * 0.5f
+        val maskRadius = if (sigmaPx > 0.5f) {
+            (sigmaPx - 0.5f) / 0.57735f
+        } else {
+            0f
+        }
+        paint.maskFilter = if (maskRadius > 0f) {
+            BlurMaskFilter(maskRadius, BlurMaskFilter.Blur.NORMAL)
+        } else {
+            null
+        }
+    }
 
-        clipLeft = left
-        clipTop = top
-        clipRight = right
-        clipBottom = bottom
-        clipRadius = radius
-        clipTopLeftRadius = radius
-        clipTopRightRadius = radius
-        clipBottomRightRadius = radius
-        clipBottomLeftRadius = radius
-        clipCurveCode = CLIP_CURVE_CIRCULAR
-        // Whatever integer rounding threw away, carried on this view's own
-        // translation so the clip edge still lands where the driver asked
-        // instead of snapping to the pixel grid while the content it clips
-        // slides in floats. It is a single scalar per axis only because the far
-        // edges are derived from the origin — with independently rounded edges
-        // no one translation could place both.
-        clipResidualX = left - nextOutlineLeft
-        clipResidualY = top - nextOutlineTop
-        applyClipPlacement()
-
-        if (isEmpty != clipIsEmpty) {
-            if (isEmpty) cancelAcceptedTouchStream()
-            clipIsEmpty = isEmpty
-            visibility = clipVisibility(isEmpty)
-            importantForAccessibility = clipAccessibility(
-                isEmpty,
-                requestedImportantForAccessibility,
-            )
+    private fun adjustedRadiusForSpread(radius: Float, spread: Float): Float {
+        val magnitude = abs(spread)
+        val multiplier = if (magnitude > 0f && radius < magnitude) {
+            1f + (radius / magnitude - 1f).pow(3)
+        } else {
+            1f
         }
+        return (radius + spread * multiplier).coerceAtLeast(0f)
+    }
 
-        // An emptiness transition necessarily changes at least one emitted
-        // edge, so the existing edge/radius key cannot skip invalidateOutline.
-        if (!outlineGeometryChanged) return
+    private fun rebuildBoxShadowPath() {
+        if (!requestedShadowEnabled || requestedShadowAlpha <= 0f) return
+        val path = boxShadowPath ?: Path().also { boxShadowPath = it }
+        path.reset()
+        if (clipIsEmpty) return
+        val spread = requestedShadowSpreadDistance
+        val left = clipLeft - spread + requestedShadowOffsetX
+        val top = clipTop - spread + requestedShadowOffsetY
+        val right = clipRight + spread + requestedShadowOffsetX
+        val bottom = clipBottom + spread + requestedShadowOffsetY
+        if (right <= left || bottom <= top) return
+        appendRoundedRectPath(
+            path,
+            left,
+            top,
+            right,
+            bottom,
+            adjustedRadiusForSpread(clipTopLeftRadius, spread),
+            adjustedRadiusForSpread(clipTopRightRadius, spread),
+            adjustedRadiusForSpread(clipBottomRightRadius, spread),
+            adjustedRadiusForSpread(clipBottomLeftRadius, spread),
+            clipCurveCode,
+        )
+    }
 
-        outlineUsesPath = false
-        outlineUsesFloatRoundRect = false
-        clipPath.reset()
-        outlineLeft = nextOutlineLeft
-        outlineTop = nextOutlineTop
-        outlineRight = nextOutlineRight
-        outlineBottom = nextOutlineBottom
-        // Schedules the traversal too: invalidateOutline() ends in
-        // invalidateViewProperty(), which damages this view in its parent up
-        // to ViewRootImpl.scheduleTraversals(). A plain invalidate() on top
-        // would only add PFLAG_INVALIDATED, forcing a display-list re-record
-        // every frame to restage an outline the RenderNode applies as a
-        // property.
-        invalidateOutline()
+    override fun dispatchDraw(canvas: Canvas) {
+        val hostSaveCount = canvas.save()
+        canvas.clipRect(0f, 0f, width.toFloat(), height.toFloat())
+        try {
+            val shadowPath = boxShadowPath
+            val shadowPaint = boxShadowPaint
+            if (requestedShadowEnabled && !clipIsEmpty &&
+                requestedShadowAlpha > 0f && shadowPath != null &&
+                shadowPaint != null && !shadowPath.isEmpty
+            ) {
+                val apertureSaveCount = canvas.save()
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+                    canvas.clipOutPath(clipPath)
+                } else {
+                    @Suppress("DEPRECATION")
+                    canvas.clipPath(clipPath, Region.Op.DIFFERENCE)
+                }
+                canvas.drawPath(shadowPath, shadowPaint)
+                canvas.restoreToCount(apertureSaveCount)
+            }
+            super.dispatchDraw(canvas)
+        } finally {
+            canvas.restoreToCount(hostSaveCount)
+        }
     }
 
-    private fun applyNormalizedClipV2Px(
+    private fun applyCanonicalClipPx(
         left: Float,
         top: Float,
         right: Float,
@@ -444,24 +447,9 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         bottomLeftRadius: Float,
         curveCode: Int,
     ) {
-        val radiiAreUniform = topLeftRadius == topRightRadius &&
-            topLeftRadius == bottomRightRadius &&
-            topLeftRadius == bottomLeftRadius
-        val needsPath = curveCode == CLIP_CURVE_CONTINUOUS || !radiiAreUniform
-        if (!needsPath) {
-            applyNormalizedFloatRoundRectV2Px(
-                left,
-                top,
-                right,
-                bottom,
-                topLeftRadius,
-            )
-            return
-        }
-
         val isEmpty = right <= left || bottom <= top
-        val outlineGeometryChanged = !outlineUsesPath ||
-            left != clipLeft || top != clipTop || right != clipRight ||
+        val geometryChanged = left != clipLeft || top != clipTop ||
+            right != clipRight ||
             bottom != clipBottom || topLeftRadius != clipTopLeftRadius ||
             topRightRadius != clipTopRightRadius ||
             bottomRightRadius != clipBottomRightRadius ||
@@ -471,122 +459,60 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         clipTop = top
         clipRight = right
         clipBottom = bottom
-        clipRadius = if (radiiAreUniform) topLeftRadius else 0f
+        val radiiAreUniform = topLeftRadius == topRightRadius &&
+            topLeftRadius == bottomRightRadius &&
+            topLeftRadius == bottomLeftRadius
         clipTopLeftRadius = topLeftRadius
         clipTopRightRadius = topRightRadius
         clipBottomRightRadius = bottomRightRadius
         clipBottomLeftRadius = bottomLeftRadius
         clipCurveCode = curveCode
-        // Path outlines retain physical-pixel floats, so unlike the legacy
-        // integer round rect they need no residual translation compensation.
-        clipResidualX = 0f
-        clipResidualY = 0f
-        applyClipPlacement()
-
-        if (isEmpty != clipIsEmpty) {
-            if (isEmpty) cancelAcceptedTouchStream()
-            clipIsEmpty = isEmpty
-            visibility = clipVisibility(isEmpty)
-            importantForAccessibility = clipAccessibility(
-                isEmpty,
-                requestedImportantForAccessibility,
-            )
-        }
-
-        if (!outlineGeometryChanged) return
-
-        outlineUsesPath = true
-        outlineUsesFloatRoundRect = false
-        clipPath.reset()
-        if (!isEmpty) {
-            appendRoundedRectPath(
-                clipPath,
-                left,
-                top,
-                right,
-                bottom,
-                topLeftRadius,
-                topRightRadius,
-                bottomRightRadius,
-                bottomLeftRadius,
-                curveCode,
-            )
-        }
-        invalidateOutline()
-    }
+        applyContentTransform()
 
-    /**
-     * Protocol V2 uniform circular geometry stays entirely in float physical
-     * pixels. V1 intentionally continues through applyNormalizedClipPx so its
-     * integer outline and residual placement remain byte-for-byte compatible.
-     */
-    private fun applyNormalizedFloatRoundRectV2Px(
-        left: Float,
-        top: Float,
-        right: Float,
-        bottom: Float,
-        radius: Float,
-    ) {
-        val isEmpty = right <= left || bottom <= top
-        val outlineGeometryChanged = outlineUsesPath ||
-            !outlineUsesFloatRoundRect ||
-            left != clipLeft || top != clipTop || right != clipRight ||
-            bottom != clipBottom || radius != clipRadius
+        clipIsEmpty = isEmpty
+        reapplyClipPresentation()
 
-        clipLeft = left
-        clipTop = top
-        clipRight = right
-        clipBottom = bottom
-        clipRadius = radius
-        clipTopLeftRadius = radius
-        clipTopRightRadius = radius
-        clipBottomRightRadius = radius
-        clipBottomLeftRadius = radius
-        clipCurveCode = CLIP_CURVE_CIRCULAR
-        clipResidualX = 0f
-        clipResidualY = 0f
-        applyClipPlacement()
-
-        if (isEmpty != clipIsEmpty) {
-            if (isEmpty) cancelAcceptedTouchStream()
-            clipIsEmpty = isEmpty
-            visibility = clipVisibility(isEmpty)
-            importantForAccessibility = clipAccessibility(
-                isEmpty,
-                requestedImportantForAccessibility,
-            )
-        }
+        if (!geometryChanged) return
 
-        if (!outlineGeometryChanged) return
-        outlineUsesPath = false
-        outlineUsesFloatRoundRect = true
         clipPath.reset()
         if (!isEmpty) {
-            clipPath.addRoundRect(
-                left,
-                top,
-                right,
-                bottom,
-                radius,
-                radius,
-                Path.Direction.CW,
-            )
+            if (curveCode == CLIP_CURVE_CIRCULAR && radiiAreUniform) {
+                clipPath.addRoundRect(
+                    left,
+                    top,
+                    right,
+                    bottom,
+                    topLeftRadius,
+                    topLeftRadius,
+                    Path.Direction.CW,
+                )
+            } else {
+                appendRoundedRectPath(
+                    clipPath,
+                    left,
+                    top,
+                    right,
+                    bottom,
+                    topLeftRadius,
+                    topRightRadius,
+                    bottomRightRadius,
+                    bottomLeftRadius,
+                    curveCode,
+                )
+            }
         }
-        invalidateOutline()
+        rebuildBoxShadowPath()
+        if (supportsPathOutlineClipping) {
+            clipContainer.invalidateOutline()
+        } else {
+            clipContainer.invalidate()
+        }
+        if (requestedShadowEnabled) invalidate()
     }
 
-    /**
-     * Single writer for both translations. The view carries the sub-pixel
-     * remainder of the clip origin; the content container subtracts it back out
-     * so only the clip edge moves and the content stays exactly where the
-     * driver put it. Every write self-dedupes inside View.setTranslationX, so
-     * calling this on an unchanged frame costs four float comparisons.
-     */
-    private fun applyClipPlacement() {
-        super.setTranslationX(userTranslationX + clipResidualX)
-        super.setTranslationY(userTranslationY + clipResidualY)
-        contentContainer.translationX = requestedContentTranslateX - clipResidualX
-        contentContainer.translationY = requestedContentTranslateY - clipResidualY
+    private fun applyContentTransform() {
+        contentContainer.translationX = requestedContentTranslateX
+        contentContainer.translationY = requestedContentTranslateY
         // Scale is intentionally centered and lives on the content only. View
         // translation properties are applied independently of scale, so a
         // caller's tx/ty remains a physical-pixel offset rather than scaling
@@ -597,36 +523,14 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         contentContainer.scaleY = requestedContentScale
     }
 
-    // The clip's sub-pixel placement and the consumer's `transform` prop share
-    // one property, so they are composed rather than allowed to overwrite each
-    // other. RN routes every transform write through these setters
-    // (BaseViewManager.setTransformProperty), so intercepting them is enough.
-    //
-    // The getters are deliberately NOT overridden to hide the residual:
-    // View.setTranslationX dedupes by calling getTranslationX() virtually, so
-    // reporting the consumer's value there would make every write look like a
-    // change and re-invalidate the view on frames where nothing moved. The cost
-    // of leaving them alone is that a read-modify-write of translationX picks up
-    // the residual twice — sub-pixel, and nothing in RN's transform path reads
-    // back before writing.
-    override fun setTranslationX(translationX: Float) {
-        userTranslationX = translationX
-        super.setTranslationX(translationX + clipResidualX)
-    }
-
-    override fun setTranslationY(translationY: Float) {
-        userTranslationY = translationY
-        super.setTranslationY(translationY + clipResidualY)
-    }
-
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
+        clipContainer.layout(0, 0, w, h)
         contentContainer.layout(0, 0, w, h)
-        applyClipPlacement()
+        applyContentTransform()
         if (boundDriverId != 0.0) {
-            // Driver deliveries are pre-normalized in C++ against the pushed
-            // host metrics; refresh them and let the registry redeliver the
-            // visible value synchronously.
+            // Host metrics only gate lifecycle readiness. Redelivery remains
+            // raw and canonical; this view owns the final viewport crop.
             SmoothClipBindings.nativeSetViewHostGeometry(
                 boundDriverId,
                 this,
@@ -641,6 +545,7 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
             // authoritative command wins over the driver value on resize.
             applyRequestedGeometry()
         }
+        reapplyClipPresentation()
     }
 
     override fun onAttachedToWindow() {
@@ -695,89 +600,33 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
     }
 
     private fun containsRoundedPoint(x: Float, y: Float): Boolean {
-        // The event arrives in this view's local space, which the parent has
-        // already inverse-transformed by the residual translation. Adding it
-        // back maps the point into the space clipLeft/clipTop are expressed in,
-        // so hit testing stays against the geometry the driver delivered — the
-        // same test as before the residual existed.
-        if (outlineUsesPath) {
-            // Reuse the exact cubic path supplied to Outline.setPath: hit
-            // testing must follow the rendered aperture, including its
-            // portable continuous-curve approximation.
-            return !clipIsEmpty && containsPathPoint(clipPath, x, y)
-        }
-        return containsRoundedPointPx(
-            x + clipResidualX,
-            y + clipResidualY,
-            clipLeft,
-            clipTop,
-            clipRight,
-            clipBottom,
-            clipRadius,
-            clipIsEmpty,
-        )
+        // Reuse the exact path supplied to the Outline. Hit testing therefore
+        // follows the rendered aperture, including continuous corners.
+        return !clipIsEmpty && containsPathPoint(clipPath, x, y)
     }
 
     override fun dispatchTouchEvent(event: MotionEvent): Boolean {
-        when (event.actionMasked) {
-            MotionEvent.ACTION_DOWN -> {
-                clearTouchState()
-                acceptingTouchStream = containsRoundedPoint(event.x, event.y)
-                if (!acceptingTouchStream) return false
-                val accepted = super.dispatchTouchEvent(event)
-                if (accepted) {
-                    retainTouchEvent(event)
-                } else {
-                    clearTouchState()
-                }
-                return accepted
-            }
-            MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
-                val result = if (acceptingTouchStream) {
-                    super.dispatchTouchEvent(event)
-                } else {
-                    false
-                }
-                clearTouchState()
-                return result
-            }
+        val action = event.actionMasked
+        if (action == MotionEvent.ACTION_DOWN) {
+            // The aperture gates admission only. Once accepted, the stream
+            // belongs to Android until its real UP or CANCEL arrives.
+            clearTouchState()
+            if (!containsRoundedPoint(event.x, event.y)) return false
+            acceptingTouchStream = true
         }
 
         if (!acceptingTouchStream) return false
         val result = super.dispatchTouchEvent(event)
-        retainTouchEvent(event)
+        if ((action == MotionEvent.ACTION_DOWN && !result) ||
+            action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP
+        ) {
+            clearTouchState()
+        }
         return result
     }
 
-    private fun retainTouchEvent(event: MotionEvent) {
-        retainedTouchEvent?.recycle()
-        retainedTouchEvent = MotionEvent.obtain(event)
-    }
-
     private fun clearTouchState() {
         acceptingTouchStream = false
-        retainedTouchEvent?.recycle()
-        retainedTouchEvent = null
-    }
-
-    private fun cancelAcceptedTouchStream() {
-        val latest = retainedTouchEvent
-        if (!acceptingTouchStream || latest == null) {
-            clearTouchState()
-            return
-        }
-        val cancel = MotionEvent.obtain(latest)
-        cancel.action = MotionEvent.ACTION_CANCEL
-        // Terminal BEFORE dispatch: a child's synchronous cancel handler can
-        // re-enter geometry application, and a nested emptiness transition
-        // must observe an already-ended stream instead of synthesizing a
-        // second cancel for it.
-        clearTouchState()
-        try {
-            super.dispatchTouchEvent(cancel)
-        } finally {
-            cancel.recycle()
-        }
     }
 
     fun setRequestedImportantForAccessibility(value: Int) {
@@ -785,14 +634,24 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         reapplyClipPresentation()
     }
 
+    @DoNotStrip
+    fun setAutonomousMotion(active: Boolean) {
+        if (autonomousMotion == active) return
+        autonomousMotion = active
+        reapplyClipPresentation()
+    }
+
     fun reapplyClipPresentation() {
-        val expectedVisibility = clipVisibility(clipIsEmpty)
+        val apertureVisible = apertureIntersectsHost()
+        val expectedVisibility = renderVisibility(
+            apertureVisible || shadowIntersectsHost(),
+        )
         if (visibility != expectedVisibility) {
             visibility = expectedVisibility
         }
 
         val expectedAccessibility = clipAccessibility(
-            clipIsEmpty,
+            autonomousMotion || !apertureVisible,
             requestedImportantForAccessibility,
         )
         if (importantForAccessibility != expectedAccessibility) {
@@ -800,6 +659,29 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         }
     }
 
+    private fun apertureIntersectsHost(): Boolean =
+        !clipIsEmpty && clipRight > 0f && clipBottom > 0f &&
+            clipLeft < width.toFloat() && clipTop < height.toFloat()
+
+    private fun shadowIntersectsHost(): Boolean {
+        if (clipIsEmpty || !requestedShadowEnabled || requestedShadowAlpha <= 0f) {
+            return false
+        }
+        val spread = requestedShadowSpreadDistance
+        val pathLeft = clipLeft - spread + requestedShadowOffsetX
+        val pathTop = clipTop - spread + requestedShadowOffsetY
+        val pathRight = clipRight + spread + requestedShadowOffsetX
+        val pathBottom = clipBottom + spread + requestedShadowOffsetY
+        if (pathRight <= pathLeft || pathBottom <= pathTop) return false
+
+        // CSS blur is specified as a diameter-like radius. Expanding by the
+        // full value is conservative and prevents culling a faint blur tail.
+        val blurOutset = requestedShadowBlurRadius
+        return pathRight + blurOutset > 0f && pathBottom + blurOutset > 0f &&
+            pathLeft - blurOutset < width.toFloat() &&
+            pathTop - blurOutset < height.toFloat()
+    }
+
     fun resetClipState() {
         clearTouchState()
         commandIsAuthoritative = false
@@ -807,7 +689,6 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         requestedY = 0f
         requestedWidth = 0f
         requestedHeight = 0f
-        requestedRadius = 0f
         requestedTopLeftRadius = 0f
         requestedTopRightRadius = 0f
         requestedBottomRightRadius = 0f
@@ -816,17 +697,19 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
         requestedContentTranslateX = 0f
         requestedContentTranslateY = 0f
         requestedContentScale = 1f
-        requestedUsesV2Geometry = false
-        clipResidualX = 0f
-        clipResidualY = 0f
-        applyClipPlacement()
-        outlineUsesPath = false
-        outlineUsesFloatRoundRect = false
+        requestedShadowEnabled = false
+        requestedShadowRed = 0f
+        requestedShadowGreen = 0f
+        requestedShadowBlue = 0f
+        requestedShadowAlpha = 1f
+        requestedShadowOffsetX = 0f
+        requestedShadowOffsetY = 0f
+        requestedShadowBlurRadius = 0f
+        requestedShadowSpreadDistance = 0f
+        boxShadowPaint = null
+        boxShadowPath = null
+        applyContentTransform()
         clipPath.reset()
-        outlineLeft = 0
-        outlineTop = 0
-        outlineRight = 0
-        outlineBottom = 0
         requestedImportantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_AUTO
         applyRequestedGeometry()
     }