react-native-morph-card 0.1.10 → 0.1.12

package/android/src/main/java/com/melivalesca/morphcard/MorphCardSourceView.kt

@@ -100,11 +100,35 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
 
   // ── Snapshot ──
 
+  /**
+   * Capture a snapshot of the source card's children WITHOUT border radius clipping.
+   * Like iOS, we want the raw content (e.g. the full rectangular image), not what's
+   * visually clipped on screen. The border radius is applied separately during animation.
+   */
   private fun captureSnapshot(): Bitmap {
     val w = width
     val h = height
     val bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
     val canvas = Canvas(bitmap)
+
+    // Temporarily disable clipToOutline on all descendant views so that
+    // the snapshot captures the full rectangular content, not the clipped version.
+    val clippedViews = mutableListOf<View>()
+    fun disableClipping(view: View) {
+      if (view.clipToOutline) {
+        clippedViews.add(view)
+        view.clipToOutline = false
+      }
+      if (view is ViewGroup) {
+        for (i in 0 until view.childCount) {
+          disableClipping(view.getChildAt(i))
+        }
+      }
+    }
+    for (i in 0 until childCount) {
+      disableClipping(getChildAt(i))
+    }
+
     for (i in 0 until childCount) {
       val child = getChildAt(i)
       if (child.visibility != VISIBLE) continue
@@ -113,6 +137,12 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       child.draw(canvas)
       canvas.restore()
     }
+
+    // Restore clipToOutline on all views that had it
+    for (view in clippedViews) {
+      view.clipToOutline = true
+    }
+
     return bitmap
   }
 
@@ -502,8 +532,8 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     removeHierarchyListener()
 
     // The PixelCopy blocker bitmap contains the source card at its original position.
-    // Clear the card area so the card wrapper animates without a duplicate underneath.
-    // We keep the blocker in place to prevent the target screen from flashing.
+    // Replace the card area with the surrounding background color so the card wrapper
+    // animates without a duplicate underneath, and no transparent hole is visible.
     val blockerImg = wrapper.findViewWithTag<FrameLayout>("morphCardWrapper")?.let { cardW ->
       (0 until wrapper.childCount).map { wrapper.getChildAt(it) }.firstOrNull { it !== cardW }
     } as? ImageView
@@ -511,9 +541,22 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       val bmp = (blockerImg.drawable as? BitmapDrawable)?.bitmap
       if (bmp != null) {
         val clearCanvas = Canvas(bmp)
-        val clearPaint = Paint()
+        // Sample the background color from a pixel just outside the card area
+        val sampleX = max(0, cardLeft.toInt() - 1)
+        val sampleY = min(bmp.height - 1, (cardTop + cardHeight / 2).toInt())
+        val bgColor = if (sampleX >= 0 && sampleX < bmp.width && sampleY >= 0 && sampleY < bmp.height) {
+          bmp.getPixel(sampleX, sampleY)
+        } else {
+          Color.WHITE
+        }
+        // First clear the card area to transparent
+        val clearPaint = Paint(Paint.ANTI_ALIAS_FLAG)
         clearPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
         clearCanvas.drawRect(cardLeft, cardTop, cardLeft + cardWidth, cardTop + cardHeight, clearPaint)
+        // Then fill with the sampled background color (no transparent hole)
+        val fillPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+        fillPaint.color = bgColor
+        clearCanvas.drawRect(cardLeft, cardTop, cardLeft + cardWidth, cardTop + cardHeight, fillPaint)
         blockerImg.invalidate()
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-morph-card",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Native card-to-modal morph transition for React Native. iOS App Store-style expand animation.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",