react-native-morph-card 0.1.14 → 0.2.0

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

@@ -114,55 +114,86 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     val bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
     val canvas = Canvas(bitmap)
 
-    // Track state to restore: (view, hadClipToOutline, savedRoundingParams)
-    data class ViewState(val view: View, val hadClip: Boolean, val roundingParams: Any?)
-    val savedStates = mutableListOf<ViewState>()
+    // 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>()
 
-    fun disableClipping(view: View) {
-      val hadClip = view.clipToOutline
-      var savedRounding: Any? = null
-
-      Log.d(TAG, "captureSnapshot: visiting ${view.javaClass.name} clipToOutline=$hadClip size=${view.width}x${view.height}")
+    // Map of Fresco views to their hierarchy (for drawing drawable directly)
+    val frescoViews = mutableMapOf<View, Any>()
 
+    fun prepareView(view: View) {
       // Disable outline clipping
-      if (hadClip) {
+      if (view.clipToOutline) {
+        clippedViews.add(view)
         view.clipToOutline = false
       }
 
-      // Disable Fresco RoundingParams on DraweeView (React Native Image components).
-      // Uses reflection to avoid a compile-time dependency on Fresco.
+      // Detect Fresco DraweeView and disable rounding
       try {
         val getHierarchy = view.javaClass.getMethod("getHierarchy")
         val hierarchy = getHierarchy.invoke(view)
         if (hierarchy != null) {
-          Log.d(TAG, "captureSnapshot: found hierarchy ${hierarchy.javaClass.name}")
           val getRounding = hierarchy.javaClass.getMethod("getRoundingParams")
-          savedRounding = getRounding.invoke(hierarchy)
-          Log.d(TAG, "captureSnapshot: roundingParams=$savedRounding")
-          if (savedRounding != null) {
+          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)
-            Log.d(TAG, "captureSnapshot: disabled Fresco rounding")
+            frescoStates.add(FrescoState(view, hierarchy, rounding))
+            frescoViews[view] = hierarchy
+            Log.d(TAG, "captureSnapshot: disabled Fresco rounding on ${view.width}x${view.height}")
           }
         }
-      } catch (e: Exception) {
-        Log.d(TAG, "captureSnapshot: reflection skip for ${view.javaClass.simpleName}: ${e.javaClass.simpleName}")
-      }
-
-      if (hadClip || savedRounding != null) {
-        savedStates.add(ViewState(view, hadClip, savedRounding))
-      }
+      } catch (_: Exception) {}
 
       if (view is ViewGroup) {
         for (i in 0 until view.childCount) {
-          disableClipping(view.getChildAt(i))
+          prepareView(view.getChildAt(i))
         }
       }
     }
 
     for (i in 0 until childCount) {
-      disableClipping(getChildAt(i))
+      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) {
@@ -170,26 +201,21 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       if (child.visibility != VISIBLE) continue
       canvas.save()
       canvas.translate(child.left.toFloat(), child.top.toFloat())
-      child.draw(canvas)
+      drawView(child, canvas)
       canvas.restore()
     }
 
-    // Restore all view states
-    for (state in savedStates) {
-      if (state.hadClip) {
-        state.view.clipToOutline = true
-      }
-      if (state.roundingParams != null) {
-        try {
-          val getHierarchy = state.view.javaClass.getMethod("getHierarchy")
-          val hierarchy = getHierarchy.invoke(state.view)
-          if (hierarchy != null) {
-            val roundingClass = Class.forName("com.facebook.drawee.generic.RoundingParams")
-            val setRounding = hierarchy.javaClass.getMethod("setRoundingParams", roundingClass)
-            setRounding.invoke(hierarchy, state.roundingParams)
-          }
-        } catch (_: Exception) {}
-      }
+    // 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
@@ -712,7 +738,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
         this@MorphCardSourceView.alpha = 1f
 
         transferSnapshotToTarget(decorView, wrapper, targetView,
-          targetWidthPx, targetHeightPx, targetCornerRadiusPx, 200L)
+          targetWidthPx, targetHeightPx, targetCornerRadiusPx)
 
         promise.resolve(true)
       }
@@ -733,8 +759,7 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
     targetView: View?,
     targetWidthPx: Float,
     targetHeightPx: Float,
-    cornerRadius: Float,
-    fadeDuration: Long = 100
+    cornerRadius: Float
   ) {
     val target = targetView as? MorphCardTargetView
     if (target == null) {
@@ -777,19 +802,9 @@ class MorphCardSourceView(context: Context) : ReactViewGroup(context) {
       Log.d(TAG, "transferSnapshot: handed snapshot to MorphCardTargetView")
     }
 
-    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()
+    decorView.removeView(overlay)
+    overlayContainer = null
+    Log.d(TAG, "transferSnapshot: overlay removed")
   }
 
   // ══════════════════════════════════════════════════════════════

package/ios/Fabric/RNCMorphCardSourceComponentView.mm

@@ -128,25 +128,54 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
 #pragma mark - Snapshot helper
 
 - (UIImage *)captureSnapshot {
-  // 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.
+  // 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);
+  }
+
   UIGraphicsImageRendererFormat *format =
       [UIGraphicsImageRendererFormat defaultFormat];
   format.opaque = NO;
   CGSize size = self.bounds.size;
   UIGraphicsImageRenderer *renderer =
       [[UIGraphicsImageRenderer alloc] initWithSize:size format:format];
-  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);
-    }
-  }];
+  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;
 }
 
 #pragma mark - Expand
@@ -258,9 +287,7 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
           UIView *ts = self->_targetScreenContainer;
           if (ts) {
             [UIView animateWithDuration:dur * 0.5
-                animations:^{
-                  ts.alpha = 1;
-                }
+                animations:^{ ts.alpha = 1; }
                 completion:nil];
           }
         });
@@ -284,14 +311,8 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       self.alpha = 1;
       UIView *ts = self->_targetScreenContainer;
       if (ts) { ts.alpha = 1; }
-      [UIView animateWithDuration:0.2
-          animations:^{
-            wrapper.alpha = 0;
-          }
-          completion:^(BOOL finished) {
-            [wrapper removeFromSuperview];
-            self->_wrapperView = nil;
-          }];
+      [wrapper removeFromSuperview];
+      self->_wrapperView = nil;
       resolve(@(YES));
     }];
 
@@ -345,9 +366,7 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
           UIView *ts = self->_targetScreenContainer;
           if (ts) {
             [UIView animateWithDuration:dur * 0.5
-                animations:^{
-                  ts.alpha = 1;
-                }
+                animations:^{ ts.alpha = 1; }
                 completion:nil];
           }
         });
@@ -365,15 +384,9 @@ static CGRect imageFrameForScaleMode(UIViewContentMode mode,
       self.alpha = 1;
       UIView *ts = self->_targetScreenContainer;
       if (ts) { ts.alpha = 1; }
-      [UIView animateWithDuration:0.2
-          animations:^{
-            container.alpha = 0;
-          }
-          completion:^(BOOL finished) {
-            [container removeFromSuperview];
-            self->_wrapperView = nil;
-            self->_snapshot = nil;
-          }];
+      [container removeFromSuperview];
+      self->_wrapperView = nil;
+      self->_snapshot = nil;
       resolve(@(YES));
     }];
 

package/package.json

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