react-native-screen-transitions 3.3.0 → 3.4.0-alpha.0

package/lib/module/shared/{hooks/lifecycle → components/screen-lifecycle/hooks}/use-open-transition.js

@@ -1,8 +1,8 @@
 "use strict";
 
 import { useLayoutEffect } from "react";
-import { animateToProgress } from "../../utils/animation/animate-to-progress";
-import { useHighRefreshRate } from "../animation/use-high-refresh-rate";
+import { animateToProgress } from "../../../utils/animation/animate-to-progress";
+import { useHighRefreshRate } from "./use-high-refresh-rate";
 
 /**
  * Calculates the initial progress value based on snap points configuration.
@@ -22,7 +22,7 @@ function getInitialProgress({
  * Handles opening animation on mount.
  * Returns activate/deactivate functions for high refresh rate.
  */
-export function useOpenTransition(current, animations) {
+export function useOpenTransition(current, animations, isFirstKey) {
   const {
     activateHighRefreshRate,
     deactivateHighRefreshRate
@@ -38,6 +38,15 @@ export function useOpenTransition(current, animations) {
       snapPoints,
       initialSnapIndex
     });
+    const target = targetProgress ?? 1;
+    if (isFirstKey) {
+      animations.targetProgress.set(target);
+      animations.progress.set(target);
+      animations.animating.set(0);
+      animations.closing.set(0);
+      animations.entering.set(1);
+      return;
+    }
     activateHighRefreshRate();
     animateToProgress({
       target: targetProgress ?? "open",

package/lib/module/shared/components/screen-lifecycle/hooks/use-open-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLayoutEffect","animateToProgress","useHighRefreshRate","getInitialProgress","snapPoints","initialSnapIndex","undefined","clampedIndex","Math","min","max","length","useOpenTransition","current","animations","isFirstKey","activateHighRefreshRate","deactivateHighRefreshRate","options","targetProgress","target","set","progress","animating","closing","entering","spec","transitionSpec","onAnimationFinish"],"sourceRoot":"../../../../../../src","sources":["shared/components/screen-lifecycle/hooks/use-open-transition.ts"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,OAAO;AAGvC,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,kBAAkB,QAAQ,yBAAyB;;AAE5D;AACA;AACA;AACA,SAASC,kBAAkBA,CAAC;EAC3BC,UAAU;EACVC;AAID,CAAC,EAAsB;EACtB,IAAI,CAACD,UAAU,EAAE;IAChB,OAAOE,SAAS;EACjB;EAEA,MAAMC,YAAY,GAAGC,IAAI,CAACC,GAAG,CAC5BD,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEL,gBAAgB,CAAC,EAC7BD,UAAU,CAACO,MAAM,GAAG,CACrB,CAAC;EACD,OAAOP,UAAU,CAACG,YAAY,CAAC;AAChC;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASK,iBAAiBA,CAChCC,OAAuB,EACvBC,UAA6B,EAC7BC,UAAmB,EAClB;EACD,MAAM;IAAEC,uBAAuB;IAAEC;EAA0B,CAAC,GAC3Df,kBAAkB,CAACW,OAAO,CAAC;;EAE5B;EACAb,eAAe,CAAC,MAAM;IACrB,MAAM;MAAEI,UAAU;MAAEC,gBAAgB,GAAG;IAAE,CAAC,GAAGQ,OAAO,CAACK,OAAO;IAC5D,MAAMC,cAAc,GAAGhB,kBAAkB,CAAC;MAAEC,UAAU;MAAEC;IAAiB,CAAC,CAAC;IAC3E,MAAMe,MAAM,GAAGD,cAAc,IAAI,CAAC;IAElC,IAAIJ,UAAU,EAAE;MACfD,UAAU,CAACK,cAAc,CAACE,GAAG,CAACD,MAAM,CAAC;MACrCN,UAAU,CAACQ,QAAQ,CAACD,GAAG,CAACD,MAAM,CAAC;MAC/BN,UAAU,CAACS,SAAS,CAACF,GAAG,CAAC,CAAC,CAAC;MAC3BP,UAAU,CAACU,OAAO,CAACH,GAAG,CAAC,CAAC,CAAC;MACzBP,UAAU,CAACW,QAAQ,CAACJ,GAAG,CAAC,CAAC,CAAC;MAC1B;IACD;IAEAL,uBAAuB,CAAC,CAAC;IACzBf,iBAAiB,CAAC;MACjBmB,MAAM,EAAED,cAAc,IAAI,MAAM;MAChCO,IAAI,EAAEb,OAAO,CAACK,OAAO,CAACS,cAAc;MACpCb,UAAU;MACVc,iBAAiB,EAAEX;IACpB,CAAC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAED,uBAAuB;IAAEC;EAA0B,CAAC;AAC9D","ignoreList":[]}

package/lib/module/shared/{hooks/lifecycle → components/screen-lifecycle/hooks}/use-screen-events.js

@@ -2,8 +2,8 @@
 
 import { useEffect } from "react";
 import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import { HistoryStore } from "../../stores/history.store";
-import useStableCallback from "../use-stable-callback";
+import useStableCallback from "../../../hooks/use-stable-callback";
+import { HistoryStore } from "../../../stores/history.store";
 function hasSnapPoints(descriptor) {
   const snapPoints = descriptor.options?.snapPoints;
   return Boolean(snapPoints && snapPoints.length > 0);

package/lib/module/shared/components/screen-lifecycle/hooks/use-screen-events.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","runOnJS","useAnimatedReaction","useStableCallback","HistoryStore","hasSnapPoints","descriptor","snapPoints","options","Boolean","length","isLeafScreen","navigation","state","getState","index","currentRoute","routes","shouldTrackInHistory","useScreenEvents","current","previous","animations","navigatorKey","key","focus","unsubscribe","addListener","handleBlur","prevNavigatorKey","closing","get","prevClosing"],"sourceRoot":"../../../../../../src","sources":["shared/components/screen-lifecycle/hooks/use-screen-events.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,OAAO,EAAEC,mBAAmB,QAAQ,yBAAyB;AACtE,OAAOC,iBAAiB,MAAM,oCAAoC;AAGlE,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,SAASC,aAAaA,CAACC,UAA0B,EAAW;EAC3D,MAAMC,UAAU,GAAGD,UAAU,CAACE,OAAO,EAAED,UAAU;EACjD,OAAOE,OAAO,CAACF,UAAU,IAAIA,UAAU,CAACG,MAAM,GAAG,CAAC,CAAC;AACpD;;AAEA;AACA;AACA;AACA;AACA,SAASC,YAAYA,CAACC,UAAwC,EAAW;EACxE,MAAMC,KAAK,GAAGD,UAAU,CAACE,QAAQ,CAAC,CAAC;EACnC,MAAMC,KAAK,GAAGF,KAAK,EAAEE,KAAK,IAAI,CAAC,CAAC;EAChC,MAAMC,YAAY,GAAGH,KAAK,EAAEI,MAAM,GAAGF,KAAK,CAAC;EAC3C,IAAI,CAACC,YAAY,EAAE,OAAO,KAAK;EAC/B,OAAO,EAAE,OAAO,IAAIA,YAAY,CAAC;AAClC;AAEA,SAASE,oBAAoBA,CAACZ,UAA0B,EAAW;EAClE,OAAOD,aAAa,CAACC,UAAU,CAAC,IAAIK,YAAY,CAACL,UAAU,CAACM,UAAU,CAAC;AACxE;;AAEA;AACA;AACA;AACA,OAAO,SAASO,eAAeA,CAC9BC,OAAuB,EACvBC,QAAoC,EACpCC,UAA6B,EAC5B;EACD,MAAMC,YAAY,GAAGH,OAAO,CAACR,UAAU,CAACE,QAAQ,CAAC,CAAC,EAAEU,GAAG,IAAI,EAAE;;EAE7D;EACA;EACAxB,SAAS,CAAC,MAAM;IACf;IACA,IAAIkB,oBAAoB,CAACE,OAAO,CAAC,EAAE;MAClChB,YAAY,CAACqB,KAAK,CAACL,OAAO,EAAEG,YAAY,CAAC;IAC1C;;IAEA;IACA,MAAMG,WAAW,GAAGN,OAAO,CAACR,UAAU,CAACe,WAAW,GAAG,OAAO,EAAE,MAAM;MACnE,IAAIT,oBAAoB,CAACE,OAAO,CAAC,EAAE;QAClChB,YAAY,CAACqB,KAAK,CAACL,OAAO,EAAEG,YAAY,CAAC;MAC1C;IACD,CAAC,CAAC;IAEF,OAAO,MAAMG,WAAW,GAAG,CAAC;EAC7B,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAME,UAAU,GAAGzB,iBAAiB,CAAC,MAAM;IAC1C,IAAIkB,QAAQ,IAAIH,oBAAoB,CAACG,QAAQ,CAAC,EAAE;MAC/C,MAAMQ,gBAAgB,GAAGR,QAAQ,CAACT,UAAU,CAACE,QAAQ,CAAC,CAAC,EAAEU,GAAG,IAAI,EAAE;MAClEpB,YAAY,CAACqB,KAAK,CAACJ,QAAQ,EAAEQ,gBAAgB,CAAC;IAC/C;EACD,CAAC,CAAC;EAEF3B,mBAAmB,CAClB,MAAMoB,UAAU,CAACQ,OAAO,CAACC,GAAG,CAAC,CAAC,EAC9B,CAACD,OAAO,EAAEE,WAAW,KAAK;IACzB,IAAIF,OAAO,IAAI,CAACE,WAAW,EAAE;MAC5B/B,OAAO,CAAC2B,UAAU,CAAC,CAAC,CAAC;IACtB;EACD,CACD,CAAC;AACF","ignoreList":[]}

package/lib/module/shared/components/screen-lifecycle/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import { useDescriptorDerivations, useDescriptors } from "../../providers/screen/descriptors";
+import { AnimationStore } from "../../stores/animation.store";
+import { useCloseTransition } from "./hooks/use-close-transition";
+import { useOpenTransition } from "./hooks/use-open-transition";
+import { useScreenEvents } from "./hooks/use-screen-events";
+/**
+ * Unified lifecycle controller for all stack types.
+ * Reads current/previous descriptors from DescriptorsProvider context.
+ */
+export const ScreenLifecycle = ({
+  children
+}) => {
+  const {
+    current,
+    previous
+  } = useDescriptors();
+  const {
+    isFirstKey
+  } = useDescriptorDerivations();
+  const animations = AnimationStore.getRouteAnimations(current.route.key);
+  const {
+    activateHighRefreshRate,
+    deactivateHighRefreshRate
+  } = useOpenTransition(current, animations, isFirstKey);
+  useCloseTransition(current, animations, activateHighRefreshRate, deactivateHighRefreshRate);
+  useScreenEvents(current, previous, animations);
+  return children;
+};
+//# sourceMappingURL=index.js.map

package/lib/module/shared/components/screen-lifecycle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDescriptorDerivations","useDescriptors","AnimationStore","useCloseTransition","useOpenTransition","useScreenEvents","ScreenLifecycle","children","current","previous","isFirstKey","animations","getRouteAnimations","route","key","activateHighRefreshRate","deactivateHighRefreshRate"],"sourceRoot":"../../../../../src","sources":["shared/components/screen-lifecycle/index.tsx"],"mappings":";;AAAA,SACCA,wBAAwB,EACxBC,cAAc,QACR,oCAAoC;AAC3C,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,eAAe,QAAQ,2BAA2B;AAM3D;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvD,MAAM;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGR,cAAc,CAAC,CAAC;EAC9C,MAAM;IAAES;EAAW,CAAC,GAAGV,wBAAwB,CAAC,CAAC;EACjD,MAAMW,UAAU,GAAGT,cAAc,CAACU,kBAAkB,CAACJ,OAAO,CAACK,KAAK,CAACC,GAAG,CAAC;EAEvE,MAAM;IAAEC,uBAAuB;IAAEC;EAA0B,CAAC,GAC3DZ,iBAAiB,CAACI,OAAO,EAAEG,UAAU,EAAED,UAAU,CAAC;EAEnDP,kBAAkB,CACjBK,OAAO,EACPG,UAAU,EACVI,uBAAuB,EACvBC,yBACD,CAAC;EAEDX,eAAe,CAACG,OAAO,EAAEC,QAAQ,EAAEE,UAAU,CAAC;EAE9C,OAAOJ,QAAQ;AAChB,CAAC","ignoreList":[]}

package/lib/module/shared/configs/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
 import { DraggableCard, ElasticCard, SharedAppleMusic, SharedIGImage, SharedXImage, SlideFromBottom, SlideFromTop, ZoomIn } from "./presets";
-import { DefaultSpec } from "./specs";
+import { DefaultSnapSpec, DefaultSpec, FlingSpec } from "./specs";
 export const Specs = {
-  DefaultSpec
+  DefaultSpec,
+  DefaultSnapSpec,
+  FlingSpec
 };
 export const Presets = {
   SlideFromTop,

package/lib/module/shared/configs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["DraggableCard","ElasticCard","SharedAppleMusic","SharedIGImage","SharedXImage","SlideFromBottom","SlideFromTop","ZoomIn","DefaultSpec","Specs","Presets"],"sourceRoot":"../../../../src","sources":["shared/configs/index.ts"],"mappings":";;AAAA,SACCA,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,aAAa,EACbC,YAAY,EACZC,eAAe,EACfC,YAAY,EACZC,MAAM,QACA,WAAW;AAClB,SAASC,WAAW,QAAQ,SAAS;AAErC,OAAO,MAAMC,KAAK,GAAG;EACpBD;AACD,CAAC;AAED,OAAO,MAAME,OAAO,GAAG;EACtBJ,YAAY;EACZC,MAAM;EACNF,eAAe;EACfL,aAAa;EACbC,WAAW;EACXE,aAAa;EACbD,gBAAgB;EAChBE;AACD,CAAC","ignoreList":[]}
+{"version":3,"names":["DraggableCard","ElasticCard","SharedAppleMusic","SharedIGImage","SharedXImage","SlideFromBottom","SlideFromTop","ZoomIn","DefaultSnapSpec","DefaultSpec","FlingSpec","Specs","Presets"],"sourceRoot":"../../../../src","sources":["shared/configs/index.ts"],"mappings":";;AAAA,SACCA,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,aAAa,EACbC,YAAY,EACZC,eAAe,EACfC,YAAY,EACZC,MAAM,QACA,WAAW;AAClB,SAASC,eAAe,EAAEC,WAAW,EAAEC,SAAS,QAAQ,SAAS;AAEjE,OAAO,MAAMC,KAAK,GAAG;EACpBF,WAAW;EACXD,eAAe;EACfE;AACD,CAAC;AAED,OAAO,MAAME,OAAO,GAAG;EACtBN,YAAY;EACZC,MAAM;EACNF,eAAe;EACfL,aAAa;EACbC,WAAW;EACXE,aAAa;EACbD,gBAAgB;EAChBE;AACD,CAAC","ignoreList":[]}

package/lib/module/shared/configs/presets.js

@@ -2,6 +2,8 @@
 
 import { Platform } from "react-native";
 import { Extrapolation, interpolate, interpolateColor } from "react-native-reanimated";
+import { NAVIGATION_CONTAINER_STYLE_ID, NAVIGATION_MASK_STYLE_ID } from "../constants";
+import { normalizeInterpolatedStyle } from "../utils/normalize-interpolated-style";
 import { DefaultSpec } from "./specs";
 const platform = Platform.OS;
 export const SlideFromTop = (config = {}) => {
@@ -22,10 +24,12 @@ export const SlideFromTop = (config = {}) => {
 
       const y = interpolate(progress, [0, 1, 2], [-height, 0, height]);
       return {
-        contentStyle: {
-          transform: [{
-            translateY: y
-          }]
+        content: {
+          style: {
+            transform: [{
+              translateY: y
+            }]
+          }
         }
       };
     },
@@ -49,11 +53,13 @@ export const ZoomIn = (config = {}) => {
       const scale = interpolate(progress, [0, 1, 2], [0.5, 1, 0.5], Extrapolation.CLAMP);
       const opacity = interpolate(progress, [0, 1, 2], [0, 1, 0], Extrapolation.CLAMP);
       return {
-        contentStyle: {
-          transform: [{
-            scale
-          }],
-          opacity
+        content: {
+          style: {
+            transform: [{
+              scale
+            }],
+            opacity
+          }
         }
       };
     },
@@ -82,10 +88,12 @@ export const SlideFromBottom = (config = {}) => {
 
       const y = interpolate(progress, [0, 1, 2], [height, 0, -height]);
       return {
-        contentStyle: {
-          transform: [{
-            translateY: y
-          }]
+        content: {
+          style: {
+            transform: [{
+              translateY: y
+            }]
+          }
         }
       };
     },
@@ -115,25 +123,33 @@ export const DraggableCard = (config = {}) => {
       const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.75]);
 
       /** Vertical */
-      const translateY = interpolate(current.gesture.normalizedY, [-1, 1], [-screen.height * 0.5, screen.height * 0.5], "clamp");
+      const translateY = interpolate(current.gesture.normY, [-1, 1], [-screen.height * 0.5, screen.height * 0.5]);
 
       /** Horizontal */
-      const translateX = interpolate(current.gesture.normalizedX, [-1, 1], [-screen.width * 0.5, screen.width * 0.5], "clamp");
+      const translateX = interpolate(current.gesture.normX, [-1, 1], [-screen.width * 0.5, screen.width * 0.5]);
       return {
-        contentStyle: {
-          transform: [{
-            scale
-          }, {
-            translateY: translateY
-          }, {
-            translateX
-          }]
+        content: {
+          style: {
+            transform: [{
+              scale
+            }, {
+              translateY: translateY
+            }, {
+              translateX
+            }]
+          }
         }
       };
     },
     transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
+      open: {
+        ...DefaultSpec,
+        overshootClamping: false
+      },
+      close: {
+        ...DefaultSpec,
+        overshootClamping: false
+      }
     },
     ...config
   };
@@ -164,29 +180,39 @@ export const ElasticCard = (config = {
       // applies to current screen
       const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
       const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
-      const translateX = interpolate(current.gesture.normalizedX, [-1, 0, 1], [-maxElasticityX, 0, maxElasticityX], "clamp");
-      const translateY = interpolate(current.gesture.normalizedY, [-1, 0, 1], [-maxElasticityY, 0, maxElasticityY], "clamp");
+      const translateX = interpolate(current.gesture.normX, [-1, 0, 1], [-maxElasticityX, 0, maxElasticityX], "clamp");
+      const translateY = interpolate(current.gesture.normY, [-1, 0, 1], [-maxElasticityY, 0, maxElasticityY], "clamp");
 
       // applies to unfocused screen ( previous screen )
       const overlayColor = interpolateColor(progress, [0, 1], ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]);
       return {
-        contentStyle: {
-          transform: [{
-            scale
-          }, {
-            translateX
-          }, {
-            translateY
-          }]
+        content: {
+          style: {
+            transform: [{
+              scale
+            }, {
+              translateX
+            }, {
+              translateY
+            }]
+          }
         },
-        backdropStyle: {
-          backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)"
+        backdrop: {
+          style: {
+            backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)"
+          }
         }
       };
     },
     transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
+      open: {
+        ...DefaultSpec,
+        overshootClamping: false
+      },
+      close: {
+        ...DefaultSpec,
+        overshootClamping: false
+      }
     },
     ...config
   };
@@ -215,91 +241,85 @@ export const SharedIGImage = ({
     }) => {
       "worklet";
 
-      const normX = active.gesture.normalizedX;
-      const normY = active.gesture.normalizedY;
-
-      // animations for both bounds
+      const normX = active.gesture.normX;
+      const normY = active.gesture.normY;
       const dragX = interpolate(normX, [-1, 0, 1], [-width * 0.7, 0, width * 0.7], "clamp");
       const dragY = interpolate(normY, [-1, 0, 1], [-height * 0.4, 0, height * 0.4], "clamp");
       const dragXScale = interpolate(normX, [0, 1], [1, 0.8]);
       const dragYScale = interpolate(normY, [0, 1], [1, 0.8]);
-      const boundValues = bounds({
+      const navigationStyles = bounds({
         id: sharedBoundTag,
-        method: focused ? "content" : "transform",
-        scaleMode: "uniform",
-        raw: true
-      });
+        scaleMode: "uniform"
+      }).navigation.zoom();
+
+      // Extract raw style values from bounds result (legacy format)
+      const sourceStyle = navigationStyles[sharedBoundTag];
+      const containerStyle = navigationStyles[NAVIGATION_CONTAINER_STYLE_ID];
+      const maskStyle = navigationStyles[NAVIGATION_MASK_STYLE_ID];
 
-      // focused specific animations
+      // Normalize bounds result to new slot format for spreading
+      const normalizedNav = normalizeInterpolatedStyle(navigationStyles).result;
       if (focused) {
-        const maskedValues = bounds({
-          id: sharedBoundTag,
-          space: "absolute",
-          target: "fullscreen",
-          method: "size",
-          raw: true
-        });
         return {
-          backdropStyle: {
-            backgroundColor: "black",
-            opacity: interpolate(progress, [0, 1], [0, 0.5])
+          ...normalizedNav,
+          backdrop: {
+            style: {
+              backgroundColor: "black",
+              opacity: interpolate(progress, [0, 1], [0, 0.5])
+            }
           },
-          contentStyle: {
+          content: {
+            style: {
+              transform: [{
+                translateX: dragX
+              }, {
+                translateY: dragY
+              }, {
+                scale: dragXScale
+              }, {
+                scale: dragYScale
+              }]
+            }
+          },
+          [NAVIGATION_CONTAINER_STYLE_ID]: containerStyle ? {
+            style: {
+              ...containerStyle,
+              transform: [...(containerStyle.transform ?? []), {
+                translateX: dragX * 0.2
+              }, {
+                translateY: dragY * 0.2
+              }]
+            }
+          } : undefined,
+          [NAVIGATION_MASK_STYLE_ID]: maskStyle ? {
+            style: {
+              ...maskStyle,
+              borderRadius: interpolate(progress, [0, 1], [0, 24])
+            }
+          } : undefined
+        };
+      }
+      return {
+        ...normalizedNav,
+        content: {
+          style: {
+            ...(normalizedNav.content?.style ?? {}),
+            pointerEvents: current.gesture.dismissing ? "none" : "auto"
+          }
+        },
+        [sharedBoundTag]: {
+          style: {
+            ...(sourceStyle ?? {}),
             transform: [{
-              translateX: dragX
-            }, {
-              translateY: dragY
+              translateX: dragX || 0
             }, {
+              translateY: dragY || 0
+            }, ...(sourceStyle?.transform ?? []), {
               scale: dragXScale
             }, {
               scale: dragYScale
             }]
-          },
-          _ROOT_CONTAINER: {
-            transform: [{
-              translateX: boundValues.translateX || 0
-            }, {
-              translateY: boundValues.translateY || 0
-            },
-            //@ts-expect-error
-            {
-              scale: boundValues.scale || 1
-            }]
-          },
-          _ROOT_MASKED: {
-            width: maskedValues.width,
-            height: maskedValues.height,
-            transform: [{
-              translateX: maskedValues.translateX || 0
-            }, {
-              translateY: maskedValues.translateY || 0
-            }],
-            borderRadius: interpolate(progress, [0, 1], [0, 24])
           }
-        };
-      }
-      return {
-        contentStyle: {
-          pointerEvents: current.gesture.isDismissing ? "none" : "auto"
-        },
-        [sharedBoundTag]: {
-          transform: [{
-            translateX: dragX || 0
-          }, {
-            translateY: dragY || 0
-          }, {
-            translateX: boundValues.translateX || 0
-          }, {
-            translateY: boundValues.translateY || 0
-          }, {
-            scaleX: boundValues.scaleX || 1
-          }, {
-            scaleY: boundValues.scaleY || 1
-          }, {
-            scale: dragXScale
-          }, {
-            scale: dragYScale
-          }]
         }
       };
     },
@@ -345,8 +365,8 @@ export const SharedAppleMusic = ({
     }) => {
       "worklet";
 
-      const normX = active.gesture.normalizedX;
-      const normY = active.gesture.normalizedY;
+      const normX = active.gesture.normX;
+      const normY = active.gesture.normY;
       const initialDirection = active.gesture.direction;
 
       /**
@@ -405,40 +425,46 @@ export const SharedAppleMusic = ({
           shadowColor: "#000"
         };
         return {
-          contentStyle: {
-            pointerEvents: current.animating ? "none" : "auto",
-            transform: [{
-              translateX: dragX || 0
-            }, {
-              translateY: dragY || 0
-            }, {
-              scale: dragXScale
-            }, {
-              scale: dragYScale
-            }],
-            opacity,
-            ...(platform === "ios" ? IOSShadowStyle : AndroidShadowStyle)
+          content: {
+            style: {
+              pointerEvents: current.animating ? "none" : "auto",
+              transform: [{
+                translateX: dragX || 0
+              }, {
+                translateY: dragY || 0
+              }, {
+                scale: dragXScale
+              }, {
+                scale: dragYScale
+              }],
+              opacity,
+              ...(platform === "ios" ? IOSShadowStyle : AndroidShadowStyle)
+            }
           },
           _ROOT_CONTAINER: {
-            transform: [{
-              translateX: boundValues.translateX || 0
-            }, {
-              translateY: boundValues.translateY || 0
-            },
-            //@ts-expect-error
-            {
-              scale: boundValues.scale || 1
-            }]
+            style: {
+              transform: [{
+                translateX: boundValues.translateX || 0
+              }, {
+                translateY: boundValues.translateY || 0
+              },
+              //@ts-expect-error
+              {
+                scale: boundValues.scale || 1
+              }]
+            }
           },
           _ROOT_MASKED: {
-            width: maskedValues.width,
-            height: maskedValues.height,
-            transform: [{
-              translateX: maskedValues.translateX || 0
-            }, {
-              translateY: maskedValues.translateY || 0
-            }],
-            borderRadius: interpolate(progress, [0, 1], [0, 24])
+            style: {
+              width: maskedValues.width,
+              height: maskedValues.height,
+              transform: [{
+                translateX: maskedValues.translateX || 0
+              }, {
+                translateY: maskedValues.translateY || 0
+              }],
+              borderRadius: interpolate(progress, [0, 1], [0, 24])
+            }
           }
         };
       }
@@ -456,31 +482,35 @@ export const SharedAppleMusic = ({
       const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
       return {
         [sharedBoundTag]: {
-          transform: [{
-            translateX: dragX || 0
-          }, {
-            translateY: dragY || 0
-          }, {
-            translateX: scaledBoundTranslateX
-          }, {
-            translateY: scaledBoundTranslateY
-          }, {
-            scale: dragXScale
-          }, {
-            scale: dragYScale
-          }, {
-            scaleX: scaledBoundScaleX
-          }, {
-            scaleY: scaledBoundScaleY
-          }],
-          opacity,
-          zIndex: current.animating ? 999 : -1,
-          position: "relative"
+          style: {
+            transform: [{
+              translateX: dragX || 0
+            }, {
+              translateY: dragY || 0
+            }, {
+              translateX: scaledBoundTranslateX
+            }, {
+              translateY: scaledBoundTranslateY
+            }, {
+              scale: dragXScale
+            }, {
+              scale: dragYScale
+            }, {
+              scaleX: scaledBoundScaleX
+            }, {
+              scaleY: scaledBoundScaleY
+            }],
+            opacity,
+            zIndex: current.animating ? 999 : -1,
+            position: "relative"
+          }
         },
-        contentStyle: {
-          transform: [{
-            scale: contentScale
-          }]
+        content: {
+          style: {
+            transform: [{
+              scale: contentScale
+            }]
+          }
         }
       };
     },
@@ -527,51 +557,40 @@ export const SharedXImage = ({
     }) => {
       "worklet";
 
-      // twitter doesn't animate the unfocused screen
       if (!focused) return {};
-      const boundValues = bounds({
-        id: sharedBoundTag,
-        method: "transform",
-        raw: true
-      });
+      const navigationStyles = bounds({
+        id: sharedBoundTag
+      }).navigation.zoom();
+      const maskStyle = navigationStyles[NAVIGATION_MASK_STYLE_ID];
 
-      // content styles
-      const dragY = interpolate(current.gesture.normalizedY, [-1, 0, 1], [-screen.height, 0, screen.height]);
-
-      // dynamically changes direction based on the drag direction
+      // Normalize bounds result to new slot format for spreading
+      const normalizedNav = normalizeInterpolatedStyle(navigationStyles).result;
+      const dragY = interpolate(current.gesture.normY, [-1, 0, 1], [-screen.height, 0, screen.height]);
       const contentY = interpolate(progress, [0, 1], [dragY >= 0 ? screen.height : -screen.height, 0]);
-      const overlayClr = interpolateColor(current.progress - Math.abs(current.gesture.normalizedY), [0, 1], ["rgba(0,0,0,0)", "rgba(0,0,0,1)"]);
+      const overlayClr = interpolateColor(current.progress - Math.abs(current.gesture.normY), [0, 1], ["rgba(0,0,0,0)", "rgba(0,0,0,1)"]);
       const borderRadius = interpolate(current.progress, [0, 1], [12, 0]);
-
-      // bound styles - only enter animation
-      const x = !current.closing ? boundValues.translateX : 0;
-      const y = !current.closing ? boundValues.translateY : 0;
-      const scaleX = !current.closing ? boundValues.scaleX : 1;
-      const scaleY = !current.closing ? boundValues.scaleY : 1;
       return {
-        [sharedBoundTag]: {
-          transform: [{
-            translateX: x
-          }, {
-            translateY: y
-          }, {
-            scaleX: scaleX
-          }, {
-            scaleY: scaleY
-          }],
-          borderRadius,
-          overflow: "hidden"
-        },
-        contentStyle: {
-          transform: [{
-            translateY: contentY
-          }, {
-            translateY: dragY
-          }],
-          pointerEvents: current.animating ? "none" : "auto"
+        ...normalizedNav,
+        [NAVIGATION_MASK_STYLE_ID]: maskStyle ? {
+          style: {
+            ...maskStyle,
+            borderRadius
+          }
+        } : undefined,
+        content: {
+          style: {
+            transform: [{
+              translateY: contentY
+            }, {
+              translateY: dragY
+            }],
+            pointerEvents: current.animating ? "none" : "auto"
+          }
         },
-        backdropStyle: {
-          backgroundColor: overlayClr
+        backdrop: {
+          style: {
+            backgroundColor: overlayClr
+          }
         }
       };
     },