react-native-morph-card 0.2.7 → 0.2.8

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
@@ -51,7 +51,11 @@ Wrap your card content in `MorphCardSource`. On the detail screen, use `MorphCar
 ```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.                               |
+| `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.                     |
 
 ### `<MorphCardTarget>`
 
 Placed on the detail screen where the card should land. Triggers the expand animation on mount.
 
-| 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,7 +160,8 @@ 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,7 +653,7 @@ 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")
     }
 
@@ -806,13 +764,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

@@ -3,22 +3,15 @@ package com.melivalesca.morphcard
 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
@@ -37,13 +30,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")
       }
     }
   }
@@ -104,42 +97,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
@@ -149,7 +116,7 @@ class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
 
   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 +124,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;
 

package/ios/Fabric/RNCMorphCardSourceComponentView.mm

@@ -22,7 +22,7 @@ static UIWindow *getKeyWindow(void) {
   return nil;
 }
 
-static UIView *findScreenContainer(UIView *view) {
+UIView *RNCMorphCardFindScreenContainer(UIView *view) {
   UIWindow *window = view.window;
   if (!window) return nil;
 
@@ -72,6 +72,15 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
   }
 }
 
+#pragma mark - Private interface
+
+@interface RNCMorphCardSourceComponentView ()
+
+- (void)collapseFromTarget:(nullable UIView *)targetView
+                   resolve:(RCTPromiseResolveBlock)resolve;
+
+@end
+
 @implementation RNCMorphCardSourceComponentView {
   CGFloat _duration;
   CGFloat _expandDuration;
@@ -152,6 +161,64 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
   }];
 }
 
+#pragma mark - Shared helpers
+
+/// Compute the target frame and corner radius from the given target view
+/// (or fall back to _cardFrame if targetView is nil).
+- (CGRect)targetFrameForView:(UIView *)targetView
+                cornerRadius:(CGFloat *)outCornerRadius {
+  CGPoint targetOrigin = targetView
+      ? [targetView convertPoint:CGPointZero toView:nil]
+      : _cardFrame.origin;
+
+  CGFloat tw = self.pendingTargetWidth;
+  CGFloat th = self.pendingTargetHeight;
+  CGFloat tbr = self.pendingTargetBorderRadius;
+
+  CGRect targetFrame = CGRectMake(
+      targetOrigin.x,
+      targetOrigin.y,
+      tw > 0 ? tw : _cardFrame.size.width,
+      th > 0 ? th : _cardFrame.size.height);
+
+  if (outCornerRadius) {
+    *outCornerRadius = tbr >= 0 ? tbr : _cardCornerRadius;
+  }
+  return targetFrame;
+}
+
+/// Shared cleanup performed at the end of every collapse animation.
+- (void)collapseCleanupWithContainer:(UIView *)container
+                             resolve:(RCTPromiseResolveBlock)resolve {
+  [container removeFromSuperview];
+  _wrapperView = nil;
+  _snapshot = nil;
+  self.alpha = 1;
+  _isExpanded = NO;
+  _sourceScreenContainer = nil;
+  _targetScreenContainer = nil;
+  resolve(@(YES));
+}
+
+/// Schedule the screen-fade dispatch_after used by both collapse modes.
+/// Guards against the race where the animation completes before the
+/// dispatch fires — if cleanup already ran, _isExpanded is NO.
+- (void)scheduleScreenFadeOut:(UIView *)screenView
+                     duration:(NSTimeInterval)dur {
+  __weak RNCMorphCardSourceComponentView *weakSelf = self;
+  dispatch_after(
+      dispatch_time(DISPATCH_TIME_NOW, (int64_t)(dur * 0.15 * NSEC_PER_SEC)),
+      dispatch_get_main_queue(), ^{
+        RNCMorphCardSourceComponentView *strongSelf = weakSelf;
+        if (!strongSelf || !strongSelf->_isExpanded) return;
+        [UIView animateWithDuration:dur * 0.65
+            animations:^{
+              if (screenView) { screenView.alpha = 0; }
+            }
+            completion:nil];
+      });
+}
+
 #pragma mark - Expand
 
 - (void)expandToTarget:(UIView *)targetView
@@ -179,30 +246,18 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
   UIImage *cardImage = [self captureSnapshot];
 
   // ── 3. Keep source screen visible during navigation transition ──
-  UIView *sourceScreen = findScreenContainer(self);
+  UIView *sourceScreen = RNCMorphCardFindScreenContainer(self);
   _sourceScreenContainer = sourceScreen;
-  _targetScreenContainer = findScreenContainer(targetView);
+  _targetScreenContainer = RNCMorphCardFindScreenContainer(targetView);
 
   if (sourceScreen) {
     sourceScreen.alpha = 1;
   }
 
   // ── 4. Compute target frame and corner radius ──
-  CGPoint targetOrigin = targetView
-      ? [targetView convertPoint:CGPointZero toView:nil]
-      : _cardFrame.origin;
-
-  CGFloat tw = self.pendingTargetWidth;
-  CGFloat th = self.pendingTargetHeight;
-  CGFloat tbr = self.pendingTargetBorderRadius;
-
-  CGRect targetFrame = CGRectMake(
-      targetOrigin.x,
-      targetOrigin.y,
-      tw > 0 ? tw : _cardFrame.size.width,
-      th > 0 ? th : _cardFrame.size.height);
-
-  CGFloat targetCornerRadius = tbr >= 0 ? tbr : _cardCornerRadius;
+  CGFloat targetCornerRadius = 0;
+  CGRect targetFrame = [self targetFrameForView:targetView
+                                   cornerRadius:&targetCornerRadius];
 
   NSTimeInterval dur = (_expandDuration > 0 ? _expandDuration : _duration) / 1000.0;
 
@@ -255,10 +310,13 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
     }
 
     // Start fading in screen content early (at 15% of the animation).
+    __weak RNCMorphCardSourceComponentView *weakSelf = self;
     dispatch_after(
         dispatch_time(DISPATCH_TIME_NOW, (int64_t)(dur * 0.15 * NSEC_PER_SEC)),
         dispatch_get_main_queue(), ^{
-          UIView *ts = self->_targetScreenContainer;
+          RNCMorphCardSourceComponentView *strongSelf = weakSelf;
+          if (!strongSelf || !strongSelf->_isExpanded) return;
+          UIView *ts = strongSelf->_targetScreenContainer;
           if (ts) {
             [UIView animateWithDuration:dur * 0.5
                 animations:^{ ts.alpha = 1; }
@@ -334,10 +392,13 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
               }];
 
     // Start fading in screen content early (at 15% of the animation).
+    __weak RNCMorphCardSourceComponentView *weakSelf2 = self;
     dispatch_after(
         dispatch_time(DISPATCH_TIME_NOW, (int64_t)(dur * 0.15 * NSEC_PER_SEC)),
         dispatch_get_main_queue(), ^{
-          UIView *ts = self->_targetScreenContainer;
+          RNCMorphCardSourceComponentView *strongSelf2 = weakSelf2;
+          if (!strongSelf2 || !strongSelf2->_isExpanded) return;
+          UIView *ts = strongSelf2->_targetScreenContainer;
           if (ts) {
             [UIView animateWithDuration:dur * 0.5
                 animations:^{ ts.alpha = 1; }
@@ -405,17 +466,9 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       UIImage *cardImage = [self captureSnapshot];
       self.alpha = 0;
 
-      CGPoint targetOrigin = targetView
-          ? [targetView convertPoint:CGPointZero toView:nil]
-          : _cardFrame.origin;
-      CGFloat tw = self.pendingTargetWidth;
-      CGFloat th = self.pendingTargetHeight;
-      CGFloat tbr = self.pendingTargetBorderRadius;
-      CGRect targetFrame = CGRectMake(
-          targetOrigin.x, targetOrigin.y,
-          tw > 0 ? tw : _cardFrame.size.width,
-          th > 0 ? th : _cardFrame.size.height);
-      CGFloat targetCornerRadius = tbr >= 0 ? tbr : _cardCornerRadius;
+      CGFloat targetCornerRadius = 0;
+      CGRect targetFrame = [self targetFrameForView:targetView
+                                       cornerRadius:&targetCornerRadius];
 
       CGFloat contentOffsetY = self.pendingContentOffsetY;
       BOOL contentCentered = self.pendingContentCentered;
@@ -462,25 +515,11 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       }
     }];
 
-    // Fade out target screen concurrently at 15%, over 65% of duration
-    dispatch_after(
-        dispatch_time(DISPATCH_TIME_NOW, (int64_t)(dur * 0.15 * NSEC_PER_SEC)),
-        dispatch_get_main_queue(), ^{
-          [UIView animateWithDuration:dur * 0.65
-              animations:^{
-                if (targetScreen) { targetScreen.alpha = 0; }
-              }
-              completion:nil];
-        });
+    // Fade out target screen
+    [self scheduleScreenFadeOut:targetScreen duration:dur];
 
     [animator addCompletion:^(UIViewAnimatingPosition pos) {
-      [wrapper removeFromSuperview];
-      self->_wrapperView = nil;
-      self.alpha = 1;
-      self->_isExpanded = NO;
-      self->_sourceScreenContainer = nil;
-      self->_targetScreenContainer = nil;
-      resolve(@(YES));
+      [self collapseCleanupWithContainer:wrapper resolve:resolve];
     }];
 
     [animator startAnimation];
@@ -495,17 +534,9 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       UIImage *cardImage = [self captureSnapshot];
       self.alpha = 0;
 
-      CGPoint targetOrigin = targetView
-          ? [targetView convertPoint:CGPointZero toView:nil]
-          : _cardFrame.origin;
-      CGFloat tw = self.pendingTargetWidth;
-      CGFloat th = self.pendingTargetHeight;
-      CGFloat tbr = self.pendingTargetBorderRadius;
-      CGRect targetFrame = CGRectMake(
-          targetOrigin.x, targetOrigin.y,
-          tw > 0 ? tw : _cardFrame.size.width,
-          th > 0 ? th : _cardFrame.size.height);
-      CGFloat targetCornerRadius = tbr >= 0 ? tbr : _cardCornerRadius;
+      CGFloat targetCornerRadius = 0;
+      CGRect targetFrame = [self targetFrameForView:targetView
+                                       cornerRadius:&targetCornerRadius];
 
       CGSize imageSize = cardImage.size;
       CGRect imageFrame = imageFrameForScaleMode(
@@ -530,38 +561,23 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       sourceScreen.alpha = 1;
     }
 
-    UICubicTimingParameters *timing2 = [[UICubicTimingParameters alloc]
+    UICubicTimingParameters *timing = [[UICubicTimingParameters alloc]
         initWithControlPoint1:CGPointMake(0.25, 1.0)
                 controlPoint2:CGPointMake(0.5, 1.0)];
     UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
         initWithDuration:dur
-        timingParameters:timing2];
+        timingParameters:timing];
     [animator addAnimations:^{
       container.frame = self->_cardFrame;
       container.layer.cornerRadius = self->_cardCornerRadius;
       snapshot.frame = (CGRect){CGPointZero, self->_cardFrame.size};
     }];
 
-    // Fade out target screen concurrently at 15%, over 65% of duration
-    dispatch_after(
-        dispatch_time(DISPATCH_TIME_NOW, (int64_t)(dur * 0.15 * NSEC_PER_SEC)),
-        dispatch_get_main_queue(), ^{
-          [UIView animateWithDuration:dur * 0.65
-              animations:^{
-                if (targetScreen) { targetScreen.alpha = 0; }
-              }
-              completion:nil];
-        });
+    // Fade out target screen
+    [self scheduleScreenFadeOut:targetScreen duration:dur];
 
     [animator addCompletion:^(UIViewAnimatingPosition pos) {
-      [container removeFromSuperview];
-      self->_wrapperView = nil;
-      self->_snapshot = nil;
-      self.alpha = 1;
-      self->_isExpanded = NO;
-      self->_sourceScreenContainer = nil;
-      self->_targetScreenContainer = nil;
-      resolve(@(YES));
+      [self collapseCleanupWithContainer:container resolve:resolve];
     }];
 
     [animator startAnimation];

package/ios/Fabric/RNCMorphCardTargetComponentView.mm

@@ -1,4 +1,5 @@
 #import "RNCMorphCardTargetComponentView.h"
+#import "RNCMorphCardSourceComponentView.h"
 #import "RNCMorphCardViewRegistry.h"
 
 #import <React/RCTFabricComponentsPlugins.h>
@@ -7,9 +8,11 @@
 
 using namespace facebook::react;
 
+// Declared in RNCMorphCardSourceComponentView.mm
+extern UIView *RNCMorphCardFindScreenContainer(UIView *view);
+
 @implementation RNCMorphCardTargetComponentView {
   UIView *_snapshotContainer; // our own view — Fabric can't reset its styles
-  UIImageView *_snapshotView;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider {
@@ -35,17 +38,7 @@ using namespace facebook::react;
 
     // Immediately hide the detail screen container to prevent flicker.
     // The expand animation will fade it back in.
-    UIWindow *window = self.window;
-    CGRect windowBounds = window.bounds;
-    UIView *current = self.superview;
-    UIView *screenContainer = nil;
-    while (current && current != window) {
-      CGRect frameInWindow = [current convertRect:current.bounds toView:nil];
-      if (CGRectEqualToRect(frameInWindow, windowBounds)) {
-        screenContainer = current;
-      }
-      current = current.superview;
-    }
+    UIView *screenContainer = RNCMorphCardFindScreenContainer(self);
     if (screenContainer) {
       screenContainer.alpha = 0;
     }
@@ -77,14 +70,12 @@ using namespace facebook::react;
 
   [self addSubview:container];
   _snapshotContainer = container;
-  _snapshotView = iv;
 }
 
 - (void)clearSnapshot {
   if (_snapshotContainer) {
     [_snapshotContainer removeFromSuperview];
     _snapshotContainer = nil;
-    _snapshotView = nil;
   }
 }
 

package/ios/RNCMorphCardSource.m

@@ -24,7 +24,7 @@
 @implementation RNCMorphCardSource {
   // Saved state for collapsing back.
   CGRect _originalFrame;
-  UIView *_originalSuperview;
+  __weak UIView *_originalSuperview;
   NSInteger _originalIndex;
   CGFloat _originalCornerRadius;
   BOOL _isExpanded;

package/package.json

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