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

package/lib/typescript/shared/utils/bounds/index.d.ts

@@ -0,0 +1,13 @@
+import type { ScreenInterpolationProps, ScreenTransitionState } from "../../types/animation";
+import type { BoundsAccessor } from "../../types/bounds";
+import type { Layout } from "../../types/core";
+export interface BuildBoundsAccessorParams {
+    activeBoundId: string | null;
+    current: ScreenTransitionState;
+    previous?: ScreenTransitionState;
+    next?: ScreenTransitionState;
+    progress: number;
+    dimensions: Layout;
+}
+export declare const createBounds: (props: Omit<ScreenInterpolationProps, "bounds">) => BoundsAccessor;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/shared/utils/bounds/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/bounds/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACX,wBAAwB,EACxB,qBAAqB,EACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAe,MAAM,kBAAkB,CAAC;AAmB5D,MAAM,WAAW,yBAAyB;IACzC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACnB;AAgJD,eAAO,MAAM,YAAY,GACxB,OAAO,IAAI,CAAC,wBAAwB,EAAE,QAAQ,CAAC,KAC7C,cAgCF,CAAC"}

package/lib/typescript/shared/utils/gesture/apply-offset-rules.d.ts

@@ -0,0 +1,38 @@
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import type { SharedValue } from "react-native-reanimated";
+import type { Layout } from "../../types/core";
+import { type GestureActivationArea, GestureOffsetState } from "../../types/gesture";
+type Directions = {
+    vertical: boolean;
+    verticalInverted: boolean;
+    horizontal: boolean;
+    horizontalInverted: boolean;
+};
+interface CheckGestureActivationProps {
+    initialTouch: {
+        x: number;
+        y: number;
+    };
+    touch: {
+        x: number;
+        y: number;
+    };
+    directions: Directions;
+    manager?: GestureStateManagerType;
+    gestureOffsetState: SharedValue<GestureOffsetState>;
+    activationArea?: GestureActivationArea;
+    dimensions: Layout;
+    responseDistance?: number;
+}
+interface ReturnValues {
+    isSwipingDown: boolean;
+    isSwipingUp: boolean;
+    isSwipingRight: boolean;
+    isSwipingLeft: boolean;
+}
+/**
+ * Since we're using onTouchesMove to activate our pan, faillOffset and activateOffset don't actually work. In that case we'll create this function to use in onTouchesMove which acts simarly to the original functionality.
+ */
+export declare const applyOffsetRules: ({ initialTouch, touch, directions, manager, gestureOffsetState, activationArea, dimensions, responseDistance, }: CheckGestureActivationProps) => ReturnValues;
+export {};
+//# sourceMappingURL=apply-offset-rules.d.ts.map

package/lib/typescript/shared/utils/gesture/apply-offset-rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-offset-rules.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/apply-offset-rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mFAAmF,CAAC;AACjI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAU3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAEN,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,UAAU,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,UAAU,2BAA2B;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8BD,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAsJD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA+EhC,CAAC"}

package/lib/typescript/shared/utils/gesture/check-gesture-activation.d.ts

@@ -0,0 +1,38 @@
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import type { SharedValue } from "react-native-reanimated";
+import type { Layout } from "../../types/core";
+import { type GestureActivationArea, GestureOffsetState } from "../../types/gesture";
+type Directions = {
+    vertical: boolean;
+    verticalInverted: boolean;
+    horizontal: boolean;
+    horizontalInverted: boolean;
+};
+interface CheckGestureActivationProps {
+    initialTouch: {
+        x: number;
+        y: number;
+    };
+    touch: {
+        x: number;
+        y: number;
+    };
+    directions: Directions;
+    manager?: GestureStateManagerType;
+    gestureOffsetState: SharedValue<GestureOffsetState>;
+    activationArea?: GestureActivationArea;
+    dimensions: Layout;
+    responseDistance?: number;
+}
+interface ReturnValues {
+    isSwipingDown: boolean;
+    isSwipingUp: boolean;
+    isSwipingRight: boolean;
+    isSwipingLeft: boolean;
+}
+/**
+ * Since we're using onTouchesMove to activate our pan, faillOffset and activateOffset don't actually work. In that case we'll create this function to use in onTouchesMove which acts simarly to the original functionality.
+ */
+export declare const applyOffsetRules: ({ initialTouch, touch, directions, manager, gestureOffsetState, activationArea, dimensions, responseDistance, }: CheckGestureActivationProps) => ReturnValues;
+export {};
+//# sourceMappingURL=check-gesture-activation.d.ts.map

package/lib/typescript/shared/utils/gesture/check-gesture-activation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-gesture-activation.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/check-gesture-activation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mFAAmF,CAAC;AACjI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAEN,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,UAAU,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,UAAU,2BAA2B;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8BD,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAiKD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA2EhC,CAAC"}

package/lib/typescript/shared/utils/gesture/determine-dismissal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"determine-dismissal.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/determine-dismissal.ts"],"names":[],"mappings":"AAOA,UAAU,uBAAuB;IAChC,KAAK,EAAE;QACN,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,UAAU,EAAE;QACX,QAAQ,EAAE,OAAO,CAAC;QAClB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,UAAU,EAAE,OAAO,CAAC;QACpB,kBAAkB,EAAE,OAAO,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,qBAAqB,EAAE,MAAM,CAAC;CAC9B;AAmBD,eAAO,MAAM,kBAAkB,GAAI,2DAKhC,uBAAuB;;CAiCzB,CAAC"}

package/lib/typescript/shared/utils/gesture/map-gesture-to-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-gesture-to-progress.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/map-gesture-to-progress.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAChC,aAAa,MAAM,EACnB,WAAW,MAAM,WAKjB,CAAC"}

package/lib/typescript/shared/utils/gesture/reset-gesture-values.d.ts

@@ -0,0 +1,16 @@
+import type { GestureStateChangeEvent, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
+import type { GestureStoreMap } from "../../stores/gesture-store";
+import type { AnimationConfig } from "../../types/animation";
+interface ResetGestureValuesProps {
+    spec?: AnimationConfig;
+    gestures: GestureStoreMap;
+    shouldDismiss: boolean;
+    event: GestureStateChangeEvent<PanGestureHandlerEventPayload>;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+}
+export declare const resetGestureValues: ({ spec, gestures, shouldDismiss, event, dimensions, }: ResetGestureValuesProps) => void;
+export {};
+//# sourceMappingURL=reset-gesture-values.d.ts.map

package/lib/typescript/shared/utils/gesture/reset-gesture-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset-gesture-values.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/reset-gesture-values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI7D,UAAU,uBAAuB;IAChC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,CAAC;IAC9D,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,eAAO,MAAM,kBAAkB,GAAI,uDAMhC,uBAAuB,SA2CzB,CAAC"}

package/lib/typescript/shared/utils/gesture/velocity.d.ts

@@ -0,0 +1,25 @@
+import type { GestureStateChangeEvent, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
+import type { AnimationStoreMap } from "../../stores/animation-store";
+interface CalculateProgressProps {
+    animations: AnimationStoreMap;
+    shouldDismiss: boolean;
+    event: GestureStateChangeEvent<PanGestureHandlerEventPayload>;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    directions: {
+        horizontal: boolean;
+        horizontalInverted: boolean;
+        vertical: boolean;
+        verticalInverted: boolean;
+    };
+}
+export declare const velocity: {
+    normalize: (velocityPixelsPerSecond: number, screenSize: number) => number;
+    calculateRestoreVelocity: (currentValueNormalized: number, baseVelocityNormalized: number) => number;
+    calculateProgressVelocity: ({ animations, shouldDismiss, event, dimensions, directions, }: CalculateProgressProps) => number;
+    shouldPassDismissalThreshold: (translationPixels: number, velocityPixelsPerSecond: number, screenSize: number, velocityWeight: number) => boolean;
+};
+export {};
+//# sourceMappingURL=velocity.d.ts.map

package/lib/typescript/shared/utils/gesture/velocity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"velocity.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/velocity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,UAAU,sBAAsB;IAC/B,UAAU,EAAE,iBAAiB,CAAC;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,CAAC;IAC9D,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;QACpB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,QAAQ,EAAE,OAAO,CAAC;QAClB,gBAAgB,EAAE,OAAO,CAAC;KAC1B,CAAC;CACF;AAuHD,eAAO,MAAM,QAAQ;yCA9GuB,MAAM,cAAc,MAAM;uDAc7C,MAAM,0BACN,MAAM;+FAkB5B,sBAAsB;sDAyDL,MAAM,2BACA,MAAM,cACnB,MAAM,kBACF,MAAM;CAsBtB,CAAC"}

package/lib/typescript/shared/utils/reanimated/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/reanimated/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,eAEzB,CAAC"}

package/package.json

@@ -1,69 +1,89 @@
 {
-	"name": "react-native-screen-transitions",
-	"version": "2.4.2",
-	"description": "Easy screen transitions for React Native and Expo",
-	"author": "Ed",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/eds2002/react-native-screen-transitions.git",
-		"directory": "packages/react-native-screen-transitions"
-	},
-	"main": "lib/commonjs/index.js",
-	"module": "lib/module/index.js",
-	"types": "lib/typescript/index.d.ts",
-	"react-native": "src/index",
-	"scripts": {
-		"build": "bob build",
-		"lint": "biome check ./src",
-		"prepublishOnly": "bun run build"
-	},
-	"keywords": [
-		"react-native",
-		"transitions",
-		"animation",
-		"react-navigation",
-		"expo-router",
-		"reanimated"
-	],
-	"files": [
-		"lib",
-		"src",
-		"README.md",
-		"LICENSE"
-	],
-	"peerDependencies": {
-		"@react-navigation/elements": ">=2.0.0",
-		"@react-navigation/native": ">=6.0.0",
-		"@react-navigation/native-stack": ">=7.0.0",
-		"@types/react": "*",
-		"@types/react-native": "*",
-		"react": "*",
-		"react-native": "*",
-		"react-native-gesture-handler": ">=2.16.1",
-		"react-native-reanimated": ">=3.16.0 || >=4.0.0-",
-		"react-native-safe-area-context": "*",
-		"react-native-screens": ">=4.4.0"
-	},
-	"devDependencies": {
-		"@testing-library/react-native": "^13.2.0",
-		"@types/react": "~19.1.10",
-		"react-native-builder-bob": "0.39.0",
-		"typescript": "catalog:"
-	},
-	"react-native-builder-bob": {
-		"source": "src",
-		"output": "lib",
-		"targets": [
-			"commonjs",
-			"module",
-			[
-				"typescript",
-				{
-					"project": "tsconfig.build.json"
-				}
-			]
-		]
-	},
-	"gitHead": "888d4df9936ec0e3b8221bea7cd81115e6301693"
+  "name": "react-native-screen-transitions",
+  "version": "3.0.0-beta.1",
+  "description": "Easy screen transitions for React Native and Expo",
+  "author": "Ed",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eds2002/react-native-screen-transitions.git",
+    "directory": "packages/react-native-screen-transitions"
+  },
+  "main": "lib/commonjs/shared/index.js",
+  "module": "lib/module/shared/index.js",
+  "types": "lib/typescript/shared/index.d.ts",
+  "react-native": "src/shared/index",
+  "exports": {
+    ".": {
+      "react-native": "./src/shared/index.ts",
+      "import": "./lib/module/shared/index.js",
+      "require": "./lib/commonjs/shared/index.js",
+      "types": "./lib/typescript/shared/index.d.ts"
+    },
+    "./native-stack": {
+      "react-native": "./src/native-stack/index.ts",
+      "import": "./lib/module/native-stack/index.js",
+      "require": "./lib/commonjs/native-stack/index.js",
+      "types": "./lib/typescript/native-stack/index.d.ts"
+    },
+    "./blank-stack": {
+      "react-native": "./src/blank-stack/index.ts",
+      "import": "./lib/module/blank-stack/index.js",
+      "require": "./lib/commonjs/blank-stack/index.js",
+      "types": "./lib/typescript/blank-stack/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "bob build",
+    "lint": "biome check ./src",
+    "prepublishOnly": "bun run build"
+  },
+  "keywords": [
+    "react-native",
+    "transitions",
+    "animation",
+    "react-navigation",
+    "expo-router",
+    "reanimated"
+  ],
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@react-navigation/elements": ">=2.0.0",
+    "@react-navigation/native": ">=6.0.0",
+    "@react-navigation/native-stack": ">=7.0.0",
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-reanimated": ">=3.16.0 || >=4.0.0-",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": ">=4.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/react-native": "^13.2.0",
+    "@types/react": "~19.1.10",
+    "react-native-builder-bob": "0.39.0",
+    "typescript": "catalog:"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "gitHead": "888d4df9936ec0e3b8221bea7cd81115e6301693"
 }

package/src/blank-stack/components/Overlay.tsx

@@ -0,0 +1,149 @@
+import {
+	NavigationContext,
+	NavigationRouteContext,
+} from "@react-navigation/native";
+import { useMemo } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { KeysProvider, useKeys } from "../../shared/providers/keys";
+import { useOverlayAnimation } from "../hooks/use-overlay-animation";
+import type {
+	BlankStackDescriptor,
+	BlankStackOverlayProps,
+	BlankStackScene,
+} from "../types";
+import { useStackNavigationContext } from "../utils/with-stack-navigation";
+import { useScreenAnimation } from "../../shared/hooks/animation/use-screen-animation";
+
+type OverlayHostProps = {
+	scene: BlankStackScene;
+	isFloating?: boolean;
+};
+
+const getActiveFloatOverlay = (scenes: BlankStackScene[], index: number) => {
+	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 }: OverlayHostProps) => {
+	const insets = useSafeAreaInsets();
+
+	const OverlayComponent = scene.descriptor.options.overlay;
+
+	const { overlayAnimation, optimisticActiveIndex } = useOverlayAnimation();
+
+	const screenAnimation = useScreenAnimation();
+
+	if (!OverlayComponent) {
+		return null;
+	}
+
+	const overlayProps: BlankStackOverlayProps = {
+		route: scene.route,
+		navigation: scene.descriptor.navigation,
+		overlayAnimation,
+		screenAnimation,
+		focusedIndex: optimisticActiveIndex,
+		insets,
+	};
+
+	return (
+		<Animated.View
+			pointerEvents="box-none"
+			style={[
+				styles.container,
+				isFloating ? styles.floating : null,
+				styles.absolute,
+			]}
+		>
+			<NavigationContext.Provider value={scene.descriptor.navigation}>
+				<NavigationRouteContext.Provider value={scene.route}>
+					<View pointerEvents="box-none" style={styles.overlay}>
+						<OverlayComponent {...overlayProps} />
+					</View>
+				</NavigationRouteContext.Provider>
+			</NavigationContext.Provider>
+		</Animated.View>
+	);
+};
+
+const FloatOverlay = () => {
+	const { scenes, focusedIndex } = useStackNavigationContext();
+
+	const activeOverlay = 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 (
+		<KeysProvider current={current} previous={previous} next={next}>
+			<OverlayHost scene={scene} isFloating />
+		</KeysProvider>
+	);
+};
+
+const ScreenOverlay = () => {
+	const { focusedIndex } = useStackNavigationContext();
+	const { current } = useKeys<BlankStackDescriptor>();
+
+	const options = current.options;
+
+	if (!options.overlayShown || options.overlayMode !== "screen") {
+		return null;
+	}
+
+	const scene: BlankStackScene = {
+		descriptor: current,
+		route: current.route,
+	};
+
+	return <OverlayHost scene={scene} />;
+};
+
+export const Overlay = {
+	Float: FloatOverlay,
+	Screen: ScreenOverlay,
+};
+
+const styles = StyleSheet.create({
+	overlay: {
+		...StyleSheet.absoluteFillObject,
+		zIndex: 1,
+	},
+	container: {
+		flex: 1,
+	},
+	absolute: StyleSheet.absoluteFillObject,
+	floating: {
+		zIndex: 1000,
+	},
+});

package/src/blank-stack/components/Screens.tsx

@@ -0,0 +1,96 @@
+import type { NavigationRoute, ParamListBase } from "@react-navigation/native";
+import type * as React from "react";
+import { StyleSheet } from "react-native";
+import Animated, {
+	interpolate,
+	useAnimatedProps,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { Screen as RNSScreen } from "react-native-screens";
+import { AnimationStore } from "../../shared/stores/animation-store";
+
+interface ScreenProps {
+	routeKey: string;
+	index: number;
+	routes: NavigationRoute<ParamListBase, string>[];
+	isPreloaded: boolean;
+	children: React.ReactNode;
+	freezeOnBlur?: boolean;
+	shouldFreeze?: boolean;
+	activeScreensLimit: number;
+}
+
+const EPSILON = 1e-5;
+
+const STATE_INACTIVE = 0;
+const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
+const STATE_ON_TOP = 2;
+
+const AnimatedScreen = Animated.createAnimatedComponent(RNSScreen);
+
+export const Screen = ({
+	routeKey,
+	index,
+	routes,
+	isPreloaded,
+	activeScreensLimit,
+	children,
+	freezeOnBlur,
+	shouldFreeze,
+}: ScreenProps) => {
+	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");
+	const screenActivity = useSharedValue<0 | 1 | 2>(1);
+
+	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 = interpolate(
+				sceneProgress.value,
+				[0, 1 - EPSILON, 1],
+				[1, 1, outputValue],
+				"clamp",
+			);
+
+			const next =
+				(Math.trunc(v) as 0 | 1 | 2) ?? STATE_TRANSITIONING_OR_BELOW_TOP;
+
+			// avoid spamming JS thread
+			if (next !== screenActivity.value) {
+				screenActivity.value = next;
+			}
+		}
+	});
+
+	const animatedProps = useAnimatedProps(() => {
+		return {
+			activityState: screenActivity.value,
+			shouldFreeze: screenActivity.value === STATE_INACTIVE && shouldFreeze,
+		};
+	});
+
+	return (
+		<AnimatedScreen
+			enabled
+			style={StyleSheet.absoluteFill}
+			pointerEvents="box-none"
+			freezeOnBlur={freezeOnBlur}
+			animatedProps={animatedProps}
+		>
+			{children}
+		</AnimatedScreen>
+	);
+};