react-native-morph-card 0.1.11 → 0.1.13

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

@@ -100,11 +100,64 @@ 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.
+   *
+   * This disables both Android's clipToOutline AND Fresco's RoundingParams (used by
+   * React Native's Image component) to capture the full rectangular content.
+   */
   private fun captureSnapshot(): Bitmap {
     val w = width
     val h = height
     val bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
     val canvas = Canvas(bitmap)
+
+    // Track state to restore: (view, hadClipToOutline, savedRoundingParams)
+    data class ViewState(val view: View, val hadClip: Boolean, val roundingParams: Any?)
+    val savedStates = mutableListOf<ViewState>()
+
+    fun disableClipping(view: View) {
+      val hadClip = view.clipToOutline
+      var savedRounding: Any? = null
+
+      // Disable outline clipping
+      if (hadClip) {
+        view.clipToOutline = false
+      }
+
+      // Disable Fresco RoundingParams on DraweeView (React Native Image components).
+      // Uses reflection to avoid a compile-time dependency on Fresco.
+      try {
+        val getHierarchy = view.javaClass.getMethod("getHierarchy")
+        val hierarchy = getHierarchy.invoke(view)
+        if (hierarchy != null) {
+          val getRounding = hierarchy.javaClass.getMethod("getRoundingParams")
+          savedRounding = getRounding.invoke(hierarchy)
+          if (savedRounding != null) {
+            val roundingClass = Class.forName("com.facebook.drawee.generic.RoundingParams")
+            val setRounding = hierarchy.javaClass.getMethod("setRoundingParams", roundingClass)
+            setRounding.invoke(hierarchy, null)
+          }
+        }
+      } catch (_: Exception) {}
+
+      if (hadClip || savedRounding != null) {
+        savedStates.add(ViewState(view, hadClip, savedRounding))
+      }
+
+      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 +166,25 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       child.draw(canvas)
       canvas.restore()
     }
+
+    // Restore all view states
+    for (state in savedStates) {
+      if (state.hadClip) {
+        state.view.clipToOutline = true
+      }
+      if (state.roundingParams != null) {
+        try {
+          val getHierarchy = state.view.javaClass.getMethod("getHierarchy")
+          val hierarchy = getHierarchy.invoke(state.view)
+          if (hierarchy != null) {
+            val roundingClass = Class.forName("com.facebook.drawee.generic.RoundingParams")
+            val setRounding = hierarchy.javaClass.getMethod("setRoundingParams", roundingClass)
+            setRounding.invoke(hierarchy, state.roundingParams)
+          }
+        } catch (_: Exception) {}
+      }
+    }
+
     return bitmap
   }
 
@@ -502,8 +574,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,13 +583,22 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       val bmp = (blockerImg.drawable as? BitmapDrawable)?.bitmap
       if (bmp != null) {
         val clearCanvas = Canvas(bmp)
-        val clearPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-        clearPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
-        if (cardCornerRadiusPx > 0f) {
-          clearCanvas.drawRoundRect(cardLeft, cardTop, cardLeft + cardWidth, cardTop + cardHeight, cardCornerRadiusPx, cardCornerRadiusPx, clearPaint)
+        // 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 {
-          clearCanvas.drawRect(cardLeft, cardTop, cardLeft + cardWidth, cardTop + cardHeight, clearPaint)
+          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.11",
+  "version": "0.1.13",
   "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",