react-native-morph-card 0.2.7 → 0.3.0

package/lib/module/MorphCardSource.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Pressable, View, findNodeHandle } from 'react-native';
 import NativeMorphCardModule from './specs/NativeMorphCardModule';
 import NativeSourceViewSpec from './specs/NativeMorphCardSource';
+import { setSourceEntry, setSourceLayout, clearSourceEntry } from './MorphChildrenRegistry';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NativeSourceView = NativeSourceViewSpec ?? View;
 export const MorphCardSource = ({
@@ -14,12 +15,23 @@ export const MorphCardSource = ({
   height,
   borderRadius,
   backgroundColor,
-  scaleMode,
+  resizeMode,
   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 = findNodeHandle(nativeRef.current);
+    if (tag != null) {
+      setSourceEntry(tag, children, backgroundColor, resizeMode);
+    }
+    return () => {
+      if (tag != null) clearSourceEntry(tag);
+    };
+  }, [children, backgroundColor, resizeMode]);
   const style = {};
   if (width != null) style.width = width;
   if (height != null) style.height = height;
@@ -28,6 +40,16 @@ export const MorphCardSource = ({
     style.overflow = 'hidden';
   }
   if (backgroundColor != null) style.backgroundColor = backgroundColor;
+  const handleLayout = React.useCallback(e => {
+    const tag = findNodeHandle(nativeRef.current);
+    if (tag != null) {
+      const {
+        width: lw,
+        height: lh
+      } = e.nativeEvent.layout;
+      setSourceLayout(tag, lw, lh);
+    }
+  }, []);
   const handlePress = React.useCallback(() => {
     if (!onPress) return;
     const tag = findNodeHandle(nativeRef.current);
@@ -43,9 +65,10 @@ export const MorphCardSource = ({
     ref: nativeRef,
     duration: duration,
     expandDuration: expandDuration,
-    scaleMode: scaleMode,
+    scaleMode: resizeMode === 'contain' ? 'aspectFit' : resizeMode === 'stretch' ? 'stretch' : 'aspectFill',
     cardBorderRadius: borderRadius,
     style: style,
+    onLayout: handleLayout,
     children: children
   });
   if (onPress) {

package/lib/module/MorphCardSource.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","findNodeHandle","NativeMorphCardModule","NativeSourceViewSpec","jsx","_jsx","NativeSourceView","MorphCardSource","children","duration","expandDuration","width","height","borderRadius","backgroundColor","scaleMode","onPress","ref","nativeRef","useRef","useImperativeHandle","current","style","overflow","handlePress","useCallback","tag","prepareExpand","requestAnimationFrame","content","cardBorderRadius","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","Pressable","View","findNodeHandle","NativeMorphCardModule","NativeSourceViewSpec","setSourceEntry","setSourceLayout","clearSourceEntry","jsx","_jsx","NativeSourceView","MorphCardSource","children","duration","expandDuration","width","height","borderRadius","backgroundColor","resizeMode","onPress","ref","nativeRef","useRef","useImperativeHandle","current","useEffect","tag","style","overflow","handleLayout","useCallback","e","lw","lh","nativeEvent","layout","handlePress","prepareExpand","requestAnimationFrame","content","scaleMode","cardBorderRadius","onLayout","getViewTag","viewRef","morphExpand","sourceRef","targetRef","sourceTag","targetTag","expand","morphCollapse","collapse"],"sourceRoot":"../../src","sources":["MorphCardSource.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/MorphCardTarget.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { View, findNodeHandle } from 'react-native';
 import NativeMorphCardModule from './specs/NativeMorphCardModule';
 import NativeTargetViewSpec from './specs/NativeMorphCardTarget';
+import { getSourceEntry } from './MorphChildrenRegistry';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NativeTargetView = NativeTargetViewSpec ?? View;
 export const MorphCardTarget = ({
@@ -46,16 +47,32 @@ export const MorphCardTarget = ({
     NativeMorphCardModule.setTargetConfig(sourceTag, lw, lh, borderRadius != null ? borderRadius : -1, contentOffsetY ?? 0, contentCentered ?? false);
     NativeMorphCardModule.expand(sourceTag, targetTag);
   }, [sourceTag, borderRadius, contentOffsetY, contentCentered]);
-  const sizeStyle = {};
+  const sourceEntry = getSourceEntry(sourceTag);
+  const containerStyle = {
+    overflow: 'hidden'
+  };
+  if (sourceEntry?.backgroundColor) {
+    containerStyle.backgroundColor = sourceEntry.backgroundColor;
+  }
+  if (contentCentered) {
+    containerStyle.justifyContent = 'center';
+    containerStyle.alignItems = 'center';
+  }
+  if (contentOffsetY) {
+    containerStyle.paddingTop = contentOffsetY;
+  }
   if (width != null) {
-    sizeStyle.width = width;
+    containerStyle.width = width;
   } else if (sourceSize) {
-    sizeStyle.width = sourceSize.width;
+    containerStyle.width = sourceSize.width;
   }
   if (height != null) {
-    sizeStyle.height = height;
+    containerStyle.height = height;
   } else if (sourceSize) {
-    sizeStyle.height = sourceSize.height;
+    containerStyle.height = sourceSize.height;
+  }
+  if (borderRadius) {
+    containerStyle.borderRadius = borderRadius;
   }
   return /*#__PURE__*/_jsx(NativeTargetView, {
     ref: nativeRef,
@@ -64,8 +81,15 @@ export const MorphCardTarget = ({
     targetWidth: 0,
     targetHeight: 0,
     targetBorderRadius: borderRadius != null ? borderRadius : -1,
-    style: sizeStyle,
-    onLayout: handleLayout
+    style: containerStyle,
+    onLayout: handleLayout,
+    children: sourceEntry && !sourceEntry.scaleMode && (sourceEntry.backgroundColor && sourceEntry.layoutWidth ? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: sourceEntry.layoutWidth,
+        height: sourceEntry.layoutHeight
+      },
+      children: sourceEntry.children
+    }) : sourceEntry.children)
   });
 };
 //# sourceMappingURL=MorphCardTarget.js.map

package/lib/module/MorphCardTarget.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","findNodeHandle","NativeMorphCardModule","NativeTargetViewSpec","jsx","_jsx","NativeTargetView","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","getSourceSize","then","size","catch","handleLayout","useCallback","e","current","lw","lh","nativeEvent","layout","targetTag","setTargetConfig","expand","sizeStyle","ref","targetWidth","targetHeight","targetBorderRadius","style","onLayout"],"sourceRoot":"../../src","sources":["MorphCardTarget.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAGEC,IAAI,EACJC,cAAc,QAET,cAAc;AACrB,OAAOC,qBAAqB,MAAM,+BAA+B;AACjE,OAAOC,oBAAoB,MAAM,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjE,MAAMC,gBAAgB,GAAGH,oBAAoB,IAAIH,IAAI;AAmBrD,OAAO,MAAMO,eAAe,GAAGA,CAAC;EAC9BC,SAAS;EACTC,gBAAgB;EAChBC,KAAK;EACLC,MAAM;EACNC,YAAY;EACZC,cAAc;EACdC;AACoB,CAAC,KAAK;EAC1B,MAAMC,SAAS,GAAGhB,KAAK,CAACiB,MAAM,CAAM,IAAI,CAAC;EACzC,MAAMC,WAAW,GAAGlB,KAAK,CAACiB,MAAM,CAAC,KAAK,CAAC;EACvC,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAGpB,KAAK,CAACqB,QAAQ,CAGxC,IAAI,CAAC;;EAEf;EACArB,KAAK,CAACsB,SAAS,CAAC,MAAM;IACpB,IAAIC,SAAS,GAAG,KAAK;IACrB,IAAId,SAAS,KAAKE,KAAK,IAAI,IAAI,IAAIC,MAAM,IAAI,IAAI,CAAC,EAAE;MAClDT,qBAAqB,CAACqB,aAAa,CAACf,SAAS,CAAC,CAC3CgB,IAAI,CAAEC,IAAuC,IAAK;QACjD,IAAI,CAACH,SAAS,EAAEH,aAAa,CAACM,IAAI,CAAC;MACrC,CAAC,CAAC,CACDC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACpB;IACA,OAAO,MAAM;MACXJ,SAAS,GAAG,IAAI;IAClB,CAAC;EACH,CAAC,EAAE,CAACd,SAAS,EAAEE,KAAK,EAAEC,MAAM,CAAC,CAAC;;EAE9B;EACA,MAAMgB,YAAY,GAAG5B,KAAK,CAAC6B,WAAW,CACnCC,CAAoB,IAAK;IACxB,IAAIZ,WAAW,CAACa,OAAO,EAAE;IACzB,IAAI,CAACtB,SAAS,EAAE;IAEhB,MAAM;MAAEE,KAAK,EAAEqB,EAAE;MAAEpB,MAAM,EAAEqB;IAAG,CAAC,GAAGH,CAAC,CAACI,WAAW,CAACC,MAAM;IACtD,MAAMC,SAAS,GAAGlC,cAAc,CAACc,SAAS,CAACe,OAAO,CAAC;IACnD,IAAI,CAACK,SAAS,EAAE;IAEhBlB,WAAW,CAACa,OAAO,GAAG,IAAI;IAE1B5B,qBAAqB,CAACkC,eAAe,CACnC5B,SAAS,EACTuB,EAAE,EACFC,EAAE,EACFpB,YAAY,IAAI,IAAI,GAAGA,YAAY,GAAG,CAAC,CAAC,EACxCC,cAAc,IAAI,CAAC,EACnBC,eAAe,IAAI,KACrB,CAAC;IACDZ,qBAAqB,CAACmC,MAAM,CAAC7B,SAAS,EAAE2B,SAAS,CAAC;EACpD,CAAC,EACD,CAAC3B,SAAS,EAAEI,YAAY,EAAEC,cAAc,EAAEC,eAAe,CAC3D,CAAC;EAED,MAAMwB,SAAoB,GAAG,CAAC,CAAC;EAC/B,IAAI5B,KAAK,IAAI,IAAI,EAAE;IACjB4B,SAAS,CAAC5B,KAAK,GAAGA,KAAK;EACzB,CAAC,MAAM,IAAIQ,UAAU,EAAE;IACrBoB,SAAS,CAAC5B,KAAK,GAAGQ,UAAU,CAACR,KAAK;EACpC;EACA,IAAIC,MAAM,IAAI,IAAI,EAAE;IAClB2B,SAAS,CAAC3B,MAAM,GAAGA,MAAM;EAC3B,CAAC,MAAM,IAAIO,UAAU,EAAE;IACrBoB,SAAS,CAAC3B,MAAM,GAAGO,UAAU,CAACP,MAAM;EACtC;EAEA,oBACEN,IAAA,CAACC,gBAAgB;IACfiC,GAAG,EAAExB,SAAU;IACfP,SAAS,EAAEA,SAAU;IACrBC,gBAAgB,EAAEA,gBAAiB;IACnC+B,WAAW,EAAE,CAAE;IACfC,YAAY,EAAE,CAAE;IAChBC,kBAAkB,EAAE9B,YAAY,IAAI,IAAI,GAAGA,YAAY,GAAG,CAAC,CAAE;IAC7D+B,KAAK,EAAEL,SAAU;IACjBM,QAAQ,EAAEjB;EAAa,CACxB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","View","findNodeHandle","NativeMorphCardModule","NativeTargetViewSpec","getSourceEntry","jsx","_jsx","NativeTargetView","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","getSourceSize","then","size","catch","handleLayout","useCallback","e","current","lw","lh","nativeEvent","layout","targetTag","setTargetConfig","expand","sourceEntry","containerStyle","overflow","backgroundColor","justifyContent","alignItems","paddingTop","ref","targetWidth","targetHeight","targetBorderRadius","style","onLayout","children","scaleMode","layoutWidth","layoutHeight"],"sourceRoot":"../../src","sources":["MorphCardTarget.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/MorphChildrenRegistry.js

@@ -0,0 +1,27 @@
+"use strict";
+
+const registry = new Map();
+export function setSourceEntry(tag, children, backgroundColor, scaleMode) {
+  const existing = registry.get(tag);
+  registry.set(tag, {
+    children,
+    backgroundColor,
+    scaleMode,
+    layoutWidth: existing?.layoutWidth,
+    layoutHeight: existing?.layoutHeight
+  });
+}
+export function setSourceLayout(tag, width, height) {
+  const existing = registry.get(tag);
+  if (existing) {
+    existing.layoutWidth = width;
+    existing.layoutHeight = height;
+  }
+}
+export function getSourceEntry(tag) {
+  return registry.get(tag);
+}
+export function clearSourceEntry(tag) {
+  registry.delete(tag);
+}
+//# sourceMappingURL=MorphChildrenRegistry.js.map

package/lib/module/MorphChildrenRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registry","Map","setSourceEntry","tag","children","backgroundColor","scaleMode","existing","get","set","layoutWidth","layoutHeight","setSourceLayout","width","height","getSourceEntry","clearSourceEntry","delete"],"sourceRoot":"../../src","sources":["MorphChildrenRegistry.ts"],"mappings":";;AAUA,MAAMA,QAAQ,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAE/C,OAAO,SAASC,cAAcA,CAC5BC,GAAW,EACXC,QAAmB,EACnBC,eAAwB,EACxBC,SAAkB,EAClB;EACA,MAAMC,QAAQ,GAAGP,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;EAClCH,QAAQ,CAACS,GAAG,CAACN,GAAG,EAAE;IAChBC,QAAQ;IACRC,eAAe;IACfC,SAAS;IACTI,WAAW,EAAEH,QAAQ,EAAEG,WAAW;IAClCC,YAAY,EAAEJ,QAAQ,EAAEI;EAC1B,CAAC,CAAC;AACJ;AAEA,OAAO,SAASC,eAAeA,CAACT,GAAW,EAAEU,KAAa,EAAEC,MAAc,EAAE;EAC1E,MAAMP,QAAQ,GAAGP,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;EAClC,IAAII,QAAQ,EAAE;IACZA,QAAQ,CAACG,WAAW,GAAGG,KAAK;IAC5BN,QAAQ,CAACI,YAAY,GAAGG,MAAM;EAChC;AACF;AAEA,OAAO,SAASC,cAAcA,CAACZ,GAAW,EAA2B;EACnE,OAAOH,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;AAC1B;AAEA,OAAO,SAASa,gBAAgBA,CAACb,GAAW,EAAE;EAC5CH,QAAQ,CAACiB,MAAM,CAACd,GAAG,CAAC;AACtB","ignoreList":[]}

package/lib/typescript/src/MorphCardSource.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type DimensionValue } from 'react-native';
-export type ScaleMode = 'aspectFill' | 'aspectFit' | 'stretch';
+export type ResizeMode = 'cover' | 'contain' | 'stretch';
 export interface MorphCardSourceProps {
     ref?: React.Ref<any>;
     duration?: number;
@@ -9,12 +9,12 @@ export interface MorphCardSourceProps {
     height?: DimensionValue;
     borderRadius?: number;
     backgroundColor?: string;
-    /** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'aspectFill' */
-    scaleMode?: ScaleMode;
+    /** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'cover' */
+    resizeMode?: ResizeMode;
     onPress?: (sourceTag: number) => void;
     children: React.ReactNode;
 }
-export declare const MorphCardSource: ({ children, duration, expandDuration, width, height, borderRadius, backgroundColor, scaleMode, onPress, ref, }: MorphCardSourceProps) => React.JSX.Element;
+export declare const MorphCardSource: ({ children, duration, expandDuration, width, height, borderRadius, backgroundColor, resizeMode, onPress, ref, }: MorphCardSourceProps) => React.JSX.Element;
 /**
  * Get the native view tag from a ref. Useful for passing sourceTag
  * to the detail screen via navigation params.

package/lib/typescript/src/MorphCardSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MorphCardSource.d.ts","sourceRoot":"","sources":["../../../src/MorphCardSource.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,cAAc,EAGpB,MAAM,cAAc,CAAC;AAMtB,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,gHAW7B,oBAAoB,sBAmCtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAEvE;AAED;;;;;GAKG;AACH,wBAAsB,WAAW,CAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAC9B,OAAO,CAAC,OAAO,CAAC,CAKlB;AAED;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEvE"}
+{"version":3,"file":"MorphCardSource.d.ts","sourceRoot":"","sources":["../../../src/MorphCardSource.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,iHAW7B,oBAAoB,sBAuDtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAEvE;AAED;;;;;GAKG;AACH,wBAAsB,WAAW,CAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAC9B,OAAO,CAAC,OAAO,CAAC,CAKlB;AAED;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEvE"}

package/lib/typescript/src/MorphCardTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MorphCardTarget.d.ts","sourceRoot":"","sources":["../../../src/MorphCardTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;AAMtB,MAAM,WAAW,oBAAoB;IACnC,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oFAAoF;IACpF,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,gGAQ7B,oBAAoB,sBAwEtB,CAAC"}
+{"version":3,"file":"MorphCardTarget.d.ts","sourceRoot":"","sources":["../../../src/MorphCardTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,oBAAoB;IACnC,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oFAAoF;IACpF,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,gGAQ7B,oBAAoB,sBA0GtB,CAAC"}

package/lib/typescript/src/MorphChildrenRegistry.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface SourceEntry {
+    children: ReactNode;
+    backgroundColor?: string;
+    scaleMode?: string;
+    layoutWidth?: number;
+    layoutHeight?: number;
+}
+export declare function setSourceEntry(tag: number, children: ReactNode, backgroundColor?: string, scaleMode?: string): void;
+export declare function setSourceLayout(tag: number, width: number, height: number): void;
+export declare function getSourceEntry(tag: number): SourceEntry | undefined;
+export declare function clearSourceEntry(tag: number): void;
+//# sourceMappingURL=MorphChildrenRegistry.d.ts.map

package/lib/typescript/src/MorphChildrenRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MorphChildrenRegistry.d.ts","sourceRoot":"","sources":["../../../src/MorphChildrenRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,SAAS,EACnB,eAAe,CAAC,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,QAUnB;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAMzE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAEnE;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,QAE3C"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,5 @@
 export { MorphCardSource, morphExpand, morphCollapse, getViewTag, } from './MorphCardSource';
-export type { MorphCardSourceProps, ScaleMode } from './MorphCardSource';
+export type { MorphCardSourceProps, ResizeMode } from './MorphCardSource';
 export { MorphCardTarget } from './MorphCardTarget';
 export type { MorphCardTargetProps } from './MorphCardTarget';
 export { useMorphTarget } from './useMorphTarget';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EACX,aAAa,EACb,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EACX,aAAa,EACb,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/package.json

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

package/src/MorphCardSource.tsx

@@ -3,15 +3,17 @@ import {
   Pressable,
   type ViewStyle,
   type DimensionValue,
+  type LayoutChangeEvent,
   View,
   findNodeHandle,
 } from 'react-native';
 import NativeMorphCardModule from './specs/NativeMorphCardModule';
 import NativeSourceViewSpec from './specs/NativeMorphCardSource';
+import { setSourceEntry, setSourceLayout, clearSourceEntry } from './MorphChildrenRegistry';
 
 const NativeSourceView = NativeSourceViewSpec ?? View;
 
-export type ScaleMode = 'aspectFill' | 'aspectFit' | 'stretch';
+export type ResizeMode = 'cover' | 'contain' | 'stretch';
 
 export interface MorphCardSourceProps {
   ref?: React.Ref<any>;
@@ -21,8 +23,8 @@ export interface MorphCardSourceProps {
   height?: DimensionValue;
   borderRadius?: number;
   backgroundColor?: string;
-  /** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'aspectFill' */
-  scaleMode?: ScaleMode;
+  /** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'cover' */
+  resizeMode?: ResizeMode;
   onPress?: (sourceTag: number) => void;
   children: React.ReactNode;
 }
@@ -35,13 +37,24 @@ export const MorphCardSource = ({
   height,
   borderRadius,
   backgroundColor,
-  scaleMode,
+  resizeMode,
   onPress,
   ref,
 }: MorphCardSourceProps) => {
   const nativeRef = React.useRef<any>(null);
   React.useImperativeHandle(ref, () => nativeRef.current);
 
+  // Store children in shared registry so MorphCardTarget can clone them
+  React.useEffect(() => {
+    const tag = findNodeHandle(nativeRef.current);
+    if (tag != null) {
+      setSourceEntry(tag, children, backgroundColor, resizeMode);
+    }
+    return () => {
+      if (tag != null) clearSourceEntry(tag);
+    };
+  }, [children, backgroundColor, resizeMode]);
+
   const style: ViewStyle = {};
   if (width != null) style.width = width as ViewStyle['width'];
   if (height != null) style.height = height as ViewStyle['height'];
@@ -50,6 +63,15 @@ export const MorphCardSource = ({
     style.overflow = 'hidden';
   }
   if (backgroundColor != null) style.backgroundColor = backgroundColor;
+
+  const handleLayout = React.useCallback((e: LayoutChangeEvent) => {
+    const tag = findNodeHandle(nativeRef.current);
+    if (tag != null) {
+      const { width: lw, height: lh } = e.nativeEvent.layout;
+      setSourceLayout(tag, lw, lh);
+    }
+  }, []);
+
   const handlePress = React.useCallback(() => {
     if (!onPress) return;
     const tag = findNodeHandle(nativeRef.current);
@@ -63,7 +85,7 @@ export const MorphCardSource = ({
   }, [onPress]);
 
   const content = (
-    <NativeSourceView ref={nativeRef} duration={duration} expandDuration={expandDuration} scaleMode={scaleMode} cardBorderRadius={borderRadius} style={style}>
+    <NativeSourceView ref={nativeRef} duration={duration} expandDuration={expandDuration} scaleMode={resizeMode === 'contain' ? 'aspectFit' : resizeMode === 'stretch' ? 'stretch' : 'aspectFill'} cardBorderRadius={borderRadius} style={style} onLayout={handleLayout}>
       {children}
     </NativeSourceView>
   );

package/src/MorphCardTarget.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import NativeMorphCardModule from './specs/NativeMorphCardModule';
 import NativeTargetViewSpec from './specs/NativeMorphCardTarget';
+import { getSourceEntry } from './MorphChildrenRegistry';
 
 const NativeTargetView = NativeTargetViewSpec ?? View;
 
@@ -77,23 +78,42 @@ export const MorphCardTarget = ({
         lh,
         borderRadius != null ? borderRadius : -1,
         contentOffsetY ?? 0,
-        contentCentered ?? false
+        contentCentered ?? false,
       );
       NativeMorphCardModule.expand(sourceTag, targetTag);
     },
-    [sourceTag, borderRadius, contentOffsetY, contentCentered]
+    [sourceTag, borderRadius, contentOffsetY, contentCentered],
   );
 
-  const sizeStyle: ViewStyle = {};
+  const sourceEntry = getSourceEntry(sourceTag);
+
+  const containerStyle: ViewStyle = {
+    overflow: 'hidden',
+  };
+  if (sourceEntry?.backgroundColor) {
+    containerStyle.backgroundColor = sourceEntry.backgroundColor;
+  }
+  if (contentCentered) {
+    containerStyle.justifyContent = 'center';
+    containerStyle.alignItems = 'center';
+  }
+  if (contentOffsetY) {
+    containerStyle.paddingTop = contentOffsetY;
+  }
+
   if (width != null) {
-    sizeStyle.width = width;
+    containerStyle.width = width;
   } else if (sourceSize) {
-    sizeStyle.width = sourceSize.width;
+    containerStyle.width = sourceSize.width;
   }
   if (height != null) {
-    sizeStyle.height = height;
+    containerStyle.height = height;
   } else if (sourceSize) {
-    sizeStyle.height = sourceSize.height;
+    containerStyle.height = sourceSize.height;
+  }
+
+  if (borderRadius) {
+    containerStyle.borderRadius = borderRadius;
   }
 
   return (
@@ -104,8 +124,23 @@ export const MorphCardTarget = ({
       targetWidth={0}
       targetHeight={0}
       targetBorderRadius={borderRadius != null ? borderRadius : -1}
-      style={sizeStyle}
+      style={containerStyle}
       onLayout={handleLayout}
-    />
+    >
+      {sourceEntry &&
+        !sourceEntry.scaleMode &&
+        (sourceEntry.backgroundColor && sourceEntry.layoutWidth ? (
+          <View
+            style={{
+              width: sourceEntry.layoutWidth,
+              height: sourceEntry.layoutHeight,
+            }}
+          >
+            {sourceEntry.children}
+          </View>
+        ) : (
+          sourceEntry.children
+        ))}
+    </NativeTargetView>
   );
 };

package/src/MorphChildrenRegistry.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+export interface SourceEntry {
+  children: ReactNode;
+  backgroundColor?: string;
+  scaleMode?: string;
+  layoutWidth?: number;
+  layoutHeight?: number;
+}
+
+const registry = new Map<number, SourceEntry>();
+
+export function setSourceEntry(
+  tag: number,
+  children: ReactNode,
+  backgroundColor?: string,
+  scaleMode?: string
+) {
+  const existing = registry.get(tag);
+  registry.set(tag, {
+    children,
+    backgroundColor,
+    scaleMode,
+    layoutWidth: existing?.layoutWidth,
+    layoutHeight: existing?.layoutHeight,
+  });
+}
+
+export function setSourceLayout(tag: number, width: number, height: number) {
+  const existing = registry.get(tag);
+  if (existing) {
+    existing.layoutWidth = width;
+    existing.layoutHeight = height;
+  }
+}
+
+export function getSourceEntry(tag: number): SourceEntry | undefined {
+  return registry.get(tag);
+}
+
+export function clearSourceEntry(tag: number) {
+  registry.delete(tag);
+}

package/src/index.tsx

@@ -4,7 +4,7 @@ export {
   morphCollapse,
   getViewTag,
 } from './MorphCardSource';
-export type { MorphCardSourceProps, ScaleMode } from './MorphCardSource';
+export type { MorphCardSourceProps, ResizeMode } from './MorphCardSource';
 export { MorphCardTarget } from './MorphCardTarget';
 export type { MorphCardTargetProps } from './MorphCardTarget';
 export { useMorphTarget } from './useMorphTarget';