react-native-morph-card 0.1.1 → 0.1.3

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

@@ -225,23 +225,18 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
   }
 
   /**
-   * Walk the view tree and hide any screen container that isn't the source screen.
-   * This catches modal screens added to separate ScreenStacks.
+   * 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, sourceScreen: View?) {
+  private fun hideNewScreenContainers(root: ViewGroup, knownScreens: Set<View>) {
     fun walk(group: ViewGroup) {
       val name = group.javaClass.name
       if (name.contains("ScreenStack") || name.contains("ScreenContainer")) {
         for (i in 0 until group.childCount) {
           val child = group.getChildAt(i)
-          if (child !== sourceScreen && child.visibility == View.VISIBLE) {
-            // Check if this is a screen container we haven't seen before
-            val childScreen = child
-            val isSourceAncestor = isAncestorOf(childScreen, sourceScreen)
-            if (!isSourceAncestor) {
-              childScreen.visibility = View.INVISIBLE
-              Log.d(TAG, "preDraw: hid screen container ${childScreen.javaClass.simpleName}")
-            }
+          if (!knownScreens.contains(child) && child.visibility == View.VISIBLE) {
+            child.visibility = View.INVISIBLE
+            Log.d(TAG, "preDraw: hid new screen ${child.javaClass.simpleName} in ${group.javaClass.simpleName}")
           }
         }
       }
@@ -253,14 +248,25 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     walk(root)
   }
 
-  private fun isAncestorOf(potentialAncestor: View, target: View?): Boolean {
-    if (target == null) return false
-    var current: View? = target
-    while (current != null) {
-      if (current === potentialAncestor) return true
-      current = if (current.parent is View) current.parent as View else null
+  /**
+   * Collect all current children of ScreenStack/ScreenContainer views.
+   */
+  private fun collectExistingScreens(root: ViewGroup): Set<View> {
+    val screens = mutableSetOf<View>()
+    fun walk(group: ViewGroup) {
+      val name = group.javaClass.name
+      if (name.contains("ScreenStack") || name.contains("ScreenContainer")) {
+        for (i in 0 until group.childCount) {
+          screens.add(group.getChildAt(i))
+        }
+      }
+      for (i in 0 until group.childCount) {
+        val child = group.getChildAt(i)
+        if (child is ViewGroup) walk(child)
+      }
     }
-    return false
+    walk(root)
+    return screens
   }
 
   private fun removeHierarchyListener() {
@@ -344,9 +350,10 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // Also install a pre-draw listener on the DecorView to catch modal screens
     // that are added to a different ScreenStack (e.g. transparentModal).
     // This fires before every frame draw, so we can hide screens before they render.
-    val savedSourceScreen = sourceScreen
+    val knownScreens = collectExistingScreens(decorView)
+    Log.d(TAG, "prepareExpand: tracking ${knownScreens.size} existing screens")
     val pdListener = ViewTreeObserver.OnPreDrawListener {
-      hideNewScreenContainers(decorView, savedSourceScreen)
+      hideNewScreenContainers(decorView, knownScreens)
       true
     }
     decorView.viewTreeObserver.addOnPreDrawListener(pdListener)
@@ -355,7 +362,18 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // Capture snapshot
     val cardImage = captureSnapshot()
 
-    // Create overlay at source position
+    // 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.
+    val fullScreenOverlay = FrameLayout(context)
+    fullScreenOverlay.layoutParams = FrameLayout.LayoutParams(
+      FrameLayout.LayoutParams.MATCH_PARENT,
+      FrameLayout.LayoutParams.MATCH_PARENT
+    )
+    // Intercept all touches while overlay is up
+    fullScreenOverlay.isClickable = true
+
+    // 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())
@@ -373,9 +391,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
@@ -461,7 +481,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
@@ -479,13 +501,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) {
@@ -562,8 +585,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.1",
+  "version": "0.1.3",
   "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",