react-native-morph-card 0.1.2 → 0.1.4

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

@@ -362,7 +362,46 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // Capture snapshot
     val cardImage = captureSnapshot()
 
-    // Create overlay at source position
+    // 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
+    )
+    fullScreenOverlay.isClickable = true
+
+    // 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 ->
+        if (result != android.view.PixelCopy.SUCCESS) {
+          Log.d(TAG, "prepareExpand: PixelCopy failed with result=$result")
+        }
+        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
     val wrapper = FrameLayout(context)
     wrapper.layoutParams = FrameLayout.LayoutParams(cardWidth.toInt(), cardHeight.toInt())
@@ -380,9 +419,11 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     content.scaleType = ImageView.ScaleType.FIT_XY
     content.layoutParams = FrameLayout.LayoutParams(cardWidth.toInt(), cardHeight.toInt())
     wrapper.addView(content)
+    wrapper.tag = "morphCardWrapper"
+    fullScreenOverlay.addView(wrapper)
 
-    decorView.addView(wrapper)
-    overlayContainer = wrapper
+    decorView.addView(fullScreenOverlay)
+    overlayContainer = fullScreenOverlay
 
     // Hide source card — overlay covers it
     alpha = 0f
@@ -468,7 +509,9 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     Log.d(TAG, "animateExpand: pendingTarget w=${pendingTargetWidth} h=${pendingTargetHeight} br=${pendingTargetBorderRadius}")
 
     val dur = duration.toLong()
-    val content = if (wrapper.childCount > 0) wrapper.getChildAt(0) else null
+    // Find the card wrapper inside the full-screen overlay
+    val cardWrapper = wrapper.findViewWithTag<FrameLayout>("morphCardWrapper") ?: wrapper
+    val content = if (cardWrapper.childCount > 0) cardWrapper.getChildAt(0) else null
 
     // Compute content offset for wrapper mode
     val contentCx = if (hasWrapper && pendingContentCentered) (targetWidthPx - cardWidth) / 2f else 0f
@@ -486,13 +529,14 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
 
     animator.addUpdateListener { anim ->
       val t = anim.animatedValue as Float
-      wrapper.x = lerp(cardLeft, targetLeft, t)
-      wrapper.y = lerp(cardTop, targetTop, t)
-      val lp = wrapper.layoutParams
+
+      cardWrapper.x = lerp(cardLeft, targetLeft, t)
+      cardWrapper.y = lerp(cardTop, targetTop, t)
+      val lp = cardWrapper.layoutParams
       lp.width = lerp(cardWidth, targetWidthPx, t).toInt()
       lp.height = lerp(cardHeight, targetHeightPx, t).toInt()
-      wrapper.layoutParams = lp
-      setRoundedCorners(wrapper, lerp(cardCornerRadiusPx, targetCornerRadiusPx, t))
+      cardWrapper.layoutParams = lp
+      setRoundedCorners(cardWrapper, lerp(cardCornerRadiusPx, targetCornerRadiusPx, t))
 
       if (content != null) {
         if (hasWrapper) {
@@ -510,11 +554,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
@@ -569,8 +619,9 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       return
     }
 
-    // Get the bitmap from the overlay
-    val origImg = if (overlay.childCount > 0) overlay.getChildAt(0) as? ImageView else null
+    // Get the bitmap from the card wrapper inside the overlay
+    val cardWrap = overlay.findViewWithTag<FrameLayout>("morphCardWrapper") ?: overlay
+    val origImg = if (cardWrap.childCount > 0) cardWrap.getChildAt(0) as? ImageView else null
     val bitmap = if (origImg != null) {
       // Extract the bitmap from the drawable
       val drawable = origImg.drawable

package/package.json

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