react-native-morph-card 0.1.3 → 0.1.5

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

@@ -228,7 +228,8 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
    * Walk the view tree and hide any screen container that isn't already known.
    * This catches modal screens added to separate ScreenStacks (e.g. transparentModal).
    */
-  private fun hideNewScreenContainers(root: ViewGroup, knownScreens: Set<View>) {
+  private fun hideNewScreenContainers(root: ViewGroup, knownScreens: Set<View>): Int {
+    var count = 0
     fun walk(group: ViewGroup) {
       val name = group.javaClass.name
       if (name.contains("ScreenStack") || name.contains("ScreenContainer")) {
@@ -236,6 +237,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
           val child = group.getChildAt(i)
           if (!knownScreens.contains(child) && child.visibility == View.VISIBLE) {
             child.visibility = View.INVISIBLE
+            count++
             Log.d(TAG, "preDraw: hid new screen ${child.javaClass.simpleName} in ${group.javaClass.simpleName}")
           }
         }
@@ -246,6 +248,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       }
     }
     walk(root)
+    return count
   }
 
   /**
@@ -353,8 +356,16 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     val knownScreens = collectExistingScreens(decorView)
     Log.d(TAG, "prepareExpand: tracking ${knownScreens.size} existing screens")
     val pdListener = ViewTreeObserver.OnPreDrawListener {
-      hideNewScreenContainers(decorView, knownScreens)
-      true
+      val hidCount = hideNewScreenContainers(decorView, knownScreens)
+      if (hidCount > 0) {
+        // Cancel this draw frame — the new screen was visible and we just hid it.
+        // Returning false prevents this frame from rendering, so the screen
+        // is never shown. The next frame will re-check and proceed.
+        Log.d(TAG, "preDraw: cancelled draw frame (hid $hidCount screens)")
+        false
+      } else {
+        true
+      }
     }
     decorView.viewTreeObserver.addOnPreDrawListener(pdListener)
     preDrawListener = pdListener
@@ -362,16 +373,41 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // Capture snapshot
     val cardImage = captureSnapshot()
 
-    // Create a full-screen overlay container that blocks the modal target screen
-    // from being visible. We use a transparent overlay — the source screen remains
-    // visible underneath. The overlay just ensures our card wrapper is above everything.
+    // Create a full-screen overlay that blocks the modal target screen from
+    // being visible. We use PixelCopy to capture the current screen with
+    // hardware rendering preserved (clipToOutline, borderRadius, etc.).
     val fullScreenOverlay = FrameLayout(context)
-    fullScreenOverlay.layoutParams = FrameLayout.LayoutParams(
-      FrameLayout.LayoutParams.MATCH_PARENT,
-      FrameLayout.LayoutParams.MATCH_PARENT
-    )
-    // Intercept all touches while overlay is up
+    fullScreenOverlay.layoutParams = FrameLayout.LayoutParams(decorView.width, decorView.height)
     fullScreenOverlay.isClickable = true
+    // Ensure the overlay renders above any views with elevation (e.g. ScreenStack children)
+    fullScreenOverlay.translationZ = 1000f
+
+    // PixelCopy captures from the surface (hardware-rendered, preserves outlines).
+    // We use a background HandlerThread for the callback to avoid deadlocking main.
+    val window = (context as? android.app.Activity)?.window
+    if (window != null) {
+      val blockerBitmap = Bitmap.createBitmap(decorView.width, decorView.height, Bitmap.Config.ARGB_8888)
+      val copyThread = android.os.HandlerThread("PixelCopyThread")
+      copyThread.start()
+      val copyHandler = Handler(copyThread.looper)
+      val latch = java.util.concurrent.CountDownLatch(1)
+      android.view.PixelCopy.request(window, blockerBitmap, { result ->
+        Log.d(TAG, "prepareExpand: PixelCopy result=$result (0=SUCCESS)")
+        latch.countDown()
+      }, copyHandler)
+      // Wait for the copy (typically <5ms)
+      try { latch.await(100, java.util.concurrent.TimeUnit.MILLISECONDS) } catch (_: Exception) {}
+      copyThread.quitSafely()
+
+      val blockerImg = ImageView(context)
+      blockerImg.setImageBitmap(blockerBitmap)
+      blockerImg.scaleType = ImageView.ScaleType.FIT_XY
+      blockerImg.layoutParams = FrameLayout.LayoutParams(
+        FrameLayout.LayoutParams.MATCH_PARENT,
+        FrameLayout.LayoutParams.MATCH_PARENT
+      )
+      fullScreenOverlay.addView(blockerImg)
+    }
 
     // Create card overlay at source position (on top of screen capture)
     val bgColor = cardBgColor
@@ -526,11 +562,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
+    // then fade alpha to 1 over 50% of duration. Also remove the blocker image.
     val targetScreen = targetScreenContainerRef?.get()
-    val sourceScreen = sourceScreenContainerRef?.get()
-    if (targetScreen != null && targetScreen !== sourceScreen) {
+    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)
+        }
         // Switch from INVISIBLE to VISIBLE but with alpha=0
         targetScreen.alpha = 0f
         targetScreen.visibility = View.VISIBLE

package/package.json

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