react-native-morph-card 0.1.8 → 0.1.10

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,16 +501,21 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // Stop intercepting new screens — animation is taking over
     removeHierarchyListener()
 
-    // Remove the PixelCopy blocker bitmap — it was only needed to prevent the
-    // modal screen from flashing before it was hidden. Now that the target screen
-    // is INVISIBLE, the blocker would show a stale copy of the source card
-    // at the original position while the card wrapper animates away.
-    val blockerView = wrapper.findViewWithTag<FrameLayout>("morphCardWrapper")?.let { cardW ->
-      // The blocker is any child of the overlay that isn't the card wrapper
+    // 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 }
-    }
-    if (blockerView != null) {
-      wrapper.removeView(blockerView)
+    } 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)
@@ -582,6 +591,13 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     val sourceScreen2 = sourceScreenContainerRef?.get()
     if (targetScreen != null && targetScreen !== sourceScreen2) {
       mainHandler.postDelayed({
+        // 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
         targetScreen.visibility = View.VISIBLE
@@ -665,7 +681,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
           target.width.toFloat(), target.height.toFloat())
       }
 
-      target.showSnapshot(bitmap, ImageView.ScaleType.FIT_XY, frame, cornerRadius, cardBgColor)
+      target.showSnapshot(bitmap, ImageView.ScaleType.FIT_XY, frame, cornerRadius, null)
       Log.d(TAG, "transferSnapshot: handed snapshot to MorphCardTargetView")
     }
 

package/package.json

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