react-native-morph-card 0.2.7 → 0.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 Native card-to-modal morph transition for React Native. Smoothly animates a card from a list into a fullscreen detail view, morphing size, position, and corner radius — then collapses back.
 
-https://github.com/user-attachments/assets/93f0c1f6-e203-496e-bb56-c994e1500e32
+<video src="assets/demo.mov">
 
 - Native animations on both platforms (UIKit `UIViewPropertyAnimator` / Android `ValueAnimator`)
 - No JS-driven animation, no webview, no experimental flags
@@ -46,12 +46,16 @@ No additional steps required.
 
 Wrap your card content in `MorphCardSource`. On the detail screen, use `MorphCardTarget` where the card should land. Use `useMorphTarget` for easy collapse handling.
 
-> **Important:** `MorphCardSource` can wrap any React Native component (images, views, text, etc.), but during the animation the content is captured as a **bitmap snapshot**. This means dynamic or observable values (timers, animated values, live data) will freeze at the moment of capture. Design your card content with this in mind.
+> **Important:** `MorphCardSource` can wrap any React Native component (images, views, text, etc.). During the animation, the content is captured as a **bitmap snapshot** — but once the animation completes, the snapshot fades out and the source's children are automatically cloned into `MorphCardTarget` as live React components. The cloned children are rendered at the source card's original layout dimensions, so your component layout stays consistent. This means observable values (timers, animated values, live data) will update in real time after the transition finishes. If you use `resizeMode`, the bitmap is kept instead (native image scaling doesn't apply to React components).
 
 ```tsx
 import React from 'react';
 import { View, Image, Text, Pressable } from 'react-native';
-import { MorphCardSource, MorphCardTarget, useMorphTarget } from 'react-native-morph-card';
+import {
+  MorphCardSource,
+  MorphCardTarget,
+  useMorphTarget,
+} from 'react-native-morph-card';
 
 // ── List screen ──
 const ListScreen = ({ navigation }) => {
@@ -98,30 +102,30 @@ const DetailScreen = ({ route, navigation }) => {
 
 Wraps the card content on the list/grid screen. Captures a snapshot and drives the expand animation.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `width` | `DimensionValue` | — | Card width |
-| `height` | `DimensionValue` | — | Card height |
-| `borderRadius` | `number` | `0` | Corner radius of the card |
-| `backgroundColor` | `string` | — | Background color (enables "wrapper mode" where the background expands separately from the content) |
-| `duration` | `number` | `300` | Default animation duration in ms (used for both expand and collapse if specific durations are not set) |
-| `expandDuration` | `number` | — | Duration of the expand animation in ms. Overrides `duration` for expand. |
-| `scaleMode` | `'aspectFill' \| 'aspectFit' \| 'stretch'` | `'aspectFill'` | How the snapshot scales during no-wrapper mode animation |
-| `onPress` | `(sourceTag: number) => void` | — | Called on tap with the native view tag. Use this to navigate to the detail screen. |
+| Prop              | Type                                       | Default        | Description                                                                                            |
+| ----------------- | ------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------ |
+| `width`           | `DimensionValue`                           | —              | Card width                                                                                             |
+| `height`          | `DimensionValue`                           | —              | Card height                                                                                            |
+| `borderRadius`    | `number`                                   | `0`            | Corner radius of the card                                                                              |
+| `backgroundColor` | `string`                                   | —              | Background color (enables "wrapper mode" where the background expands separately from the content)     |
+| `duration`        | `number`                                   | `300`          | Default animation duration in ms (used for both expand and collapse if specific durations are not set) |
+| `expandDuration`  | `number`                                   | —              | Duration of the expand animation in ms. Overrides `duration` for expand.                               |
+| `resizeMode`      | `'cover' \| 'contain' \| 'stretch'`        | `'cover'`      | How the snapshot scales during animation. When set, the bitmap is kept after expand (no live children). **Recommended when wrapping an `<Image>` — without it, the image may not scale properly during the animation.** |
+| `onPress`         | `(sourceTag: number) => void`              | —              | Called on tap with the native view tag. Use this to navigate to the detail screen.                     |
 
 ### `<MorphCardTarget>`
 
-Placed on the detail screen where the card should land. Triggers the expand animation on mount.
+Placed on the detail screen where the card should land. Triggers the expand animation on mount. After the animation, the source's children are automatically cloned here as live React components.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `sourceTag` | `number` | **required** | The source view tag from navigation params |
-| `width` | `DimensionValue` | source width | Target width after expand |
-| `height` | `DimensionValue` | source height | Target height after expand |
-| `borderRadius` | `number` | source radius | Target corner radius. Set to `0` for no rounding. |
-| `collapseDuration` | `number` | — | Duration of the collapse animation in ms. Falls back to the source's `duration`. |
-| `contentOffsetY` | `number` | `0` | Vertical offset for content snapshot in wrapper mode |
-| `contentCentered` | `boolean` | `false` | Center content snapshot horizontally in wrapper mode |
+| Prop               | Type             | Default       | Description                                                                      |
+| ------------------ | ---------------- | ------------- | -------------------------------------------------------------------------------- |
+| `sourceTag`        | `number`         | **required**  | The source view tag from navigation params                                       |
+| `width`            | `DimensionValue` | source width  | Target width after expand                                                        |
+| `height`           | `DimensionValue` | source height | Target height after expand                                                       |
+| `borderRadius`     | `number`         | source radius | Target corner radius. Set to `0` for no rounding.                                |
+| `collapseDuration` | `number`         | —             | Duration of the collapse animation in ms. Falls back to the source's `duration`. |
+| `contentOffsetY`   | `number`         | `0`           | Vertical offset for content snapshot in wrapper mode                             |
+| `contentCentered`  | `boolean`        | `false`       | Center content snapshot horizontally in wrapper mode                             |
 
 ### `useMorphTarget(options)`
 
@@ -141,7 +145,11 @@ const { dismiss } = useMorphTarget({
 For more control, use the imperative functions:
 
 ```tsx
-import { morphExpand, morphCollapse, getViewTag } from 'react-native-morph-card';
+import {
+  morphExpand,
+  morphCollapse,
+  getViewTag,
+} from 'react-native-morph-card';
 
 // Expand from source to target
 await morphExpand(sourceRef, targetRef);
@@ -152,6 +160,7 @@ await morphCollapse(sourceTag);
 // Get the native view tag from a ref
 const tag = getViewTag(viewRef);
 ```
+
 ```
 
 ## Running the example app
@@ -183,7 +192,7 @@ yarn install
 # Install example app dependencies
 cd example
 yarn install
-```
+````
 
 ### 2. Run on iOS
 
@@ -235,12 +244,12 @@ yarn build:android
 
 ### Troubleshooting
 
-| Problem | Fix |
-|---------|-----|
-| `pod install` fails | Run `bundle install` first, then `bundle exec pod install` |
-| Android build fails on first run | Make sure `ANDROID_HOME` is set and an emulator/device is available |
-| Metro can't find `react-native-morph-card` | Run `yarn install` at the repo root first |
-| Duplicate module errors | Delete `node_modules` in both root and `example/`, then reinstall |
+| Problem                                    | Fix                                                                 |
+| ------------------------------------------ | ------------------------------------------------------------------- |
+| `pod install` fails                        | Run `bundle install` first, then `bundle exec pod install`          |
+| Android build fails on first run           | Make sure `ANDROID_HOME` is set and an emulator/device is available |
+| Metro can't find `react-native-morph-card` | Run `yarn install` at the repo root first                           |
+| Duplicate module errors                    | Delete `node_modules` in both root and `example/`, then reinstall   |
 
 ## Contributing
 

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

@@ -5,7 +5,6 @@ import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Color
-import android.graphics.Outline
 import android.graphics.RectF
 import android.graphics.Paint
 import android.graphics.PorterDuff
@@ -17,7 +16,6 @@ import android.os.Looper
 import android.util.Log
 import android.view.View
 import android.view.ViewGroup
-import android.view.ViewOutlineProvider
 import android.view.ViewTreeObserver
 import android.view.animation.PathInterpolator
 import android.widget.FrameLayout
@@ -87,16 +85,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
 
   private fun applyBorderRadiusClipping() {
     val radiusPx = if (borderRadiusDp > 0f) borderRadiusDp * density else 0f
-    if (radiusPx > 0f) {
-      clipToOutline = true
-      outlineProvider = object : ViewOutlineProvider() {
-        override fun getOutline(v: View, outline: Outline) {
-          outline.setRoundRect(0, 0, v.width, v.height, radiusPx)
-        }
-      }
-    } else {
-      clipToOutline = false
-    }
+    setRoundedCorners(this, radiusPx)
   }
 
   // ── Snapshot ──
@@ -125,27 +114,6 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     return loc
   }
 
-  /**
-   * Find the screen container for a view (ScreensCoordinatorLayout).
-   * Walks up until parent is ScreenStack/ScreenContainer.
-   */
-  private fun findScreenContainer(view: View?): View? {
-    if (view == null) return null
-    var current: View? = view
-    while (current != null) {
-      val parent = current.parent
-      if (parent is ViewGroup) {
-        val parentName = parent.javaClass.name
-        if (parentName.contains("ScreenStack") || parentName.contains("ScreenContainer")) {
-          return current
-        }
-      }
-      current = if (current.parent is View) current.parent as View else null
-    }
-    return null
-  }
-
-
   private fun extractBackgroundColor(): Int? {
     val bg = background ?: return null
     if (bg is ColorDrawable) return bg.color
@@ -216,19 +184,6 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     }
   }
 
-  private fun setRoundedCorners(view: View, radiusPx: Float) {
-    if (radiusPx <= 0f) {
-      view.clipToOutline = false
-      return
-    }
-    view.clipToOutline = true
-    view.outlineProvider = object : ViewOutlineProvider() {
-      override fun getOutline(v: View, outline: Outline) {
-        outline.setRoundRect(0, 0, v.width, v.height, radiusPx)
-      }
-    }
-  }
-
   /**
    * 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).
@@ -387,8 +342,9 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     // 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.
+    // PixelCopy captures the current screen with hardware rendering preserved
+    // (clipToOutline, borderRadius, etc.). The result is delivered on a background
+    // HandlerThread, then posted to main to add the blocker image.
     // Note: context may be ThemedReactContext, not Activity directly.
     val activity = (context as? android.app.Activity)
       ?: (context as? com.facebook.react.bridge.ReactContext)?.currentActivity
@@ -398,23 +354,25 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       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()
+        copyThread.quitSafely()
+        if (result == android.view.PixelCopy.SUCCESS) {
+          mainHandler.post {
+            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
+            )
+            // Insert behind the card wrapper (index 0)
+            fullScreenOverlay.addView(blockerImg, 0)
+          }
+        } else {
+          Log.w(TAG, "prepareExpand: PixelCopy failed with result=$result")
+          blockerBitmap.recycle()
+        }
       }, 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)
@@ -695,8 +653,10 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
           target.width.toFloat(), target.height.toFloat())
       }
 
-      target.showSnapshot(bitmap, ImageView.ScaleType.FIT_XY, frame, cornerRadius, null)
+      target.showSnapshot(bitmap, frame, cornerRadius, null)
       Log.d(TAG, "transferSnapshot: handed snapshot to MorphCardTargetView")
+      // Crossfade snapshot out to reveal live React children underneath
+      mainHandler.postDelayed({ target.fadeOutSnapshot() }, 50)
     }
 
     val fadeOut = ValueAnimator.ofFloat(1f, 0f)
@@ -768,8 +728,10 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       val cardImage = captureSnapshot()
       alpha = 0f
 
-      // Clear the snapshot from the target view
+      // Clear the snapshot and hide the target view so live children
+      // don't show behind the animating collapse overlay
       target?.clearSnapshot()
+      targetView?.visibility = View.INVISIBLE
 
       wrapper = FrameLayout(context)
       wrapper.layoutParams = FrameLayout.LayoutParams(twPx.toInt(), thPx.toInt())
@@ -806,13 +768,6 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       overlayContainer = wrapper
     }
 
-    // Ensure wrapper is valid
-    if (wrapper == null) {
-      isExpanded = false
-      promise.resolve(false)
-      return
-    }
-
     // Show source screen underneath
     val sourceScreen = sourceScreenContainerRef?.get()
     val targetScreen = targetScreenContainerRef?.get()

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

@@ -35,11 +35,11 @@ class MorphCardTargetManager :
   }
 
   override fun setTargetWidth(view: MorphCardTargetView, value: Double) {
-    view.targetWidth = value.toFloat()
+    // Managed by the source view; required by codegen interface
   }
 
   override fun setTargetHeight(view: MorphCardTargetView, value: Double) {
-    view.targetHeight = value.toFloat()
+    // Managed by the source view; required by codegen interface
   }
 
   override fun setTargetBorderRadius(view: MorphCardTargetView, value: Double) {

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

@@ -1,24 +1,18 @@
 package com.melivalesca.morphcard
 
+import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.Canvas
-import android.graphics.Matrix
-import android.graphics.Outline
 import android.graphics.Paint
 import android.graphics.Path
 import android.graphics.RectF
 import android.util.Log
 import android.view.View
-import android.view.ViewGroup
-import android.view.ViewOutlineProvider
-import android.widget.ImageView
 import com.facebook.react.views.view.ReactViewGroup
 
 class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
 
-  var targetWidth: Float = 0f
-  var targetHeight: Float = 0f
   var targetBorderRadius: Float = -1f
   var collapseDuration: Double = 0.0
   var sourceTag: Int = 0
@@ -28,6 +22,7 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
   private var snapshotFrame: RectF? = null
   private var snapshotCornerRadius: Float = 0f
   private var snapshotBgColor: Int? = null
+  private var snapshotAlpha: Float = 1f
   private val snapshotPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.FILTER_BITMAP_FLAG)
   private val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG)
 
@@ -37,13 +32,13 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
     MorphCardViewRegistry.register(this, id)
-    Log.d("MorphCard", "TargetView attached: id=$id sourceTag=$sourceTag")
+    Log.d(TAG, "TargetView attached: id=$id sourceTag=$sourceTag")
 
     if (sourceTag > 0) {
       val screenContainer = findScreenContainer(this)
       if (screenContainer != null) {
         screenContainer.visibility = View.INVISIBLE
-        Log.d("MorphCard", "TargetView: set screen INVISIBLE")
+        Log.d(TAG, "TargetView: set screen INVISIBLE")
       }
     }
   }
@@ -65,7 +60,9 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
   override fun dispatchDraw(canvas: Canvas) {
     val bmp = snapshotBitmap
     val frame = snapshotFrame
-    if (bmp != null && frame != null) {
+    if (bmp != null && frame != null && snapshotAlpha > 0f) {
+      snapshotPaint.alpha = (snapshotAlpha * 255).toInt()
+      bgPaint.alpha = (snapshotAlpha * 255).toInt()
       val radiusPx = snapshotCornerRadius
 
       // Clip to rounded rect if needed
@@ -104,42 +101,16 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
 
   private fun applyBorderRadiusClipping() {
     val radiusPx = if (targetBorderRadius > 0f) targetBorderRadius * density else 0f
-    if (radiusPx > 0f) {
-      clipToOutline = true
-      outlineProvider = object : ViewOutlineProvider() {
-        override fun getOutline(v: View, outline: Outline) {
-          outline.setRoundRect(0, 0, v.width, v.height, radiusPx)
-        }
-      }
-    } else {
-      clipToOutline = false
-    }
-  }
-
-  private fun findScreenContainer(view: View?): View? {
-    if (view == null) return null
-    var current: View? = view
-    while (current != null) {
-      val parent = current.parent
-      if (parent is ViewGroup) {
-        val parentName = parent.javaClass.name
-        if (parentName.contains("ScreenStack") || parentName.contains("ScreenContainer")) {
-          return current
-        }
-      }
-      current = if (current.parent is View) current.parent as View else null
-    }
-    return null
+    setRoundedCorners(this, radiusPx)
   }
 
   fun showSnapshot(
     image: Bitmap,
-    scaleType: ImageView.ScaleType,
     frame: RectF,
     cornerRadius: Float,
     backgroundColor: Int?
   ) {
-    Log.d("MorphCard", "showSnapshot: viewSize=${width}x${height} frame=$frame cornerR=$cornerRadius bg=$backgroundColor")
+    Log.d(TAG, "showSnapshot: viewSize=${width}x${height} frame=$frame cornerR=$cornerRadius bg=$backgroundColor")
     snapshotBitmap = image
     snapshotFrame = frame
     snapshotCornerRadius = cornerRadius
@@ -147,9 +118,29 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
     invalidate()
   }
 
+  fun fadeOutSnapshot() {
+    if (snapshotBitmap == null) return
+    // Only fade out if there are React children underneath to reveal.
+    // If no children (scaleMode bitmap-only), keep the snapshot.
+    if (childCount == 0) return
+    val anim = ValueAnimator.ofFloat(1f, 0f)
+    anim.duration = 150
+    anim.addUpdateListener {
+      snapshotAlpha = it.animatedValue as Float
+      invalidate()
+    }
+    anim.addListener(object : android.animation.AnimatorListenerAdapter() {
+      override fun onAnimationEnd(animation: android.animation.Animator) {
+        clearSnapshot()
+        snapshotAlpha = 1f
+      }
+    })
+    anim.start()
+  }
+
   fun clearSnapshot() {
     if (snapshotBitmap != null) {
-      Log.d("MorphCard", "clearSnapshot: clearing bitmap")
+      Log.d(TAG, "clearSnapshot: clearing bitmap")
       snapshotBitmap = null
       snapshotFrame = null
       snapshotCornerRadius = 0f
@@ -157,4 +148,8 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
       invalidate()
     }
   }
+
+  companion object {
+    private const val TAG = "MorphCard"
+  }
 }

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

@@ -0,0 +1,43 @@
+package com.melivalesca.morphcard
+
+import android.graphics.Outline
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+
+/**
+ * Walk up the view hierarchy until the parent is a ScreenStack or ScreenContainer,
+ * returning the immediate child (the "screen container" for that view).
+ */
+internal fun findScreenContainer(view: View?): View? {
+  if (view == null) return null
+  var current: View? = view
+  while (current != null) {
+    val parent = current.parent
+    if (parent is ViewGroup) {
+      val parentName = parent.javaClass.name
+      if (parentName.contains("ScreenStack") || parentName.contains("ScreenContainer")) {
+        return current
+      }
+    }
+    current = if (current.parent is View) current.parent as View else null
+  }
+  return null
+}
+
+/**
+ * Apply rounded-corner clipping to a view via its outline provider.
+ * If [radiusPx] is <= 0, clipping is disabled.
+ */
+internal fun setRoundedCorners(view: View, radiusPx: Float) {
+  if (radiusPx <= 0f) {
+    view.clipToOutline = false
+    return
+  }
+  view.clipToOutline = true
+  view.outlineProvider = object : ViewOutlineProvider() {
+    override fun getOutline(v: View, outline: Outline) {
+      outline.setRoundRect(0, 0, v.width, v.height, radiusPx)
+    }
+  }
+}

package/ios/Fabric/RNCMorphCardSourceComponentView.h

@@ -14,9 +14,6 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)expandToTarget:(nullable UIView *)targetView
                resolve:(RCTPromiseResolveBlock)resolve;
 
-- (void)collapseFromTarget:(nullable UIView *)targetView
-                   resolve:(RCTPromiseResolveBlock)resolve;
-
 /// Collapse using the stored target from the last expand call.
 - (void)collapseWithResolve:(RCTPromiseResolveBlock)resolve;