react-native-screen-transitions 2.4.2 → 3.0.0-beta.1

package/README.md

@@ -1,8 +1,7 @@
 # react-native-screen-transitions
 
-
-| iOS | Android |
-|---|---|
+| iOS                                                                                                                                     | Android                                                                                                                    |
+| --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | <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> |
 
 ## ✨ Features
@@ -16,6 +15,7 @@
 - 🎭 **Ready-Made Presets** – Instagram, Apple Music, X (Twitter) style transitions included
 
 ## Installation
+
 ```bash
 npm install react-native-screen-transitions
 # or
@@ -25,6 +25,7 @@ bun add react-native-screen-transitions
 ```
 
 ## Peer Dependencies
+
 ```bash
 npm install react-native-reanimated react-native-gesture-handler \
   @react-navigation/native @react-navigation/native-stack \
@@ -66,7 +67,7 @@ If you’re using **React Navigation** directly (not Expo Router), the navigator
 No extra setup is required—just import and use as usual:
 
 ```tsx
-import { createNativeStackNavigator } from 'react-native-screen-transitions';
+import { createNativeStackNavigator } from "react-native-screen-transitions";
 
 const Stack = createNativeStackNavigator();
 
@@ -78,31 +79,30 @@ const Stack = createNativeStackNavigator();
 This package ships an **extended native stack** built on top of React Navigation’s native stack.
 All the usual native-stack options are available, plus the following extras:
 
-| Option | Type | Description |
-|---|---|---|
-| `enableTransitions` | `boolean` | Switches the screen to a transparent modal and disables the header so custom transitions can take over. |
-| `screenStyleInterpolator` | `ScreenStyleInterpolator` | Function that returns animated styles based on transition progress. |
-| `transitionSpec` | `TransitionSpec` | Reanimated timing/spring config for open/close animations. |
-| `gestureEnabled` | `boolean` | Whether swipe-to-dismiss is allowed. |
-| `gestureDirection` | `GestureDirection \| GestureDirection[]` | Allowed swipe directions (`vertical`, `horizontal`, etc.). |
-| `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' }`. |
+| Option                    | Type                                     | Description                                                                                             |
+| ------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------- | ----- | --- | -------------- | ------------ |
+| `enableTransitions`       | `boolean`                                | Switches the screen to a transparent modal and disables the header so custom transitions can take over. |
+| `screenStyleInterpolator` | `ScreenStyleInterpolator`                | Function that returns animated styles based on transition progress.                                     |
+| `transitionSpec`          | `TransitionSpec`                         | Reanimated timing/spring config for open/close animations.                                              |
+| `gestureEnabled`          | `boolean`                                | Whether swipe-to-dismiss is allowed.                                                                    |
+| `gestureDirection`        | `GestureDirection \| GestureDirection[]` | Allowed swipe directions (`vertical`, `horizontal`, etc.).                                              |
+| `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)
 
 To avoid collisions with the new options above, the built-in React Navigation gesture props are renamed:
 
-| React Navigation prop | Renamed to |
-|---|---|
-| `gestureDirection` | `nativeGestureDirection` |
-| `gestureEnabled` | `nativeGestureEnabled` |
+| React Navigation prop     | Renamed to                      |
+| ------------------------- | ------------------------------- |
+| `gestureDirection`        | `nativeGestureDirection`        |
+| `gestureEnabled`          | `nativeGestureEnabled`          |
 | `gestureResponseDistance` | `nativeGestureResponseDistance` |
 
 All other React Navigation native-stack options keep their original names.
 
-
 ## Creating your screen animations
 
 ### Using presets
@@ -112,22 +112,20 @@ The incoming screen automatically controls the previous screen.
 
 ```tsx
 <Stack>
-  <Stack.Screen
-    name="a"
-  />
+  <Stack.Screen name="a" />
   <Stack.Screen
     name="b"
     options={{
-      ...Transition.presets.SlideFromTop(),
+      ...Transition.Presets.SlideFromTop(),
     }}
   />
   <Stack.Screen
     name="c"
     options={{
-      ...Transition.presets.SlideFromBottom(),
+      ...Transition.Presets.SlideFromBottom(),
     }}
   />
- </Stack>
+</Stack>
 ```
 
 #### Shared element presets (new)
@@ -139,7 +137,7 @@ Ready-made presets for common shared-element patterns. These leverage the bounds
 <Stack.Screen
   name="post"
   options={{
-    ...Transition.presets.SharedIGImage(),
+    ...Transition.Presets.SharedIGImage(),
   }}
 />
 ```
@@ -151,6 +149,7 @@ Other presets: `SharedAppleMusic()`, `SharedXImage()`.
 > **⚠️ Important**: These presets require native code and **will not work in Expo Go**. You must use a development build.
 
 **1. Install the dependency**
+
 ```bash
 # Expo projects
 npx expo install @react-native-masked-view/masked-view
@@ -161,6 +160,7 @@ cd ios && pod install  # iOS only
 ```
 
 **2. Create a development build** (if using Expo)
+
 ```bash
 npx expo run:ios
 # or
@@ -168,10 +168,11 @@ npx expo run:android
 ```
 
 **3. Wrap your destination screen**
+
 ```tsx
 export default function PostScreen() {
   return (
-    <Transition.MaskedView style={{ flex: 1, backgroundColor: 'white' }}>
+    <Transition.MaskedView style={{ flex: 1, backgroundColor: "white" }}>
       {/* screen content, including the destination bound */}
     </Transition.MaskedView>
   );
@@ -200,16 +201,17 @@ Instead of presets, you can define a custom transition directly on the screen's
 - `isActiveTransitioning` – whether the active screen is currently transitioning (either being dragged or animating).
 - `isDismissing` – whether the active screen is in the process of being dismissed/closed.
 
-
 ```tsx
-import { interpolate } from 'react-native-reanimated'
+import { interpolate } from "react-native-reanimated";
 
 <Stack.Screen
   name="b"
   options={{
     enableTransitions: true,
     screenStyleInterpolator: ({
-      layouts: { screen: { width } },
+      layouts: {
+        screen: { width },
+      },
       progress,
     }) => {
       "worklet";
@@ -222,11 +224,11 @@ import { interpolate } from 'react-native-reanimated'
       };
     },
     transitionSpec: {
-      close: Transition.specs.DefaultSpec,
-      open: Transition.specs.DefaultSpec,
+      close: Transition.Specs.DefaultSpec,
+      open: Transition.Specs.DefaultSpec,
     },
   }}
-/>
+/>;
 ```
 
 In this example the incoming screen slides in from the right while the exiting screen slides out to the left.
@@ -236,16 +238,21 @@ In this example the incoming screen slides in from the right while the exiting s
 For per-screen control, import the `useScreenAnimation` hook and compose your own animated styles.
 
 ```tsx
-import { useScreenAnimation } from 'react-native-screen-transitions';
-import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';
+import { useScreenAnimation } from "react-native-screen-transitions";
+import Animated, {
+  useAnimatedStyle,
+  interpolate,
+} from "react-native-reanimated";
 
 export default function BScreen() {
   const props = useScreenAnimation();
 
   const animatedStyle = useAnimatedStyle(() => {
-    const { current: { progress } } = props.value
+    const {
+      current: { progress },
+    } = props.value;
     return {
-      opacity: progress
+      opacity: progress,
     };
   });
 
@@ -263,8 +270,8 @@ You can drag a screen away even when it contains a scroll view.
 Just swap the regular scrollable for a transition-aware one:
 
 ```tsx
-import Transition from 'react-native-screen-transitions';
-import { LegendList } from "@legendapp/list"
+import Transition from "react-native-screen-transitions";
+import { LegendList } from "@legendapp/list";
 import { FlashList } from "@shopify/flash-list";
 
 // Drop-in replacements
@@ -272,11 +279,15 @@ const ScrollView = Transition.ScrollView;
 const FlatList = Transition.FlatList;
 
 // Or wrap any list you like
-const TransitionFlashList =
-  Transition.createTransitionAwareComponent(FlashList, { isScrollable: true });
-
-const TransitionLegendList =
-  Transition.createTransitionAwareComponent(LegendList, { isScrollable: true} );
+const TransitionFlashList = Transition.createTransitionAwareComponent(
+  FlashList,
+  { isScrollable: true }
+);
+
+const TransitionLegendList = Transition.createTransitionAwareComponent(
+  LegendList,
+  { isScrollable: true }
+);
 ```
 
 Enable the gesture on the screen:
@@ -287,7 +298,7 @@ Enable the gesture on the screen:
   options={{
     enableTransitions: true,
     gestureEnabled: true,
-    gestureDirection: 'vertical', // or 'horizontal', ['vertical', 'horizontal'], etc.
+    gestureDirection: "vertical", // or 'horizontal', ['vertical', 'horizontal'], etc.
   }}
 />
 ```
@@ -296,11 +307,7 @@ Use it in the screen:
 
 ```tsx
 export default function B() {
-  return (
-    <Transition.ScrollView>
-      {/* content */}
-    </Transition.ScrollView>
-  );
+  return <Transition.ScrollView>{/* content */}</Transition.ScrollView>;
 }
 ```
 
@@ -332,9 +339,9 @@ Bounds let you animate any component between two screens by measuring its start
 
 **Current Implementation:** For bounds to be measured, a `Transition.Pressable` must have both an `onPress` handler and a `sharedBoundTag`. When pressed, it triggers measurement. If the `Transition.Pressable` has children with `sharedBoundTag`s, those children are automatically measured and stored as well.
 
-*Note: This measurement trigger mechanism may change in future versions.*
+_Note: This measurement trigger mechanism may change in future versions._
 
-1) Tag source and destination with pressable triggers
+1. Tag source and destination with pressable triggers
 
 ```tsx
 // Source screen
@@ -356,12 +363,12 @@ Bounds let you animate any component between two screens by measuring its start
 </Transition.Pressable>
 ```
 
-2) Children are automatically measured
+2. Children are automatically measured
 
 ```tsx
 <Transition.Pressable
   sharedBoundTag="card"
-  onPress={() => router.push('/detail')}
+  onPress={() => router.push("/detail")}
 >
   {/* These children will be automatically measured when parent is pressed */}
   <Transition.View sharedBoundTag="title">
@@ -373,26 +380,26 @@ Bounds let you animate any component between two screens by measuring its start
 </Transition.Pressable>
 ```
 
-3) Drive the animation with the object API
+3. Drive the animation with the object API
 
 ```tsx
 screenStyleInterpolator: ({ activeBoundId, bounds }) => {
   "worklet";
 
   const styles = bounds({
-    method: "transform",      // "transform" | "size" | "content"
-    space: "relative",        // "relative" | "absolute"
-    scaleMode: "match",       // "match" | "none" | "uniform"
-    anchor: "center",         // see anchors below
+    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]: styles };
-}
+};
 ```
 
-3) Raw values when you need them
+3. Raw values when you need them
 
 ```tsx
 const raw = bounds({ method: "transform", raw: true });
@@ -402,7 +409,12 @@ const raw = bounds({ method: "transform", raw: true });
 Or for size/content methods:
 
 ```tsx
-const toSize = bounds({ method: "size", target: "fullscreen", space: "absolute", raw: true });
+const toSize = bounds({
+  method: "size",
+  target: "fullscreen",
+  space: "absolute",
+  raw: true,
+});
 // { width, height, translateX, translateY }
 
 const content = bounds({ method: "content", raw: true });
@@ -432,7 +444,7 @@ 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 { bounds: metrics, styles } = bounds.get('hero', 'current');
+const { bounds: metrics, styles } = bounds.get("hero", "current");
 ```
 
 ## Animating individual components with `styleId`
@@ -442,7 +454,10 @@ Use `styleId` to animate a single view inside a screen.
 1. Tag the element:
 
 ```tsx
-<Transition.View styleId="fade-box" style={{ width: 100, height: 100, backgroundColor: 'crimson' }} />
+<Transition.View
+  styleId="fade-box"
+  style={{ width: 100, height: 100, backgroundColor: "crimson" }}
+/>
 ```
 
 2. Drive it from the interpolator:
@@ -452,9 +467,9 @@ screenStyleInterpolator: ({ progress }) => {
   "worklet";
 
   return {
-    'fade-box': {
-      opacity: interpolate(progress, [0, 1, 2],[0, 1, 0])
-    }
+    "fade-box": {
+      opacity: interpolate(progress, [0, 1, 2], [0, 1, 0]),
+    },
   };
 };
 ```
@@ -465,7 +480,6 @@ The red square fades in as the screen opens.
 
 - **Delayed Touch Events** – There’s a noticeable delay in touch events when the transition is finished. If this affects your app, please hold off on using this package until a fix is available.
 
-
 ## Support and Development
 
 This package is provided as-is and is developed in my free time. While I strive to maintain and improve it, please understand that:
@@ -476,10 +490,10 @@ This package is provided as-is and is developed in my free time. While I strive
 I apologize for any inconvenience this may cause. If you encounter issues or have suggestions, please feel free to open an issue on the repository.
 
 ### Support the project
+
 I’ve estimated I downed around 60 cups of coffee while building this.
 If you’d like to fuel the next release, [buy me a coffee](https://buymeacoffee.com/trpfsu)
 
-
-
 ## License
+
 MIT

package/lib/commonjs/blank-stack/components/Overlay.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = void 0;
+var _native = require("@react-navigation/native");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _keys = require("../../shared/providers/keys");
+var _useOverlayAnimation = require("../hooks/use-overlay-animation");
+var _withStackNavigation = require("../utils/with-stack-navigation");
+var _useScreenAnimation = require("../../shared/hooks/animation/use-screen-animation");
+var _jsxRuntime = require("react/jsx-runtime");
+const getActiveFloatOverlay = (scenes, index) => {
+  if (scenes.length === 0) {
+    return null;
+  }
+
+  // When navigating back, closing scenes are kept at the top of the local stack
+  // while the focused index already points to the destination screen. We need to
+  // start scanning from the actual top of the stack so the overlay can animate
+  // out together with its closing screen instead of disappearing immediately.
+  const startIndex = Math.max(index, scenes.length - 1);
+  for (let i = startIndex; i >= 0; i--) {
+    const scene = scenes[i];
+    const options = scene?.descriptor?.options;
+    if (options?.overlayMode === "float" && options?.overlayShown) {
+      return {
+        scene,
+        overlayIndex: i
+      };
+    }
+  }
+  return null;
+};
+const OverlayHost = ({
+  scene,
+  isFloating
+}) => {
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const OverlayComponent = scene.descriptor.options.overlay;
+  const {
+    overlayAnimation,
+    optimisticActiveIndex
+  } = (0, _useOverlayAnimation.useOverlayAnimation)();
+  const screenAnimation = (0, _useScreenAnimation.useScreenAnimation)();
+  if (!OverlayComponent) {
+    return null;
+  }
+  const overlayProps = {
+    route: scene.route,
+    navigation: scene.descriptor.navigation,
+    overlayAnimation,
+    screenAnimation,
+    focusedIndex: optimisticActiveIndex,
+    insets
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    pointerEvents: "box-none",
+    style: [styles.container, isFloating ? styles.floating : null, styles.absolute],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_native.NavigationContext.Provider, {
+      value: scene.descriptor.navigation,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_native.NavigationRouteContext.Provider, {
+        value: scene.route,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          pointerEvents: "box-none",
+          style: styles.overlay,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayComponent, {
+            ...overlayProps
+          })
+        })
+      })
+    })
+  });
+};
+const FloatOverlay = () => {
+  const {
+    scenes,
+    focusedIndex
+  } = (0, _withStackNavigation.useStackNavigationContext)();
+  const activeOverlay = (0, _react.useMemo)(() => getActiveFloatOverlay(scenes, focusedIndex), [scenes, focusedIndex]);
+  if (!activeOverlay) {
+    return null;
+  }
+  const {
+    scene,
+    overlayIndex
+  } = activeOverlay;
+  const previous = scenes[overlayIndex - 1]?.descriptor;
+  const current = scene.descriptor;
+  const next = scenes[overlayIndex + 1]?.descriptor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_keys.KeysProvider, {
+    current: current,
+    previous: previous,
+    next: next,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayHost, {
+      scene: scene,
+      isFloating: true
+    })
+  });
+};
+const ScreenOverlay = () => {
+  const {
+    focusedIndex
+  } = (0, _withStackNavigation.useStackNavigationContext)();
+  const {
+    current
+  } = (0, _keys.useKeys)();
+  const options = current.options;
+  if (!options.overlayShown || options.overlayMode !== "screen") {
+    return null;
+  }
+  const scene = {
+    descriptor: current,
+    route: current.route
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayHost, {
+    scene: scene
+  });
+};
+const Overlay = exports.Overlay = {
+  Float: FloatOverlay,
+  Screen: ScreenOverlay
+};
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 1
+  },
+  container: {
+    flex: 1
+  },
+  absolute: _reactNative.StyleSheet.absoluteFillObject,
+  floating: {
+    zIndex: 1000
+  }
+});
+//# sourceMappingURL=Overlay.js.map

package/lib/commonjs/blank-stack/components/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_native","require","_react","_reactNative","_reactNativeSafeAreaContext","_keys","_useOverlayAnimation","_withStackNavigation","_useScreenAnimation","_jsxRuntime","getActiveFloatOverlay","scenes","index","length","startIndex","Math","max","i","scene","options","descriptor","overlayMode","overlayShown","overlayIndex","OverlayHost","isFloating","insets","useSafeAreaInsets","OverlayComponent","overlay","overlayAnimation","optimisticActiveIndex","useOverlayAnimation","screenAnimation","useScreenAnimation","overlayProps","route","navigation","focusedIndex","jsx","Animated","View","pointerEvents","style","styles","container","floating","absolute","children","NavigationContext","Provider","value","NavigationRouteContext","FloatOverlay","useStackNavigationContext","activeOverlay","useMemo","previous","current","next","KeysProvider","ScreenOverlay","useKeys","Overlay","exports","Float","Screen","StyleSheet","create","absoluteFillObject","zIndex","flex"],"sourceRoot":"../../../../src","sources":["blank-stack/components/Overlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/blank-stack/components/Screens.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Screen = void 0;
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeScreens = require("react-native-screens");
+var _animationStore = require("../../shared/stores/animation-store");
+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 EPSILON = 1e-5;
+const STATE_INACTIVE = 0;
+const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
+const STATE_ON_TOP = 2;
+const AnimatedScreen = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeScreens.Screen);
+const Screen = ({
+  routeKey,
+  index,
+  routes,
+  isPreloaded,
+  activeScreensLimit,
+  children,
+  freezeOnBlur,
+  shouldFreeze
+}) => {
+  const sceneProgress = _animationStore.AnimationStore.getAnimation(routeKey, "progress");
+  const screenActivity = (0, _reactNativeReanimated.useSharedValue)(1);
+  (0, _reactNativeReanimated.useDerivedValue)(() => {
+    if (!sceneProgress) {
+      screenActivity.value = STATE_TRANSITIONING_OR_BELOW_TOP;
+      return;
+    }
+    if (index < routes.length - activeScreensLimit - 1 || isPreloaded) {
+      screenActivity.value = STATE_INACTIVE;
+    } else {
+      const outputValue = index === routes.length - 1 ? STATE_ON_TOP : index >= routes.length - activeScreensLimit ? STATE_TRANSITIONING_OR_BELOW_TOP : STATE_INACTIVE;
+      const v = (0, _reactNativeReanimated.interpolate)(sceneProgress.value, [0, 1 - EPSILON, 1], [1, 1, outputValue], "clamp");
+      const next = Math.trunc(v) ?? STATE_TRANSITIONING_OR_BELOW_TOP;
+
+      // avoid spamming JS thread
+      if (next !== screenActivity.value) {
+        screenActivity.value = next;
+      }
+    }
+  });
+  const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    return {
+      activityState: screenActivity.value,
+      shouldFreeze: screenActivity.value === STATE_INACTIVE && shouldFreeze
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedScreen, {
+    enabled: true,
+    style: _reactNative.StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    freezeOnBlur: freezeOnBlur,
+    animatedProps: animatedProps,
+    children: children
+  });
+};
+exports.Screen = Screen;
+//# sourceMappingURL=Screens.js.map

package/lib/commonjs/blank-stack/components/Screens.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireWildcard","_reactNativeScreens","_animationStore","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EPSILON","STATE_INACTIVE","STATE_TRANSITIONING_OR_BELOW_TOP","STATE_ON_TOP","AnimatedScreen","Animated","createAnimatedComponent","RNSScreen","Screen","routeKey","index","routes","isPreloaded","activeScreensLimit","children","freezeOnBlur","shouldFreeze","sceneProgress","AnimationStore","getAnimation","screenActivity","useSharedValue","useDerivedValue","value","length","outputValue","v","interpolate","next","Math","trunc","animatedProps","useAnimatedProps","activityState","jsx","enabled","style","StyleSheet","absoluteFill","pointerEvents","exports"],"sourceRoot":"../../../../src","sources":["blank-stack/components/Screens.tsx"],"mappings":"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","ignoreList":[]}