react-native-morph-card 0.2.8 → 0.4.0

package/README.md

@@ -46,7 +46,7 @@ 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';
@@ -110,12 +110,14 @@ Wraps the card content on the list/grid screen. Captures a snapshot and drives t
 | `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                                               |
+| `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.** |
+| `rotations`       | `number`                                   | `0`            | Number of full 360° rotations during the expand animation                                              |
+| `rotationEndAngle`| `number`                                   | `0`            | Final rotation angle in degrees after expand (e.g. `45` to end tilted). Collapse reverses it back to 0 |
 | `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                                                                      |
 | ------------------ | ---------------- | ------------- | -------------------------------------------------------------------------------- |
@@ -161,7 +163,7 @@ await morphCollapse(sourceTag);
 const tag = getViewTag(viewRef);
 ```
 
-````
+```
 
 ## Running the example app
 

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

@@ -38,6 +38,14 @@ class MorphCardSourceManager :
     view.borderRadiusDp = value.toFloat()
   }
 
+  override fun setRotations(view: MorphCardSourceView, value: Double) {
+    view.rotations = value
+  }
+
+  override fun setRotationEndAngle(view: MorphCardSourceView, value: Double) {
+    view.rotationEndAngle = value
+  }
+
   companion object {
     const val REACT_CLASS = "RNCMorphCardSource"
   }

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

@@ -33,6 +33,8 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
   var expandDuration: Double = 0.0
   var scaleMode: String = "aspectFill"
   var borderRadiusDp: Float = 0f
+  var rotations: Double = 0.0
+  var rotationEndAngle: Double = 0.0
 
   // ── Target config (set by module, in dp from JS) ──
   var pendingTargetWidth: Float = 0f
@@ -527,6 +529,8 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       imageFrameForScaleMode(scaleMode, cardWidth, cardHeight, targetWidthPx, targetHeightPx)
     } else null
 
+    val totalAngle = (rotations * 360.0 + rotationEndAngle).toFloat()
+
     val animator = ValueAnimator.ofFloat(0f, 1f)
     animator.duration = dur
     animator.interpolator = springInterpolator
@@ -541,6 +545,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       lp.height = lerp(cardHeight, targetHeightPx, t).toInt()
       cardWrapper.layoutParams = lp
       setRoundedCorners(cardWrapper, lerp(cardCornerRadiusPx, targetCornerRadiusPx, t))
+      cardWrapper.rotation = lerp(0f, totalAngle, t)
 
       if (content != null) {
         if (hasWrapper) {
@@ -591,6 +596,11 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
         }
         this@MorphCardSourceView.alpha = 1f
 
+        // Apply end rotation to target view
+        if (rotationEndAngle != 0.0) {
+          targetView?.rotation = rotationEndAngle.toFloat()
+        }
+
         transferSnapshotToTarget(decorView, wrapper, targetView,
           targetWidthPx, targetHeightPx, targetCornerRadiusPx, 200L)
 
@@ -655,6 +665,8 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
 
       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)
@@ -716,6 +728,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     var wrapper = overlayContainer
     if (wrapper == null) {
       val target = targetView as? MorphCardTargetView
+      // Read position BEFORE clearing rotation — visual position depends on rotation
       val targetLoc = if (targetView != null) getLocationInWindow(targetView) else intArrayOf(cardLeft.toInt(), cardTop.toInt())
       val twPx = if (pendingTargetWidth > 0) pendingTargetWidth * d else cardWidth
       val thPx = if (pendingTargetHeight > 0) pendingTargetHeight * d else cardHeight
@@ -726,11 +739,15 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       val cardImage = captureSnapshot()
       alpha = 0f
 
-      // Clear the snapshot from the target view
+      // Clear the snapshot from the target
       target?.clearSnapshot()
 
+      // Use target view's actual size if available for exact match
+      val wrapW = if (targetView != null && targetView.width > 0) targetView.width.toFloat() else twPx
+      val wrapH = if (targetView != null && targetView.height > 0) targetView.height.toFloat() else thPx
+
       wrapper = FrameLayout(context)
-      wrapper.layoutParams = FrameLayout.LayoutParams(twPx.toInt(), thPx.toInt())
+      wrapper.layoutParams = FrameLayout.LayoutParams(wrapW.toInt(), wrapH.toInt())
       wrapper.x = targetLoc[0].toFloat()
       wrapper.y = targetLoc[1].toFloat()
       wrapper.clipChildren = true
@@ -760,8 +777,23 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       }
 
       wrapper.addView(content)
+      wrapper.translationZ = 1000f
+
+      // Match the target's exact rotation center by reading its actual size
+      val actualW = targetView?.width?.toFloat() ?: wrapW
+      val actualH = targetView?.height?.toFloat() ?: wrapH
+      // Clear target rotation first so getLocationInWindow gives un-rotated pos
+      // then position wrapper at same un-rotated pos with same rotation
+      targetView?.rotation = 0f
+      val unrotatedLoc = if (targetView != null) getLocationInWindow(targetView) else targetLoc
+      wrapper.x = unrotatedLoc[0].toFloat()
+      wrapper.y = unrotatedLoc[1].toFloat()
+      wrapper.layoutParams = FrameLayout.LayoutParams(actualW.toInt(), actualH.toInt())
+      wrapper.rotation = rotationEndAngle.toFloat()
+
       decorView.addView(wrapper)
       overlayContainer = wrapper
+      targetView?.visibility = View.INVISIBLE
     }
 
     // Show source screen underneath
@@ -782,9 +814,18 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     val startImgW = content?.layoutParams?.width?.toFloat() ?: cardWidth
     val startImgH = content?.layoutParams?.height?.toFloat() ?: cardHeight
 
+    // Lock pivot to center so rotation stays stable as size changes
+    if (rotationEndAngle != 0.0) {
+      wrapper.pivotX = startWidth / 2f
+      wrapper.pivotY = startHeight / 2f
+    }
+
+    // Match iOS collapse curve: cubic bezier (0.25, 1.0, 0.5, 1.0)
+    val collapseInterpolator = PathInterpolator(0.25f, 1.0f, 0.5f, 1.0f)
+
     val animator = ValueAnimator.ofFloat(0f, 1f)
     animator.duration = dur
-    animator.interpolator = springInterpolator
+    animator.interpolator = collapseInterpolator
 
     animator.addUpdateListener { anim ->
       val t = anim.animatedValue as Float
@@ -795,6 +836,11 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       lp.height = lerp(startHeight, cardHeight, t).toInt()
       wrapper.layoutParams = lp
       setRoundedCorners(wrapper, lerp(startCr, cardCornerRadiusPx, t))
+      if (rotationEndAngle != 0.0) {
+        wrapper.rotation = lerp(rotationEndAngle.toFloat(), 0f, t)
+        wrapper.pivotX = lp.width / 2f
+        wrapper.pivotY = lp.height / 2f
+      }
 
       if (content != null) {
         if (hasWrapper) {

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

@@ -1,5 +1,6 @@
 package com.melivalesca.morphcard
 
+import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.Canvas
@@ -21,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)
 
@@ -38,6 +40,8 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
         screenContainer.visibility = View.INVISIBLE
         Log.d(TAG, "TargetView: set screen INVISIBLE")
       }
+      // Hide children until snapshot is in place to avoid flash of un-rotated content
+      hideChildren()
     }
   }
 
@@ -58,7 +62,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
@@ -114,6 +120,40 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
     invalidate()
   }
 
+  fun showChildren() {
+    for (i in 0 until childCount) {
+      getChildAt(i).alpha = 1f
+    }
+  }
+
+  fun hideChildren() {
+    for (i in 0 until childCount) {
+      getChildAt(i).alpha = 0f
+    }
+  }
+
+  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()
+    }
+    // Show children before snapshot fades so they're visible underneath
+    showChildren()
+    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(TAG, "clearSnapshot: clearing bitmap")

package/ios/Fabric/RNCMorphCardSourceComponentView.mm

@@ -92,6 +92,8 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
   __weak UIView *_targetView;
   __weak UIView *_sourceScreenContainer;
   __weak UIView *_targetScreenContainer;
+  CGFloat _rotations;
+  CGFloat _rotationEndAngle;
   UIView *_wrapperView;
   UIImageView *_snapshot;
 }
@@ -124,6 +126,8 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
   } else {
     _scaleMode = UIViewContentModeScaleAspectFill;
   }
+  _rotations = newProps.rotations;
+  _rotationEndAngle = newProps.rotationEndAngle;
   [super updateProps:props oldProps:oldProps];
 }
 
@@ -293,17 +297,37 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
         ? (targetFrame.size.height - contentSize.height) / 2.0
         : contentOffsetY;
 
+    // Use bounds/center instead of frame so rotation transforms work correctly
+    CGFloat totalAngleDeg = _rotations * 360.0 + _rotationEndAngle;
+    CGFloat totalAngleRad = totalAngleDeg * M_PI / 180.0;
+    wrapper.bounds = CGRectMake(0, 0, _cardFrame.size.width, _cardFrame.size.height);
+    wrapper.center = CGPointMake(CGRectGetMidX(_cardFrame), CGRectGetMidY(_cardFrame));
+
     UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
         initWithDuration:dur
             dampingRatio:0.85
               animations:^{
-                wrapper.frame = targetFrame;
+                wrapper.bounds = CGRectMake(0, 0, targetFrame.size.width, targetFrame.size.height);
+                wrapper.center = CGPointMake(CGRectGetMidX(targetFrame), CGRectGetMidY(targetFrame));
                 wrapper.layer.cornerRadius = targetCornerRadius;
                 content.frame = CGRectMake(targetCx, targetCy,
                                            contentSize.width,
                                            contentSize.height);
               }];
 
+    // Use CABasicAnimation for rotation — UIViewPropertyAnimator takes the
+    // shortest path and can't do multiple full spins.
+    if (totalAngleRad != 0) {
+      CABasicAnimation *rotAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
+      rotAnim.fromValue = @(0);
+      rotAnim.toValue = @(totalAngleRad);
+      rotAnim.duration = dur;
+      rotAnim.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.25 :1.0 :0.5 :1.0];
+      rotAnim.fillMode = kCAFillModeForwards;
+      rotAnim.removedOnCompletion = NO;
+      [wrapper.layer addAnimation:rotAnim forKey:@"morphRotation"];
+    }
+
     // Hide the target view itself so it doesn't double-render over the morph overlay.
     if (targetView) {
       targetView.hidden = YES;
@@ -338,8 +362,20 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
                   cornerRadius:targetCornerRadius
                backgroundColor:wrapperBg];
         }
+        // Crossfade snapshot out to reveal live React children underneath
+        dispatch_after(
+            dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)),
+            dispatch_get_main_queue(), ^{
+              [target fadeOutSnapshot];
+            });
+      }
+      if (targetView) {
+        targetView.hidden = NO;
+        CGFloat endAngleRad = self->_rotationEndAngle * M_PI / 180.0;
+        if (endAngleRad != 0) {
+          targetView.transform = CGAffineTransformMakeRotation(endAngleRad);
+        }
       }
-      if (targetView) { targetView.hidden = NO; }
       self.alpha = 1;
       UIView *ts = self->_targetScreenContainer;
       if (ts) { ts.alpha = 1; }
@@ -357,7 +393,9 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
     UIViewContentMode scaleMode = _scaleMode;
     CGSize imageSize = cardImage.size;
 
-    UIView *container = [[UIView alloc] initWithFrame:_cardFrame];
+    UIView *container = [[UIView alloc] initWithFrame:CGRectZero];
+    container.bounds = CGRectMake(0, 0, _cardFrame.size.width, _cardFrame.size.height);
+    container.center = CGPointMake(CGRectGetMidX(_cardFrame), CGRectGetMidY(_cardFrame));
     container.clipsToBounds = YES;
     container.layer.cornerRadius = _cardCornerRadius;
 
@@ -382,15 +420,31 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
     CGRect targetImageFrame = imageFrameForScaleMode(
         scaleMode, imageSize, targetFrame.size);
 
+    CGFloat totalAngleDegNoWrap = _rotations * 360.0 + _rotationEndAngle;
+    CGFloat totalAngleRadNoWrap = totalAngleDegNoWrap * M_PI / 180.0;
+
     UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
         initWithDuration:dur
             dampingRatio:0.85
               animations:^{
-                container.frame = targetFrame;
+                container.bounds = CGRectMake(0, 0, targetFrame.size.width, targetFrame.size.height);
+                container.center = CGPointMake(CGRectGetMidX(targetFrame), CGRectGetMidY(targetFrame));
                 container.layer.cornerRadius = targetCornerRadius;
                 snapshot.frame = targetImageFrame;
               }];
 
+    // Use CABasicAnimation for rotation — supports multiple full spins
+    if (totalAngleRadNoWrap != 0) {
+      CABasicAnimation *rotAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
+      rotAnim.fromValue = @(0);
+      rotAnim.toValue = @(totalAngleRadNoWrap);
+      rotAnim.duration = dur;
+      rotAnim.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.25 :1.0 :0.5 :1.0];
+      rotAnim.fillMode = kCAFillModeForwards;
+      rotAnim.removedOnCompletion = NO;
+      [container.layer addAnimation:rotAnim forKey:@"morphRotation"];
+    }
+
     // Start fading in screen content early (at 15% of the animation).
     __weak RNCMorphCardSourceComponentView *weakSelf2 = self;
     dispatch_after(
@@ -414,8 +468,20 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
                        frame:target.bounds
                 cornerRadius:targetCornerRadius
              backgroundColor:nil];
+        // Crossfade snapshot out to reveal live React children underneath
+        dispatch_after(
+            dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)),
+            dispatch_get_main_queue(), ^{
+              [target fadeOutSnapshot];
+            });
+      }
+      if (targetView) {
+        targetView.hidden = NO;
+        CGFloat endAngleRad = self->_rotationEndAngle * M_PI / 180.0;
+        if (endAngleRad != 0) {
+          targetView.transform = CGAffineTransformMakeRotation(endAngleRad);
+        }
       }
-      if (targetView) { targetView.hidden = NO; }
       self.alpha = 1;
       UIView *ts = self->_targetScreenContainer;
       if (ts) { ts.alpha = 1; }
@@ -447,9 +513,12 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
   UIView *targetScreen = _targetScreenContainer;
   UIView *sourceScreen = _sourceScreenContainer;
 
-  // Clear the snapshot from the target view before re-creating the overlay
+  // Clear the snapshot and hide the target view so live children
+  // don't show behind the animating collapse overlay
   if (targetView && [targetView isKindOfClass:[RNCMorphCardTargetComponentView class]]) {
     [(RNCMorphCardTargetComponentView *)targetView clearSnapshot];
+    targetView.hidden = YES;
+    targetView.transform = CGAffineTransformIdentity;
   }
 
   CGFloat collapseDur = 0;
@@ -479,7 +548,9 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
           ? (targetFrame.size.height - contentSize.height) / 2.0
           : contentOffsetY;
 
-      wrapper = [[UIView alloc] initWithFrame:targetFrame];
+      wrapper = [[UIView alloc] initWithFrame:CGRectZero];
+      wrapper.bounds = CGRectMake(0, 0, targetFrame.size.width, targetFrame.size.height);
+      wrapper.center = CGPointMake(CGRectGetMidX(targetFrame), CGRectGetMidY(targetFrame));
       wrapper.backgroundColor = self.backgroundColor;
       wrapper.layer.cornerRadius = targetCornerRadius;
       wrapper.clipsToBounds = YES;
@@ -508,13 +579,27 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
         initWithDuration:dur
         timingParameters:timing];
     [animator addAnimations:^{
-      wrapper.frame = self->_cardFrame;
+      wrapper.bounds = CGRectMake(0, 0, self->_cardFrame.size.width, self->_cardFrame.size.height);
+      wrapper.center = CGPointMake(CGRectGetMidX(self->_cardFrame), CGRectGetMidY(self->_cardFrame));
       wrapper.layer.cornerRadius = self->_cardCornerRadius;
       if (content) {
         content.frame = (CGRect){CGPointZero, content.frame.size};
       }
     }];
 
+    // Animate rotation back to 0
+    CGFloat collapseStartAngle = _rotationEndAngle * M_PI / 180.0;
+    if (collapseStartAngle != 0) {
+      CABasicAnimation *rotAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
+      rotAnim.fromValue = @(collapseStartAngle);
+      rotAnim.toValue = @(0);
+      rotAnim.duration = dur;
+      rotAnim.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.25 :1.0 :0.5 :1.0];
+      rotAnim.fillMode = kCAFillModeForwards;
+      rotAnim.removedOnCompletion = NO;
+      [wrapper.layer addAnimation:rotAnim forKey:@"morphRotation"];
+    }
+
     // Fade out target screen
     [self scheduleScreenFadeOut:targetScreen duration:dur];
 
@@ -542,7 +627,9 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       CGRect imageFrame = imageFrameForScaleMode(
           _scaleMode, imageSize, targetFrame.size);
 
-      container = [[UIView alloc] initWithFrame:targetFrame];
+      container = [[UIView alloc] initWithFrame:CGRectZero];
+      container.bounds = CGRectMake(0, 0, targetFrame.size.width, targetFrame.size.height);
+      container.center = CGPointMake(CGRectGetMidX(targetFrame), CGRectGetMidY(targetFrame));
       container.clipsToBounds = YES;
       container.layer.cornerRadius = targetCornerRadius;
 
@@ -568,11 +655,25 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
         initWithDuration:dur
         timingParameters:timing];
     [animator addAnimations:^{
-      container.frame = self->_cardFrame;
+      container.bounds = CGRectMake(0, 0, self->_cardFrame.size.width, self->_cardFrame.size.height);
+      container.center = CGPointMake(CGRectGetMidX(self->_cardFrame), CGRectGetMidY(self->_cardFrame));
       container.layer.cornerRadius = self->_cardCornerRadius;
       snapshot.frame = (CGRect){CGPointZero, self->_cardFrame.size};
     }];
 
+    // Animate rotation back to 0
+    CGFloat collapseStartAngleNW = _rotationEndAngle * M_PI / 180.0;
+    if (collapseStartAngleNW != 0) {
+      CABasicAnimation *rotAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
+      rotAnim.fromValue = @(collapseStartAngleNW);
+      rotAnim.toValue = @(0);
+      rotAnim.duration = dur;
+      rotAnim.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.25 :1.0 :0.5 :1.0];
+      rotAnim.fillMode = kCAFillModeForwards;
+      rotAnim.removedOnCompletion = NO;
+      [container.layer addAnimation:rotAnim forKey:@"morphRotation"];
+    }
+
     // Fade out target screen
     [self scheduleScreenFadeOut:targetScreen duration:dur];
 

package/ios/Fabric/RNCMorphCardTargetComponentView.h

@@ -14,6 +14,7 @@ NS_ASSUME_NONNULL_BEGIN
                frame:(CGRect)frame
         cornerRadius:(CGFloat)cornerRadius
      backgroundColor:(nullable UIColor *)bgColor;
+- (void)fadeOutSnapshot;
 - (void)clearSnapshot;
 
 @end

package/ios/Fabric/RNCMorphCardTargetComponentView.mm

@@ -72,6 +72,27 @@ extern UIView *RNCMorphCardFindScreenContainer(UIView *view);
   _snapshotContainer = container;
 }
 
+- (void)fadeOutSnapshot {
+  UIView *snap = _snapshotContainer;
+  if (!snap) return;
+  // Only fade out if there are React children underneath to reveal.
+  // If no children (scaleMode bitmap-only), keep the snapshot.
+  BOOL hasReactChildren = NO;
+  for (UIView *child in self.subviews) {
+    if (child != _snapshotContainer) { hasReactChildren = YES; break; }
+  }
+  if (!hasReactChildren) return;
+
+  [UIView animateWithDuration:0.15
+      animations:^{ snap.alpha = 0; }
+      completion:^(BOOL finished) {
+        [snap removeFromSuperview];
+        if (self->_snapshotContainer == snap) {
+          self->_snapshotContainer = nil;
+        }
+      }];
+}
+
 - (void)clearSnapshot {
   if (_snapshotContainer) {
     [_snapshotContainer removeFromSuperview];

package/lib/commonjs/MorphCardSource.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _NativeMorphCardModule = _interopRequireDefault(require("./specs/NativeMorphCardModule"));
 var _NativeMorphCardSource = _interopRequireDefault(require("./specs/NativeMorphCardSource"));
+var _MorphChildrenRegistry = require("./MorphChildrenRegistry");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -23,12 +24,25 @@ const MorphCardSource = ({
   height,
   borderRadius,
   backgroundColor,
-  scaleMode,
+  resizeMode,
+  rotations,
+  rotationEndAngle,
   onPress,
   ref
 }) => {
   const nativeRef = React.useRef(null);
   React.useImperativeHandle(ref, () => nativeRef.current);
+
+  // Store children in shared registry so MorphCardTarget can clone them
+  React.useEffect(() => {
+    const tag = (0, _reactNative.findNodeHandle)(nativeRef.current);
+    if (tag != null) {
+      (0, _MorphChildrenRegistry.setSourceEntry)(tag, children, backgroundColor, resizeMode);
+    }
+    return () => {
+      if (tag != null) (0, _MorphChildrenRegistry.clearSourceEntry)(tag);
+    };
+  }, [children, backgroundColor, resizeMode]);
   const style = {};
   if (width != null) style.width = width;
   if (height != null) style.height = height;
@@ -37,6 +51,16 @@ const MorphCardSource = ({
     style.overflow = 'hidden';
   }
   if (backgroundColor != null) style.backgroundColor = backgroundColor;
+  const handleLayout = React.useCallback(e => {
+    const tag = (0, _reactNative.findNodeHandle)(nativeRef.current);
+    if (tag != null) {
+      const {
+        width: lw,
+        height: lh
+      } = e.nativeEvent.layout;
+      (0, _MorphChildrenRegistry.setSourceLayout)(tag, lw, lh);
+    }
+  }, []);
   const handlePress = React.useCallback(() => {
     if (!onPress) return;
     const tag = (0, _reactNative.findNodeHandle)(nativeRef.current);
@@ -52,9 +76,12 @@ const MorphCardSource = ({
     ref: nativeRef,
     duration: duration,
     expandDuration: expandDuration,
-    scaleMode: scaleMode,
+    scaleMode: resizeMode === 'contain' ? 'aspectFit' : resizeMode === 'stretch' ? 'stretch' : 'aspectFill',
     cardBorderRadius: borderRadius,
+    rotations: rotations,
+    rotationEndAngle: rotationEndAngle,
     style: style,
+    onLayout: handleLayout,
     children: children
   });
   if (onPress) {

package/lib/commonjs/MorphCardSource.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_NativeMorphCardSource","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeSourceView","NativeSourceViewSpec","View","MorphCardSource","children","duration","expandDuration","width","height","borderRadius","backgroundColor","scaleMode","onPress","ref","nativeRef","useRef","useImperativeHandle","current","style","overflow","handlePress","useCallback","tag","findNodeHandle","NativeMorphCardModule","prepareExpand","requestAnimationFrame","content","jsx","cardBorderRadius","Pressable","exports","getViewTag","viewRef","morphExpand","sourceRef","targetRef","sourceTag","targetTag","expand","morphCollapse","collapse"],"sourceRoot":"../../src","sources":["MorphCardSource.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_NativeMorphCardSource","_MorphChildrenRegistry","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeSourceView","NativeSourceViewSpec","View","MorphCardSource","children","duration","expandDuration","width","height","borderRadius","backgroundColor","resizeMode","rotations","rotationEndAngle","onPress","ref","nativeRef","useRef","useImperativeHandle","current","useEffect","tag","findNodeHandle","setSourceEntry","clearSourceEntry","style","overflow","handleLayout","useCallback","lw","lh","nativeEvent","layout","setSourceLayout","handlePress","NativeMorphCardModule","prepareExpand","requestAnimationFrame","content","jsx","scaleMode","cardBorderRadius","onLayout","Pressable","exports","getViewTag","viewRef","morphExpand","sourceRef","targetRef","sourceTag","targetTag","expand","morphCollapse","collapse"],"sourceRoot":"../../src","sources":["MorphCardSource.tsx"],"mappings":"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","ignoreList":[]}