react-native-morph-card 0.1.7 → 0.1.9

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

@@ -7,6 +7,10 @@ import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Outline
 import android.graphics.RectF
+import android.graphics.Paint
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
+import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.ColorDrawable
 import android.os.Handler
 import android.os.Looper
@@ -497,6 +501,23 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // Stop intercepting new screens — animation is taking over
     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.
+    val blockerImg = wrapper.findViewWithTag<FrameLayout>("morphCardWrapper")?.let { cardW ->
+      (0 until wrapper.childCount).map { wrapper.getChildAt(it) }.firstOrNull { it !== cardW }
+    } as? ImageView
+    if (blockerImg != null) {
+      val bmp = (blockerImg.drawable as? BitmapDrawable)?.bitmap
+      if (bmp != null) {
+        val clearCanvas = Canvas(bmp)
+        val clearPaint = Paint()
+        clearPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
+        clearCanvas.drawRect(cardLeft, cardTop, cardLeft + cardWidth, cardTop + cardHeight, clearPaint)
+        blockerImg.invalidate()
+      }
+    }
+
     // Read target position (now settled after delay)
     val d = density
     val targetLoc = if (targetView != null) getLocationInWindow(targetView) else intArrayOf(cardLeft.toInt(), cardTop.toInt())
@@ -565,16 +586,17 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     }
 
     // Crossfade: at 15% of animation, make target screen VISIBLE with alpha=0
-    // then fade alpha to 1 over 50% of duration. Also remove the blocker image.
+    // then fade alpha to 1 over 50% of duration.
     val targetScreen = targetScreenContainerRef?.get()
     val sourceScreen2 = sourceScreenContainerRef?.get()
-    // Find the blocker image (first child of the full-screen overlay, before the card wrapper)
-    val blockerView = if (wrapper.childCount > 1) wrapper.getChildAt(0) else null
     if (targetScreen != null && targetScreen !== sourceScreen2) {
       mainHandler.postDelayed({
-        // Remove blocker — source screen is visible underneath
-        if (blockerView != null && blockerView.tag != "morphCardWrapper") {
-          (blockerView.parent as? ViewGroup)?.removeView(blockerView)
+        // Remove the blocker so the target screen can fade in underneath the card wrapper
+        val blocker = wrapper.findViewWithTag<FrameLayout>("morphCardWrapper")?.let { cardW ->
+          (0 until wrapper.childCount).map { wrapper.getChildAt(it) }.firstOrNull { it !== cardW }
+        }
+        if (blocker != null) {
+          (blocker.parent as? ViewGroup)?.removeView(blocker)
         }
         // Switch from INVISIBLE to VISIBLE but with alpha=0
         targetScreen.alpha = 0f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-morph-card",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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",