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

package/README.md

@@ -13,12 +13,17 @@ native-owned timing or spring motion without animating Yoga layout. A regular
 Reanimated `View` with `overflow: 'hidden'` remains the simpler choice when
 layout-thread work and interruption snapshots are not concerns.
 
+## Demo
+
+https://github.com/user-attachments/assets/899235b3-de69-46d7-b6db-61bc54d80df8
+
 ## Requirements
 
 - React Native 0.86 or newer with the New Architecture
 - React 19.2 or newer
 - React Native Reanimated 4.5 or newer
 - React Native Worklets 0.10.1 or newer
+- Android API 24 or newer
 
 ```sh
 npm install react-native-smooth-clip-view react-native-reanimated react-native-worklets

package/android/build.gradle

@@ -1,7 +1,7 @@
 buildscript {
   ext.SmoothClipView = [
     kotlinVersion: "2.0.21",
-    minSdkVersion: 33,
+    minSdkVersion: 24,
     compileSdkVersion: 36,
     targetSdkVersion: 36
   ]
@@ -76,10 +76,7 @@ android {
   }
 
   defaultConfig {
-    // Outline.setPath only guarantees arbitrary path clipping from API 33.
-    // Keep this as a hard library floor: allowing a consuming root project to
-    // override it lower would make the per-corner/continuous path silently
-    // unsupported at runtime.
+    // API 24-32 clip child drawing directly; API 33+ use path outlines.
     minSdkVersion SmoothClipView.minSdkVersion
     targetSdkVersion getExtOrDefault("targetSdkVersion")
     // C++ resolves SmoothClipView by name and calls its presentation setters via

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

@@ -22,7 +22,25 @@ import kotlin.math.abs
 import kotlin.math.pow
 
 class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
-    private val clipContainer = 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
@@ -54,7 +72,6 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
     private var clipBottomRightRadius = 0f
     private var clipBottomLeftRadius = 0f
     private var clipCurveCode = CLIP_CURVE_CIRCULAR
-    private val clipPath = Path()
     private var boxShadowPath: Path? = null
     private var boxShadowPaint: Paint? = null
     private var clipIsEmpty = true
@@ -75,17 +92,23 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
                 return
             }
 
-            // Outline.setRoundRect only accepts integer edges. The raw path
-            // keeps sub-pixel coordinates and off-host geometry intact.
-            outline.setPath(clipPath)
+            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.setEmpty()
+            }
         }
     }
 
     init {
         clipContainer.addView(contentContainer)
         super.addView(clipContainer)
-        clipContainer.outlineProvider = clipOutlineProvider
-        clipContainer.clipToOutline = true
+        if (supportsPathOutlineClipping) {
+            clipContainer.outlineProvider = clipOutlineProvider
+            clipContainer.clipToOutline = true
+        }
         clipToOutline = false
         setWillNotDraw(false)
         visibility = INVISIBLE
@@ -479,7 +502,11 @@ class SmoothClipView(context: ThemedReactContext) : ReactViewGroup(context) {
             }
         }
         rebuildBoxShadowPath()
-        clipContainer.invalidateOutline()
+        if (supportsPathOutlineClipping) {
+            clipContainer.invalidateOutline()
+        } else {
+            clipContainer.invalidate()
+        }
         if (requestedShadowEnabled) invalidate()
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-smooth-clip-view",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Layout-free animated rounded clipping for React Native Fabric",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",