react-native-screen-transitions 2.0.6 → 2.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,9 @@
 # react-native-screen-transitions
 
+
 | iOS | Android |
 |---|---|
-| <video src="https://github.com/user-attachments/assets/81f39391-80c0-4ce4-b6ff-76de85d2cf03" width="300" height="600" controls></video> | <video src="https://github.com/user-attachments/assets/c2b4c6ca-2b0c-4cf4-a164-f7e68cee0c32" width="300" controls></video> |
+| <video src="https://github.com/user-attachments/assets/c0d17b8f-7268-421c-9051-e242f8ddca76" width="300" height="600" controls></video> | <video src="https://github.com/user-attachments/assets/3f8d5fb1-96d2-4fe3-860d-62f6fb5a687e" width="300" controls></video> |
 
 
 **WIP**: This package is a work-in-progress. It provides customizable screen transition animations for React Native apps, primarily designed for use with `expo-router` and `react-navigation`. It supports gestures, predefined presets, and custom animations, making it easy to add polished transitions to your navigation flows.
@@ -84,6 +85,7 @@ All the usual native-stack options are available, plus the following extras:
 | `gestureVelocityImpact` | `number` | How much the gesture’s velocity affects dismissal. |
 | `gestureResponseDistance` | `number` | Distance from screen where the gesture is recognized. |
 | `gestureDrivesProgress` | `boolean` | Whether the gesture directly drives the transition progress. |
+| `gestureActivationArea` | `GestureActivationArea` | Where a gesture may start. `'edge' | 'screen'` or per-side `{ left|right|top|bottom: 'edge'|'screen' }`. |
 
 ### Renamed native options (extended stack)
 
@@ -122,7 +124,43 @@ The incoming screen automatically controls the previous screen.
       ...Transition.presets.SlideFromBottom(),
     }}
   />
-</Stack>
+ </Stack>
+```
+
+#### Shared element presets (new)
+
+Ready-made presets for common shared-element patterns. These leverage the bounds API under the hood. Tag your views with `sharedBoundTag` on both screens.
+
+```tsx
+<Stack.Screen name="feed" />
+<Stack.Screen
+  name="post"
+  options={{
+    ...Transition.presets.SharedIGImage(),
+  }}
+/>
+```
+
+Other presets: `SharedAppleMusic()`, `SharedXImage()`.
+
+Note: Masked container required
+
+- For `SharedIGImage` and `SharedAppleMusic`, wrap the next screen with `Transition.MaskedView` as the first element so the preset can animate `_ROOT_CONTAINER` and `_ROOT_MASKED` correctly.
+- Install the mask package:
+  - Expo: `npx expo install @react-native-masked-view/masked-view`
+  - Bare RN: `npm i @react-native-masked-view/masked-view` (then iOS: `cd ios && pod install`)
+- `Transition.MaskedView` lazy-loads the native mask and falls back to a plain `View` if missing, but the mask is required for the full shared effect.
+
+Minimal usage on the destination screen:
+
+```tsx
+export default function PostScreen() {
+  return (
+    <Transition.MaskedView style={{ flex: 1, backgroundColor: 'white' }}>
+      {/* screen content, including the destination bound */}
+    </Transition.MaskedView>
+  );
+}
 ```
 
 ### Navigator-level custom animations
@@ -136,7 +174,7 @@ Instead of presets, you can define a custom transition directly on the screen’
 - `next` – state for the next screen (may be `undefined`).
 - `layouts.screen` – `{ width, height }` of the container.
 - `insets` – `{ top, right, bottom, left }` safe-area insets.
-- `bounds(id)` – helper to compute shared-element transforms (see IntelliSense for chainable methods).
+- `bounds(options)` – compute shared-bound transforms/styles or raw values for a given bound. See "Bounds" below.
 - `activeBoundId`	– id of the active bound.
 - `focused` – state of the current screen
 
@@ -213,10 +251,10 @@ const FlatList = Transition.FlatList;
 
 // Or wrap any list you like
 const TransitionFlashList =
-  Transition.createTransitionAwareScrollable(FlashList, { isScrollable: true });
+  Transition.createTransitionAwareComponent(FlashList, { isScrollable: true });
 
 const TransitionLegendList =
-  Transition.createTransitionAwareScrollable(LegendList, { isScrollable: true} );
+  Transition.createTransitionAwareComponent(LegendList, { isScrollable: true} );
 ```
 
 Enable the gesture on the screen:
@@ -253,108 +291,94 @@ Gesture rules (handled automatically):
 These rules apply **only when the screen contains a scrollable**.
 If no scroll view is present, the gesture can begin from **anywhere on the screen**—not restricted to the edges.
 
-## Bounds (measure-driven screen transitions)
+### Gesture activation area
 
-Bounds let you animate **any component** between two screens by measuring its start and end positions.
-They are **not shared elements**—they’re just measurements.
-Tag the component you want to animate with `sharedBoundTag`, then describe how it should move when the screen transition starts.
-
-1. Tag the source component
+Control where gestures can start using `gestureActivationArea` on the screen options:
 
 ```tsx
-<Transition.View sharedBoundTag="hero" style={{ width: 100, height: 100 }}>
-  <Image source={uri} style={{ width: '100%', height: '100%' }} resizeMode="cover" />
-</Transition.View>
+// Gesture must start from any screen edge (all sides)
+gestureActivationArea: 'edge'
+
+// Allow vertical drags anywhere, horizontal drags only from the left edge
+gestureDirection: ['vertical', 'horizontal']
+gestureActivationArea: { top: 'screen', left: 'edge' }
 ```
 
-2. Tag the destination component (same id)
+## Bounds (measure-driven screen transitions)
+
+Bounds let you animate any component between two screens by measuring its start and end positions. They are not shared elements — just measurements. Tag components with `sharedBoundTag` on both screens, then compute styles using `bounds(options)`.
+
+1) Tag source and destination
 
 ```tsx
-<Transition.View sharedBoundTag="hero" style={{ width: 200, height: 200 }}>
-  <Image source={uri} style={{ width: '100%', height: '100%' }} resizeMode="cover" />
-</Transition.View>
+<Transition.View sharedBoundTag="hero" style={{ width: 100, height: 100 }} />
+// ... next screen
+<Transition.View sharedBoundTag="hero" style={{ width: 200, height: 200 }} />
 ```
 
-3. Drive the animation in `screenStyleInterpolator`
+2) Drive the animation with the object API
 
 ```tsx
-screenStyleInterpolator: ({
-  activeBoundId,
-  bounds,
-  focused,
-  current,
-  next,
-}) => {
+screenStyleInterpolator: ({ activeBoundId, bounds }) => {
   "worklet";
 
-  const animatedBoundStyles = bounds()
-    .relative()
-    .transform()
-    .build();
+  const styles = bounds({
+    method: "transform",      // "transform" | "size" | "content"
+    space: "relative",        // "relative" | "absolute"
+    scaleMode: "match",       // "match" | "none" | "uniform"
+    anchor: "center",         // see anchors below
+    // target: "bound" | "fullscreen" | { x, y, width, height, pageX, pageY }
+    // gestures: { x?: number; y?: number }
+  });
 
-  return {
-    [activeBoundId]: animatedBoundStyles,
-  };
-};
+  return { [activeBoundId]: styles };
+}
 ```
 
-That’s it—the bounds helper works alongside focused and unfocused screens.
-For further customization, separate logic by the `focused` prop:
+3) Raw values when you need them
 
 ```tsx
-screenStyleInterpolator: ({
-  activeBoundId,
-  bounds,
-  focused,
-  current,
-  next,
-}) => {
-  "worklet";
-
+const raw = bounds({ method: "transform", raw: true });
+// { translateX, translateY, scaleX, scaleY }
+```
 
-  if (focused) {
-    const focusedBoundStyles = bounds()
-      .relative()
-      .transform()
-      .build();
+Or for size/content methods:
 
-    return {
-      [activeBoundId]: focusedBoundStyles,
-    };
-  }
+```tsx
+const toSize = bounds({ method: "size", target: "fullscreen", space: "absolute", raw: true });
+// { width, height, translateX, translateY }
 
-  return {}
-};
+const content = bounds({ method: "content", raw: true });
+// { translateX, translateY, scale }
 ```
 
+Anchors and scale
 
-### Choosing the right modifier
+- `anchor`: "topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"
+- `scaleMode`: "match" | "none" | "uniform"
 
-| Modifier | When to use |
-|---|---|
-| `gestures({x,y})` | Sync the bound with live gesture deltas (drag, swipe). |
-| `toFullscreen()` | Destination has no `sharedBoundTag`; animate to full-screen size. |
-| `absolute()` | Element is not constrained by parent layout (uses pageX/pageY). |
-| `relative()` | Element is inside layout constraints (default). |
-| `transform()` | Animate with `translateX/Y` + `scaleX/Y` (default). |
-| `size()` | Animate `translateX/Y` + `width/height` (no scale). |
-| `content()` | Center the container so its bound aligns with the source at progress start. |
-| `contentFill()` / `contentFit()` | Control how the content scales inside the container. |
-| `build()` | Finalize the animated style object. |
+Targets and space
+
+- `target`: "bound" (default), "fullscreen", or explicit `{ x, y, width, height, pageX, pageY }`
+- `space`: "relative" (within layout constraints) or "absolute" (window coordinates)
 
-### Quick access: `bounds.get()`
+Gestures (sync focused screen deltas)
 
-Need the raw measurements or styles for a specific bound?
-Call `bounds.get(boundId, phase)` to retrieve the exact dimensions and style object for any bound tag and screen phase (`current`, `next`, or `previous`).
+- `gestures`: `{ x?: number; y?: number }` adds live drag offsets to the computed transforms
+
+Deprecated builder API
+
+- The old chainable builder (`bounds().relative().transform().build()`) is deprecated. Migrate to the object form shown above. The builder remains temporarily for backward compatibility.
+
+Quick access: `bounds.get()`
+
+Use `bounds.get(id?, phase?)` to retrieve raw measurements and the resolved style for any bound in a given phase (`current`, `next`, `previous`).
 
 ```tsx
-const heroMetrics = bounds.get('hero', 'current');
-// heroMetrics = { bounds: { x, y, width, height, pageX, pageY }, styles: { ... } }
+const { bounds: metrics, styles } = bounds.get('hero', 'current');
 ```
 
-Use this when you want explicit control over which bound’s data you animate, regardless of the current screen focus.
-
-### Animating individual components with `styleId`
+## Animating individual components with `styleId`
 
 Use `styleId` to animate a single view inside a screen.
 
@@ -383,7 +407,6 @@ The red square fades in as the screen opens.
 ## Known Issues
 
 - **Delayed Touch Events** – There’s a noticeable delay in touch events, likely caused by the `beforeRemove` listener in the native stack. If this affects your app, please hold off on using this package until a fix is available.
-- **Deeply nested navigators with scrollables** – Behavior is currently unstable. We recommend using programmatic dismissal for deeply nested navigators that contain scrollables, as the gesture-driven dismissal logic needs an overhaul.
 
 
 ## Support and Development

package/lib/commonjs/components/{bounds-activator.js → bound-capture.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BoundActivator = void 0;
+exports.BoundCapture = void 0;
 var _react = require("react");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _bounds = require("../stores/bounds");
 var _jsxRuntime = require("react/jsx-runtime");
-const BoundActivator = ({
+const BoundCapture = ({
   sharedBoundTag,
   children,
   measure
@@ -29,5 +29,5 @@ const BoundActivator = ({
     children: children
   });
 };
-exports.BoundActivator = BoundActivator;
-//# sourceMappingURL=bounds-activator.js.map
+exports.BoundCapture = BoundCapture;
+//# sourceMappingURL=bound-capture.js.map

package/lib/commonjs/components/bound-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeGestureHandler","_bounds","_jsxRuntime","BoundCapture","sharedBoundTag","children","measure","tapGesture","useMemo","Gesture","Tap","onStart","Bounds","setActiveBoundId","jsx","GestureDetector","gesture","exports"],"sourceRoot":"../../../src","sources":["components/bound-capture.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,0BAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA0C,IAAAG,WAAA,GAAAH,OAAA;AAQnC,MAAMI,YAAY,GAAGA,CAAC;EAC5BC,cAAc;EACdC,QAAQ;EACRC;AACoB,CAAC,KAAK;EAC1B,MAAMC,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,OAAOC,kCAAO,CAACC,GAAG,CAAC,CAAC,CAACC,OAAO,CAAC,MAAM;MAClC,SAAS;;MACT,IAAIP,cAAc,EAAE;QACnBQ,cAAM,CAACC,gBAAgB,CAACT,cAAc,CAAC;QACvCE,OAAO,CAAC,CAAC;MACV;IACD,CAAC,CAAC;EACH,CAAC,EAAE,CAACF,cAAc,EAAEE,OAAO,CAAC,CAAC;EAE7B,IAAI,CAACF,cAAc,EAAE,OAAOC,QAAQ;EAEpC,oBAAO,IAAAH,WAAA,CAAAY,GAAA,EAACd,0BAAA,CAAAe,eAAe;IAACC,OAAO,EAAET,UAAW;IAAAF,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAC1E,CAAC;AAACY,OAAA,CAAAd,YAAA,GAAAA,YAAA","ignoreList":[]}

package/lib/commonjs/components/controllers/screen-lifecycle.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScreenLifecycleController = void 0;
 var _react = require("react");
+var _useParentGestureRegistry = require("../../hooks/gestures/use-parent-gesture-registry");
 var _useStableCallback = _interopRequireDefault(require("../../hooks/use-stable-callback"));
 var _keys = require("../../providers/keys");
 var _animations = require("../../stores/animations");
@@ -25,20 +26,30 @@ const ScreenLifecycleController = ({
 
     // Don't run e.preventDefault when the dismissal was on the local root
     if (requestedDismissOnNavigator) {
-      (0, _resetStoresForScreen.resetStoresForScreen)(current);
+      (0, _resetStoresForScreen.resetStoresForScreen)(current, {
+        clearActive: true
+      });
       return;
     }
 
     // Don't run e.preventDefault when this is the first screen of the stack
     if (current.navigation.getState().index === 0) {
-      (0, _resetStoresForScreen.resetStoresForScreen)(current);
+      (0, _resetStoresForScreen.resetStoresForScreen)(current, {
+        clearActive: true
+      });
       return;
     }
     e.preventDefault();
     const onFinish = finished => {
       if (finished) {
-        (0, _resetStoresForScreen.resetStoresForScreen)(current);
         current.navigation.dispatch(e.data.action);
+
+        // we'll ensure the dispatch is complete before resetting stores
+        requestAnimationFrame(() => {
+          (0, _resetStoresForScreen.resetStoresForScreen)(current, {
+            clearActive: false
+          });
+        });
       }
     };
     (0, _runTransition.runTransition)({
@@ -55,11 +66,14 @@ const ScreenLifecycleController = ({
       animations
     });
   });
-  (0, _react.useLayoutEffect)(handleInitialize, []);
   (0, _react.useEffect)(() => {
     const unsubscribe = current.navigation.addListener("beforeRemove", handleBeforeRemove);
     return unsubscribe;
   }, [current.navigation, handleBeforeRemove]);
+  (0, _react.useLayoutEffect)(handleInitialize, []);
+
+  // important for t.a scrollviews inside nested navigators.
+  (0, _useParentGestureRegistry.useParentGestureRegistry)();
   return children;
 };
 exports.ScreenLifecycleController = ScreenLifecycleController;

package/lib/commonjs/components/controllers/screen-lifecycle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_useStableCallback","_interopRequireDefault","_keys","_animations","_navigatorDismissState","_resetStoresForScreen","_runTransition","e","__esModule","default","ScreenLifecycleController","children","current","useKeys","animations","Animations","getAll","route","key","handleBeforeRemove","useStableCallback","navigation","getParent","getState","requestedDismissOnNavigator","NavigatorDismissState","get","resetStoresForScreen","index","preventDefault","onFinish","finished","dispatch","data","action","runTransition","target","spec","options","transitionSpec","handleInitialize","useLayoutEffect","useEffect","unsubscribe","addListener","exports"],"sourceRoot":"../../../../src","sources":["components/controllers/screen-lifecycle.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,sBAAA,GAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAN,OAAA;AACA,IAAAO,cAAA,GAAAP,OAAA;AAAqE,SAAAE,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAM9D,MAAMG,yBAAyB,GAAGA,CAAC;EACzCC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EAE7B,MAAMC,UAAU,GAAGC,sBAAU,CAACC,MAAM,CAACJ,OAAO,CAACK,KAAK,CAACC,GAAG,CAAC;EAEvD,MAAMC,kBAAkB,GAAG,IAAAC,0BAAiB,EAAEb,CAAM,IAAK;IACxD,MAAMW,GAAG,GAAGN,OAAO,CAACS,UAAU,CAACC,SAAS,CAAC,CAAC,EAAEC,QAAQ,CAAC,CAAC,CAACL,GAAG;IAC1D,MAAMM,2BAA2B,GAAGC,4CAAqB,CAACC,GAAG,CAACR,GAAG,CAAC;;IAElE;IACA,IAAIM,2BAA2B,EAAE;MAChC,IAAAG,0CAAoB,EAACf,OAAO,CAAC;MAC7B;IACD;;IAEA;IACA,IAAIA,OAAO,CAACS,UAAU,CAACE,QAAQ,CAAC,CAAC,CAACK,KAAK,KAAK,CAAC,EAAE;MAC9C,IAAAD,0CAAoB,EAACf,OAAO,CAAC;MAC7B;IACD;IAEAL,CAAC,CAACsB,cAAc,CAAC,CAAC;IAClB,MAAMC,QAAQ,GAAIC,QAAiB,IAAK;MACvC,IAAIA,QAAQ,EAAE;QACb,IAAAJ,0CAAoB,EAACf,OAAO,CAAC;QAC7BA,OAAO,CAACS,UAAU,CAACW,QAAQ,CAACzB,CAAC,CAAC0B,IAAI,CAACC,MAAM,CAAC;MAC3C;IACD,CAAC;IAED,IAAAC,4BAAa,EAAC;MACbC,MAAM,EAAE,OAAO;MACfC,IAAI,EAAEzB,OAAO,CAAC0B,OAAO,CAACC,cAAc;MACpCT,QAAQ;MACRhB;IACD,CAAC,CAAC;EACH,CAAC,CAAC;EAEF,MAAM0B,gBAAgB,GAAG,IAAApB,0BAAiB,EAAC,MAAM;IAChD,IAAAe,4BAAa,EAAC;MACbC,MAAM,EAAE,MAAM;MACdC,IAAI,EAAEzB,OAAO,CAAC0B,OAAO,CAACC,cAAc;MACpCzB;IACD,CAAC,CAAC;EACH,CAAC,CAAC;EAEF,IAAA2B,sBAAe,EAACD,gBAAgB,EAAE,EAAE,CAAC;EAErC,IAAAE,gBAAS,EAAC,MAAM;IACf,MAAMC,WAAW,GAAG/B,OAAO,CAACS,UAAU,CAACuB,WAAW,CACjD,cAAc,EACdzB,kBACD,CAAC;IAED,OAAOwB,WAAW;EACnB,CAAC,EAAE,CAAC/B,OAAO,CAACS,UAAU,EAAEF,kBAAkB,CAAC,CAAC;EAE5C,OAAOR,QAAQ;AAChB,CAAC;AAACkC,OAAA,CAAAnC,yBAAA,GAAAA,yBAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_useParentGestureRegistry","_useStableCallback","_interopRequireDefault","_keys","_animations","_navigatorDismissState","_resetStoresForScreen","_runTransition","e","__esModule","default","ScreenLifecycleController","children","current","useKeys","animations","Animations","getAll","route","key","handleBeforeRemove","useStableCallback","navigation","getParent","getState","requestedDismissOnNavigator","NavigatorDismissState","get","resetStoresForScreen","clearActive","index","preventDefault","onFinish","finished","dispatch","data","action","requestAnimationFrame","runTransition","target","spec","options","transitionSpec","handleInitialize","useEffect","unsubscribe","addListener","useLayoutEffect","useParentGestureRegistry","exports"],"sourceRoot":"../../../../src","sources":["components/controllers/screen-lifecycle.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,yBAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,sBAAA,GAAAN,OAAA;AACA,IAAAO,qBAAA,GAAAP,OAAA;AACA,IAAAQ,cAAA,GAAAR,OAAA;AAAqE,SAAAG,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAM9D,MAAMG,yBAAyB,GAAGA,CAAC;EACzCC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EAE7B,MAAMC,UAAU,GAAGC,sBAAU,CAACC,MAAM,CAACJ,OAAO,CAACK,KAAK,CAACC,GAAG,CAAC;EAEvD,MAAMC,kBAAkB,GAAG,IAAAC,0BAAiB,EAAEb,CAAM,IAAK;IACxD,MAAMW,GAAG,GAAGN,OAAO,CAACS,UAAU,CAACC,SAAS,CAAC,CAAC,EAAEC,QAAQ,CAAC,CAAC,CAACL,GAAG;IAC1D,MAAMM,2BAA2B,GAAGC,4CAAqB,CAACC,GAAG,CAACR,GAAG,CAAC;;IAElE;IACA,IAAIM,2BAA2B,EAAE;MAChC,IAAAG,0CAAoB,EAACf,OAAO,EAAE;QAAEgB,WAAW,EAAE;MAAK,CAAC,CAAC;MACpD;IACD;;IAEA;IACA,IAAIhB,OAAO,CAACS,UAAU,CAACE,QAAQ,CAAC,CAAC,CAACM,KAAK,KAAK,CAAC,EAAE;MAC9C,IAAAF,0CAAoB,EAACf,OAAO,EAAE;QAAEgB,WAAW,EAAE;MAAK,CAAC,CAAC;MACpD;IACD;IAEArB,CAAC,CAACuB,cAAc,CAAC,CAAC;IAClB,MAAMC,QAAQ,GAAIC,QAAiB,IAAK;MACvC,IAAIA,QAAQ,EAAE;QACbpB,OAAO,CAACS,UAAU,CAACY,QAAQ,CAAC1B,CAAC,CAAC2B,IAAI,CAACC,MAAM,CAAC;;QAE1C;QACAC,qBAAqB,CAAC,MAAM;UAC3B,IAAAT,0CAAoB,EAACf,OAAO,EAAE;YAAEgB,WAAW,EAAE;UAAM,CAAC,CAAC;QACtD,CAAC,CAAC;MACH;IACD,CAAC;IAED,IAAAS,4BAAa,EAAC;MACbC,MAAM,EAAE,OAAO;MACfC,IAAI,EAAE3B,OAAO,CAAC4B,OAAO,CAACC,cAAc;MACpCV,QAAQ;MACRjB;IACD,CAAC,CAAC;EACH,CAAC,CAAC;EAEF,MAAM4B,gBAAgB,GAAG,IAAAtB,0BAAiB,EAAC,MAAM;IAChD,IAAAiB,4BAAa,EAAC;MACbC,MAAM,EAAE,MAAM;MACdC,IAAI,EAAE3B,OAAO,CAAC4B,OAAO,CAACC,cAAc;MACpC3B;IACD,CAAC,CAAC;EACH,CAAC,CAAC;EAEF,IAAA6B,gBAAS,EAAC,MAAM;IACf,MAAMC,WAAW,GAAGhC,OAAO,CAACS,UAAU,CAACwB,WAAW,CACjD,cAAc,EACd1B,kBACD,CAAC;IAED,OAAOyB,WAAW;EACnB,CAAC,EAAE,CAAChC,OAAO,CAACS,UAAU,EAAEF,kBAAkB,CAAC,CAAC;EAE5C,IAAA2B,sBAAe,EAACJ,gBAAgB,EAAE,EAAE,CAAC;;EAErC;EACA,IAAAK,kDAAwB,EAAC,CAAC;EAE1B,OAAOpC,QAAQ;AAChB,CAAC;AAACqC,OAAA,CAAAtC,yBAAA,GAAAA,yBAAA","ignoreList":[]}

package/lib/commonjs/components/create-transition-aware-component.js

@@ -8,11 +8,11 @@ var _react = require("react");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _useAssociatedStyle = require("../hooks/animation/use-associated-style");
-var _useBoundMeasurer = require("../hooks/bounds/use-bound-measurer");
-var _useScrollProgress = require("../hooks/gestures/use-scroll-progress");
+var _useBoundRegistry = require("../hooks/bounds/use-bound-registry");
+var _useScrollRegistry = require("../hooks/gestures/use-scroll-registry");
 var _gestures = require("../providers/gestures");
 var _keys = require("../providers/keys");
-var _boundsActivator = require("./bounds-activator");
+var _boundCapture = require("./bound-capture");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function createTransitionAwareComponent(Wrapped, options = {}) {
@@ -28,10 +28,10 @@ function createTransitionAwareComponent(Wrapped, options = {}) {
       scrollHandler,
       onContentSizeChange,
       onLayout
-    } = (0, _useScrollProgress.useScrollProgress)({
+    } = (0, _useScrollRegistry.useScrollRegistry)({
       onScroll: props.onScroll,
       onContentSizeChange: props.onContentSizeChange,
-      onLayout: props.onLayout // Add this line to pass through onLayout
+      onLayout: props.onLayout
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: nativeGesture,
@@ -52,6 +52,7 @@ function createTransitionAwareComponent(Wrapped, options = {}) {
       sharedBoundTag,
       styleId,
       onPress,
+      measureOnLayout,
       ...rest
     } = props;
     const animatedRef = (0, _reactNativeReanimated.useAnimatedRef)();
@@ -64,9 +65,9 @@ function createTransitionAwareComponent(Wrapped, options = {}) {
       id: sharedBoundTag || styleId
     });
     const {
-      measureAndSet,
-      measureOnLayout
-    } = (0, _useBoundMeasurer.useBoundMeasurer)({
+      measureBounds,
+      handleLayout
+    } = (0, _useBoundRegistry.useBoundsRegistry)({
       sharedBoundTag,
       animatedRef,
       current,
@@ -75,18 +76,28 @@ function createTransitionAwareComponent(Wrapped, options = {}) {
     if (isScrollable) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollableInner, {
         ...props,
-        ref: ref
+        ref: ref,
+        measureBounds: measureBounds,
+        handleLayout: handleLayout
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundsActivator.BoundActivator, {
+    const onLayoutHandler = (0, _reactNativeReanimated.runOnUI)(() => {
+      "worklet";
+
+      handleLayout();
+      if (measureOnLayout && sharedBoundTag) {
+        measureBounds();
+      }
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundCapture.BoundCapture, {
       sharedBoundTag: sharedBoundTag,
-      measure: measureAndSet,
+      measure: measureBounds,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedComponent, {
         ...rest,
         ref: animatedRef,
         style: [style, associatedStyles],
         onPress: onPress,
-        onLayout: (0, _reactNativeReanimated.runOnUI)(measureOnLayout),
+        onLayout: onLayoutHandler,
         children: children
       })
     });

package/lib/commonjs/components/create-transition-aware-component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNativeGestureHandler","_reactNativeReanimated","_interopRequireWildcard","_useAssociatedStyle","_useBoundMeasurer","_useScrollProgress","_gestures","_keys","_boundsActivator","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","createTransitionAwareComponent","Wrapped","options","isScrollable","AnimatedComponent","Animated","createAnimatedComponent","ScrollableInner","forwardRef","props","ref","nativeGesture","useGestureContext","scrollHandler","onContentSizeChange","onLayout","useScrollProgress","onScroll","jsx","GestureDetector","gesture","children","scrollEventThrottle","Inner","style","sharedBoundTag","styleId","onPress","rest","animatedRef","useAnimatedRef","current","useKeys","associatedStyles","useAssociatedStyles","id","measureAndSet","measureOnLayout","useBoundMeasurer","BoundActivator","measure","runOnUI","memo"],"sourceRoot":"../../../src","sources":["components/create-transition-aware-component.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNativeGestureHandler","_reactNativeReanimated","_interopRequireWildcard","_useAssociatedStyle","_useBoundRegistry","_useScrollRegistry","_gestures","_keys","_boundCapture","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","createTransitionAwareComponent","Wrapped","options","isScrollable","AnimatedComponent","Animated","createAnimatedComponent","ScrollableInner","forwardRef","props","ref","nativeGesture","useGestureContext","scrollHandler","onContentSizeChange","onLayout","useScrollRegistry","onScroll","jsx","GestureDetector","gesture","children","scrollEventThrottle","Inner","style","sharedBoundTag","styleId","onPress","measureOnLayout","rest","animatedRef","useAnimatedRef","current","useKeys","associatedStyles","useAssociatedStyles","id","measureBounds","handleLayout","useBoundsRegistry","onLayoutHandler","runOnUI","BoundCapture","measure","memo"],"sourceRoot":"../../../src","sources":["components/create-transition-aware-component.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/integrations/masked-view.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MaskedView;
+var _reactNative = require("react-native");
+var _createTransitionAwareComponent = require("../create-transition-aware-component");
+var _jsxRuntime = require("react/jsx-runtime");
+const TransitionView = (0, _createTransitionAwareComponent.createTransitionAwareComponent)(_reactNative.View);
+let LazyMaskedView = _reactNative.View;
+try {
+  LazyMaskedView = require("@react-native-masked-view/masked-view").default;
+} catch (_) {
+  // noop
+}
+const MASK_STYLE_ID = "_ROOT_MASKED";
+const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
+function MaskedView({
+  children,
+  style: userStyles = {}
+}) {
+  if (LazyMaskedView === _reactNative.View) {
+    return children;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LazyMaskedView, {
+    style: styles.root
+    // @ts-expect-error
+    ,
+    maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionView, {
+      styleId: MASK_STYLE_ID,
+      style: styles.rootMask
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionView, {
+      styleId: CONTAINER_STYLE_ID,
+      style: [styles.rootContainer, userStyles],
+      children: children
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  rootMask: {
+    backgroundColor: "white"
+  },
+  rootContainer: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=masked-view.js.map

package/lib/commonjs/components/integrations/masked-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_createTransitionAwareComponent","_jsxRuntime","TransitionView","createTransitionAwareComponent","View","LazyMaskedView","default","_","MASK_STYLE_ID","CONTAINER_STYLE_ID","MaskedView","children","style","userStyles","jsx","styles","root","maskElement","styleId","rootMask","rootContainer","StyleSheet","create","flex","backgroundColor"],"sourceRoot":"../../../../src","sources":["components/integrations/masked-view.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,+BAAA,GAAAD,OAAA;AAAsF,IAAAE,WAAA,GAAAF,OAAA;AAEtF,MAAMG,cAAc,GAAG,IAAAC,8DAA8B,EAACC,iBAAI,CAAC;AAE3D,IAAIC,cAAc,GAAGD,iBAAI;AAEzB,IAAI;EACHC,cAAc,GAAGN,OAAO,CAAC,uCAAuC,CAAC,CAACO,OAAO;AAC1E,CAAC,CAAC,OAAOC,CAAC,EAAE;EACX;AAAA;AAGD,MAAMC,aAAa,GAAG,cAAc;AACpC,MAAMC,kBAAkB,GAAG,iBAAiB;AAE7B,SAASC,UAAUA,CAAC;EAClCC,QAAQ;EACRC,KAAK,EAAEC,UAAU,GAAG,CAAC;AAItB,CAAC,EAAE;EACF,IAAIR,cAAc,KAAKD,iBAAI,EAAE;IAC5B,OAAOO,QAAQ;EAChB;EAEA,oBACC,IAAAV,WAAA,CAAAa,GAAA,EAACT,cAAc;IACdO,KAAK,EAAEG,MAAM,CAACC;IACd;IAAA;IACAC,WAAW,eACV,IAAAhB,WAAA,CAAAa,GAAA,EAACZ,cAAc;MAACgB,OAAO,EAAEV,aAAc;MAACI,KAAK,EAAEG,MAAM,CAACI;IAAS,CAAE,CACjE;IAAAR,QAAA,eAED,IAAAV,WAAA,CAAAa,GAAA,EAACZ,cAAc;MACdgB,OAAO,EAAET,kBAAmB;MAC5BG,KAAK,EAAE,CAACG,MAAM,CAACK,aAAa,EAAEP,UAAU,CAAE;MAAAF,QAAA,EAEzCA;IAAQ,CACM;EAAC,CACF,CAAC;AAEnB;AAEA,MAAMI,MAAM,GAAGM,uBAAU,CAACC,MAAM,CAAC;EAChCN,IAAI,EAAE;IACLO,IAAI,EAAE;EACP,CAAC;EACDJ,QAAQ,EAAE;IACTK,eAAe,EAAE;EAClB,CAAC;EACDJ,aAAa,EAAE;IACdG,IAAI,EAAE;EACP;AACD,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/root-transition-aware.js

@@ -7,34 +7,25 @@ exports.RootTransitionAware = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _useScreenAnimation2 = require("../hooks/animation/use-screen-animation");
+var _transitionStyles = require("../providers/transition-styles");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const EMPTY_STYLE = Object.freeze({});
 const RootTransitionAware = exports.RootTransitionAware = /*#__PURE__*/(0, _react.memo)(({
   children
 }) => {
-  const {
-    screenInterpolatorProps,
-    screenStyleInterpolator
-  } = (0, _useScreenAnimation2._useScreenAnimation)();
+  const stylesMap = (0, _transitionStyles.useTransitionStyles)();
   const animatedContentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     "worklet";
 
-    if (!screenStyleInterpolator) {
-      return {};
-    }
-    const props = screenInterpolatorProps.value;
-    return screenStyleInterpolator(props).contentStyle || {};
+    return stylesMap.value.contentStyle || EMPTY_STYLE;
   });
   const animatedOverlayStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     "worklet";
 
-    if (!screenStyleInterpolator) {
-      return {};
-    }
-    return screenStyleInterpolator(screenInterpolatorProps.value).overlayStyle || {};
+    return stylesMap.value.overlayStyle || EMPTY_STYLE;
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
       style: [_reactNative.StyleSheet.absoluteFillObject, animatedOverlayStyle],

package/lib/commonjs/components/root-transition-aware.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_useScreenAnimation2","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RootTransitionAware","exports","memo","children","screenInterpolatorProps","screenStyleInterpolator","_useScreenAnimation","animatedContentStyle","useAnimatedStyle","props","value","contentStyle","animatedOverlayStyle","overlayStyle","jsxs","View","style","styles","container","jsx","StyleSheet","absoluteFillObject","pointerEvents","content","create","flex"],"sourceRoot":"../../../src","sources":["components/root-transition-aware.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_transitionStyles","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EMPTY_STYLE","freeze","RootTransitionAware","exports","memo","children","stylesMap","useTransitionStyles","animatedContentStyle","useAnimatedStyle","value","contentStyle","animatedOverlayStyle","overlayStyle","jsxs","View","style","styles","container","jsx","StyleSheet","absoluteFillObject","pointerEvents","content","create","flex"],"sourceRoot":"../../../src","sources":["components/root-transition-aware.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,uBAAA,CAAAH,OAAA;AAIA,IAAAI,iBAAA,GAAAJ,OAAA;AAAqE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAG,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAMrE,MAAMkB,WAAW,GAAGH,MAAM,CAACI,MAAM,CAAC,CAAC,CAAe,CAAC;AAE5C,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,gBAAG,IAAAE,WAAI,EAAC,CAAC;EAAEC;AAAgB,CAAC,KAAK;EAChE,MAAMC,SAAS,GAAG,IAAAC,qCAAmB,EAAC,CAAC;EAEvC,MAAMC,oBAAoB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACnD,SAAS;;IACT,OAAOH,SAAS,CAACI,KAAK,CAACC,YAAY,IAAIX,WAAW;EACnD,CAAC,CAAC;EAEF,MAAMY,oBAAoB,GAAG,IAAAH,uCAAgB,EAAC,MAAM;IACnD,SAAS;;IACT,OAAOH,SAAS,CAACI,KAAK,CAACG,YAAY,IAAIb,WAAW;EACnD,CAAC,CAAC;EAEF,oBACC,IAAApB,WAAA,CAAAkC,IAAA,EAACtC,YAAA,CAAAuC,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAb,QAAA,gBAC7B,IAAAzB,WAAA,CAAAuC,GAAA,EAAC1C,sBAAA,CAAAc,OAAQ,CAACwB,IAAI;MACbC,KAAK,EAAE,CAACI,uBAAU,CAACC,kBAAkB,EAAET,oBAAoB,CAAE;MAC7DU,aAAa,EAAC;IAAM,CACpB,CAAC,eACF,IAAA1C,WAAA,CAAAuC,GAAA,EAAC1C,sBAAA,CAAAc,OAAQ,CAACwB,IAAI;MAACC,KAAK,EAAE,CAACC,MAAM,CAACM,OAAO,EAAEf,oBAAoB,CAAE;MAAAH,QAAA,EAC3DA;IAAQ,CACK,CAAC;EAAA,CACX,CAAC;AAET,CAAC,CAAC;AAEF,MAAMY,MAAM,GAAGG,uBAAU,CAACI,MAAM,CAAC;EAChCN,SAAS,EAAE;IACVO,IAAI,EAAE;EACP,CAAC;EACDF,OAAO,EAAE;IACRE,IAAI,EAAE;EACP;AACD,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/configs/index.js

@@ -14,6 +14,9 @@ const presets = exports.presets = {
   ZoomIn: _presets.ZoomIn,
   SlideFromBottom: _presets.SlideFromBottom,
   DraggableCard: _presets.DraggableCard,
-  ElasticCard: _presets.ElasticCard
+  ElasticCard: _presets.ElasticCard,
+  SharedIGImage: _presets.SharedIGImage,
+  SharedAppleMusic: _presets.SharedAppleMusic,
+  SharedXImage: _presets.SharedXImage
 };
 //# sourceMappingURL=index.js.map

package/lib/commonjs/configs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_presets","require","_specs","specs","exports","DefaultSpec","presets","SlideFromTop","ZoomIn","SlideFromBottom","DraggableCard","ElasticCard"],"sourceRoot":"../../../src","sources":["configs/index.ts"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG;EACnBE,WAAW,EAAXA;AACF,CAAC;AAEM,MAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG;EACrBC,YAAY,EAAZA,qBAAY;EACZC,MAAM,EAANA,eAAM;EACNC,eAAe,EAAfA,wBAAe;EACfC,aAAa,EAAbA,sBAAa;EACbC,WAAW,EAAXA;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_presets","require","_specs","specs","exports","DefaultSpec","presets","SlideFromTop","ZoomIn","SlideFromBottom","DraggableCard","ElasticCard","SharedIGImage","SharedAppleMusic","SharedXImage"],"sourceRoot":"../../../src","sources":["configs/index.ts"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAUA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG;EACpBE,WAAW,EAAXA;AACD,CAAC;AAEM,MAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG;EACtBC,YAAY,EAAZA,qBAAY;EACZC,MAAM,EAANA,eAAM;EACNC,eAAe,EAAfA,wBAAe;EACfC,aAAa,EAAbA,sBAAa;EACbC,WAAW,EAAXA,oBAAW;EACXC,aAAa,EAAbA,sBAAa;EACbC,gBAAgB,EAAhBA,yBAAgB;EAChBC,YAAY,EAAZA;AACD,CAAC","ignoreList":[]}