react-native-morph-card 0.2.0 → 0.2.2

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

@@ -100,124 +100,19 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
 
   // ── Snapshot ──
 
-  /**
-   * Capture a snapshot of the source card's children WITHOUT border radius clipping.
-   * Like iOS, we want the raw content (e.g. the full rectangular image), not what's
-   * visually clipped on screen. The border radius is applied separately during animation.
-   *
-   * This disables both Android's clipToOutline AND Fresco's RoundingParams (used by
-   * React Native's Image component) to capture the full rectangular content.
-   */
   private fun captureSnapshot(): Bitmap {
     val w = width
     val h = height
     val bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
     val canvas = Canvas(bitmap)
-
-    // Track Fresco views to restore rounding after capture
-    data class FrescoState(val view: View, val hierarchy: Any, val roundingParams: Any)
-    val frescoStates = mutableListOf<FrescoState>()
-    // Track views whose clipToOutline was disabled
-    val clippedViews = mutableListOf<View>()
-
-    // Map of Fresco views to their hierarchy (for drawing drawable directly)
-    val frescoViews = mutableMapOf<View, Any>()
-
-    fun prepareView(view: View) {
-      // Disable outline clipping
-      if (view.clipToOutline) {
-        clippedViews.add(view)
-        view.clipToOutline = false
-      }
-
-      // Detect Fresco DraweeView and disable rounding
-      try {
-        val getHierarchy = view.javaClass.getMethod("getHierarchy")
-        val hierarchy = getHierarchy.invoke(view)
-        if (hierarchy != null) {
-          val getRounding = hierarchy.javaClass.getMethod("getRoundingParams")
-          val rounding = getRounding.invoke(hierarchy)
-          if (rounding != null) {
-            val roundingClass = Class.forName("com.facebook.drawee.generic.RoundingParams")
-            val setRounding = hierarchy.javaClass.getMethod("setRoundingParams", roundingClass)
-            setRounding.invoke(hierarchy, null)
-            frescoStates.add(FrescoState(view, hierarchy, rounding))
-            frescoViews[view] = hierarchy
-            Log.d(TAG, "captureSnapshot: disabled Fresco rounding on ${view.width}x${view.height}")
-          }
-        }
-      } catch (_: Exception) {}
-
-      if (view is ViewGroup) {
-        for (i in 0 until view.childCount) {
-          prepareView(view.getChildAt(i))
-        }
-      }
-    }
-
-    for (i in 0 until childCount) {
-      prepareView(getChildAt(i))
-    }
-
-    // Draw children. For Fresco views, draw the top-level drawable directly
-    // (since the internal drawable is rebuilt when roundingParams changes).
-    fun drawView(view: View, c: Canvas) {
-      val hierarchy = frescoViews[view]
-      if (hierarchy != null) {
-        try {
-          val getTopDrawable = hierarchy.javaClass.getMethod("getTopLevelDrawable")
-          val drawable = getTopDrawable.invoke(hierarchy) as? android.graphics.drawable.Drawable
-          if (drawable != null) {
-            drawable.setBounds(0, 0, view.width, view.height)
-            drawable.invalidateSelf()
-            drawable.draw(c)
-            Log.d(TAG, "captureSnapshot: drew Fresco drawable directly ${view.width}x${view.height}")
-            return
-          }
-        } catch (_: Exception) {}
-      }
-
-      if (view is ViewGroup) {
-        // Draw background
-        view.background?.let { bg ->
-          bg.setBounds(0, 0, view.width, view.height)
-          bg.draw(c)
-        }
-        for (i in 0 until view.childCount) {
-          val child = view.getChildAt(i)
-          if (child.visibility != VISIBLE) continue
-          c.save()
-          c.translate(child.left.toFloat(), child.top.toFloat())
-          drawView(child, c)
-          c.restore()
-        }
-      } else {
-        view.draw(c)
-      }
-    }
-
     for (i in 0 until childCount) {
       val child = getChildAt(i)
       if (child.visibility != VISIBLE) continue
       canvas.save()
       canvas.translate(child.left.toFloat(), child.top.toFloat())
-      drawView(child, canvas)
+      child.draw(canvas)
       canvas.restore()
     }
-
-    // Restore clipToOutline
-    for (view in clippedViews) {
-      view.clipToOutline = true
-    }
-    // Restore Fresco rounding params
-    for (state in frescoStates) {
-      try {
-        val roundingClass = Class.forName("com.facebook.drawee.generic.RoundingParams")
-        val setRounding = state.hierarchy.javaClass.getMethod("setRoundingParams", roundingClass)
-        setRounding.invoke(state.hierarchy, state.roundingParams)
-      } catch (_: Exception) {}
-    }
-
     return bitmap
   }
 
@@ -738,7 +633,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
         this@MorphCardSourceView.alpha = 1f
 
         transferSnapshotToTarget(decorView, wrapper, targetView,
-          targetWidthPx, targetHeightPx, targetCornerRadiusPx)
+          targetWidthPx, targetHeightPx, targetCornerRadiusPx, 200L)
 
         promise.resolve(true)
       }
@@ -759,7 +654,8 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     targetView: View?,
     targetWidthPx: Float,
     targetHeightPx: Float,
-    cornerRadius: Float
+    cornerRadius: Float,
+    fadeDuration: Long = 100
   ) {
     val target = targetView as? MorphCardTargetView
     if (target == null) {
@@ -802,9 +698,19 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       Log.d(TAG, "transferSnapshot: handed snapshot to MorphCardTargetView")
     }
 
-    decorView.removeView(overlay)
-    overlayContainer = null
-    Log.d(TAG, "transferSnapshot: overlay removed")
+    val fadeOut = ValueAnimator.ofFloat(1f, 0f)
+    fadeOut.duration = fadeDuration
+    fadeOut.addUpdateListener { anim ->
+      overlay.alpha = anim.animatedValue as Float
+    }
+    fadeOut.addListener(object : android.animation.AnimatorListenerAdapter() {
+      override fun onAnimationEnd(animation: android.animation.Animator) {
+        decorView.removeView(overlay)
+        overlayContainer = null
+        Log.d(TAG, "transferSnapshot: overlay fade-out complete")
+      }
+    })
+    fadeOut.start()
   }
 
   // ══════════════════════════════════════════════════════════════

package/ios/Fabric/RNCMorphCardSourceComponentView.mm

@@ -128,54 +128,26 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
 #pragma mark - Snapshot helper
 
 - (UIImage *)captureSnapshot {
-  // Temporarily disable clipsToBounds + cornerRadius on all descendants so we
-  // capture full rectangular content (like iOS does for the source layer itself).
-  // This mirrors the Android fix that disables Fresco's RoundingParams.
-  NSMutableArray<NSDictionary *> *clippedViews = [NSMutableArray array];
-  __block void (^prepareView)(UIView *);
-  prepareView = ^(UIView *view) {
-    if (view.clipsToBounds && view.layer.cornerRadius > 0) {
-      [clippedViews addObject:@{
-        @"view": view,
-        @"radius": @(view.layer.cornerRadius)
-      }];
-      view.layer.cornerRadius = 0;
-      view.clipsToBounds = NO;
-    }
-    for (UIView *child in view.subviews) {
-      prepareView(child);
-    }
-  };
-  for (UIView *child in self.subviews) {
-    prepareView(child);
-  }
-
+  // Render children directly into a fresh context so the snapshot
+  // captures full rectangular content without the source view's
+  // cornerRadius clipping. No on-screen flash since we never
+  // modify visible properties.
   UIGraphicsImageRendererFormat *format =
       [UIGraphicsImageRendererFormat defaultFormat];
   format.opaque = NO;
   CGSize size = self.bounds.size;
   UIGraphicsImageRenderer *renderer =
       [[UIGraphicsImageRenderer alloc] initWithSize:size format:format];
-  UIImage *image =
-      [renderer imageWithActions:^(UIGraphicsImageRendererContext *ctx) {
-        for (UIView *child in self.subviews) {
-          CGContextSaveGState(ctx.CGContext);
-          CGContextTranslateCTM(ctx.CGContext, child.frame.origin.x,
-                                child.frame.origin.y);
-          [child drawViewHierarchyInRect:(CGRect){CGPointZero, child.frame.size}
-                      afterScreenUpdates:NO];
-          CGContextRestoreGState(ctx.CGContext);
-        }
-      }];
-
-  // Restore clipping
-  for (NSDictionary *entry in clippedViews) {
-    UIView *view = entry[@"view"];
-    view.layer.cornerRadius = [entry[@"radius"] floatValue];
-    view.clipsToBounds = YES;
-  }
-
-  return image;
+  return [renderer imageWithActions:^(UIGraphicsImageRendererContext *ctx) {
+    for (UIView *child in self.subviews) {
+      CGContextSaveGState(ctx.CGContext);
+      CGContextTranslateCTM(ctx.CGContext, child.frame.origin.x,
+                            child.frame.origin.y);
+      [child drawViewHierarchyInRect:(CGRect){CGPointZero, child.frame.size}
+                  afterScreenUpdates:NO];
+      CGContextRestoreGState(ctx.CGContext);
+    }
+  }];
 }
 
 #pragma mark - Expand
@@ -470,22 +442,25 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
 
     UIView *content = wrapper.subviews.firstObject;
 
+    UICubicTimingParameters *timing = [[UICubicTimingParameters alloc]
+        initWithControlPoint1:CGPointMake(0.25, 1.0)
+                controlPoint2:CGPointMake(0.5, 1.0)];
     UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
         initWithDuration:dur
-            dampingRatio:0.85
-              animations:^{
-                wrapper.frame = self->_cardFrame;
-                wrapper.layer.cornerRadius = self->_cardCornerRadius;
-                if (content) {
-                  content.frame = (CGRect){CGPointZero, content.frame.size};
-                }
-              }];
+        timingParameters:timing];
+    [animator addAnimations:^{
+      wrapper.frame = self->_cardFrame;
+      wrapper.layer.cornerRadius = self->_cardCornerRadius;
+      if (content) {
+        content.frame = (CGRect){CGPointZero, content.frame.size};
+      }
+    }];
 
-    // Fade out target screen concurrently at 15% (mirrors expand's fade-in)
+    // 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.5
+          [UIView animateWithDuration:dur * 0.65
               animations:^{
                 if (targetScreen) { targetScreen.alpha = 0; }
               }
@@ -549,20 +524,23 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       sourceScreen.alpha = 1;
     }
 
+    UICubicTimingParameters *timing2 = [[UICubicTimingParameters alloc]
+        initWithControlPoint1:CGPointMake(0.25, 1.0)
+                controlPoint2:CGPointMake(0.5, 1.0)];
     UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
         initWithDuration:dur
-            dampingRatio:0.85
-              animations:^{
-                container.frame = self->_cardFrame;
-                container.layer.cornerRadius = self->_cardCornerRadius;
-                snapshot.frame = (CGRect){CGPointZero, self->_cardFrame.size};
-              }];
+        timingParameters:timing2];
+    [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% (mirrors expand's fade-in)
+    // 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.5
+          [UIView animateWithDuration:dur * 0.65
               animations:^{
                 if (targetScreen) { targetScreen.alpha = 0; }
               }

package/package.json

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