react-native-screen-transitions 2.4.2-beta.2 → 3.0.0-beta.0

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

@@ -0,0 +1,7 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type { Layout } from "../../types/core";
+import type { Complete } from "../../types/utils";
+import type { BoundsBuilderOptions } from "./_types/builder";
+export declare const FULLSCREEN_DIMENSIONS: (dimensions: Layout) => MeasuredDimensions;
+export declare const DEFAULT_BUILDER_OPTIONS: Complete<Omit<BoundsBuilderOptions, "id">>;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/bounds/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,GACjC,YAAY,MAAM,KAChB,kBAUF,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAC7C,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAmBtB,CAAC"}

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,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "2.4.2-beta.2",
+	"version": "3.0.0-beta.0",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -9,10 +9,42 @@
 		"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",
+	"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"
+		},
+		"./native-stack/index": {
+			"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"
+		},
+		"./blank-stack/index": {
+			"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",

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

@@ -0,0 +1,134 @@
+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";
+
+type OverlayHostProps = {
+	scene: BlankStackScene;
+	isFloating?: boolean;
+};
+
+const getActiveFloatOverlay = (scenes: BlankStackScene[], index: number) => {
+	for (let i = index; 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 { animation, optimisticActiveIndex } = useOverlayAnimation();
+
+	if (!OverlayComponent) {
+		return null;
+	}
+
+	const overlayProps: BlankStackOverlayProps = {
+		route: scene.route,
+		navigation: scene.descriptor.navigation,
+		animation,
+		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>
+	);
+};

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

@@ -0,0 +1,102 @@
+import { SafeAreaProviderCompat } from "@react-navigation/elements";
+import {
+	NavigationContext,
+	NavigationRouteContext,
+} from "@react-navigation/native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { ScreenContainer } from "react-native-screens";
+import { BlankStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
+import { ScreenTransitionProvider } from "../../shared/providers/screen-transition-provider";
+import type { BlankStackDescriptor } from "../types";
+import { withStackNavigationProvider } from "../utils/with-stack-navigation";
+import { Overlay } from "./Overlay";
+import { Screen } from "./Screens";
+
+function isFabric() {
+	return "nativeFabricUIManager" in global;
+}
+
+type SceneViewProps = {
+	descriptor: BlankStackDescriptor;
+	isFocused: boolean;
+	sceneIndex: number;
+};
+
+const SceneView = ({ descriptor }: SceneViewProps) => {
+	const { route, navigation, render } = descriptor;
+
+	return (
+		<NavigationContext.Provider value={navigation}>
+			<NavigationRouteContext.Provider value={route}>
+				{descriptor.options.overlayMode === "screen" && <Overlay.Screen />}
+				{render()}
+			</NavigationRouteContext.Provider>
+		</NavigationContext.Provider>
+	);
+};
+
+export const StackView = withStackNavigationProvider(
+	({
+		activeScreensLimit,
+		descriptors,
+		focusedIndex,
+		routes,
+		scenes,
+		shouldShowFloatOverlay,
+	}) => {
+		return (
+			<GestureHandlerRootView>
+				<SafeAreaProviderCompat>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+					<ScreenContainer style={{ flex: 1 }}>
+						{scenes.map((scene, sceneIndex) => {
+							const descriptor = scene.descriptor;
+							const route = scene.route;
+							const isFocused = focusedIndex === sceneIndex;
+							const isBelowFocused = focusedIndex - 1 === sceneIndex;
+
+							const previousDescriptor =
+								scenes[sceneIndex - 1]?.descriptor ?? undefined;
+							const nextDescriptor =
+								scenes[sceneIndex + 1]?.descriptor ?? undefined;
+
+							const isPreloaded = descriptors[route.key] === undefined;
+
+							// On Fabric, when screen is frozen, animated and reanimated values are not updated
+							// due to component being unmounted. To avoid this, we don't freeze the previous screen there
+							const shouldFreeze = isFabric()
+								? !isPreloaded && !isFocused && !isBelowFocused
+								: !isPreloaded && !isFocused;
+							return (
+								<Screen
+									key={route.key}
+									isPreloaded={isPreloaded}
+									index={sceneIndex}
+									activeScreensLimit={activeScreensLimit}
+									routeKey={route.key}
+									routes={routes}
+									shouldFreeze={shouldFreeze}
+									freezeOnBlur={descriptor.options.freezeOnBlur}
+								>
+									<ScreenTransitionProvider
+										previous={previousDescriptor}
+										current={descriptor}
+										next={nextDescriptor}
+										LifecycleController={BlankStackScreenLifecycleController}
+									>
+										<SceneView
+											key={route.key}
+											isFocused={isFocused}
+											sceneIndex={sceneIndex}
+											descriptor={descriptor}
+										/>
+									</ScreenTransitionProvider>
+								</Screen>
+							);
+						})}
+					</ScreenContainer>
+				</SafeAreaProviderCompat>
+			</GestureHandlerRootView>
+		);
+	},
+);

package/src/blank-stack/hooks/use-overlay-animation.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import {
+	type DerivedValue,
+	type SharedValue,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useSharedValueState } from "../../shared/hooks/use-shared-value-state";
+import { useKeys } from "../../shared/providers/keys";
+import {
+	AnimationStore,
+	type AnimationStoreMap,
+} from "../../shared/stores/animation-store";
+import { GestureStore } from "../../shared/stores/gesture-store";
+import type { OverlayInterpolationProps } from "../../shared/types/animation";
+import { useStackNavigationContext } from "../utils/with-stack-navigation";
+
+/**
+ * Aggregates progress values for the overlay owner and every scene that sits
+ * above it in the stack. The result can be consumed by floating overlays to
+ * drive animations that span multiple screens.
+ */
+export const useOverlayAnimation = (): {
+	animation: DerivedValue<OverlayInterpolationProps>;
+	optimisticActiveIndex: number;
+} => {
+	const { current } = useKeys();
+	const { scenes, focusedIndex } = useStackNavigationContext();
+	const routeKey = current?.route?.key;
+
+	const gestureState = routeKey
+		? GestureStore.getRouteGestures(routeKey)
+		: null;
+
+	const fallbackIsDismissing = useSharedValue(0);
+
+	const progressValues = useMemo(() => {
+		if (!routeKey) {
+			return [];
+		}
+
+		const overlayIndex = scenes.findIndex(
+			(scene) => scene.route.key === routeKey,
+		);
+
+		if (overlayIndex === -1) {
+			return [];
+		}
+
+		return scenes.slice(overlayIndex).map((scene) => {
+			return AnimationStore.getAll(scene.route.key);
+		});
+	}, [routeKey, scenes]);
+
+	const accumulatedProgress = useDerivedValue(() => {
+		"worklet";
+
+		let total = 0;
+
+		for (let i = 0; i < progressValues.length; i += 1) {
+			total += progressValues[i].progress.value;
+		}
+
+		return total;
+	}, [progressValues]);
+
+	const optimisticActiveIndexValue = useDerivedValue(() => {
+		"worklet";
+
+		const activeIndex = progressValues.length - 1;
+
+		const isOneDismissing = Number(
+			progressValues.some((value) => value.closing.value > 0),
+		);
+
+		const optimisticIndex = activeIndex - isOneDismissing;
+
+		return optimisticIndex;
+	});
+
+	const optimisticActiveIndex = useSharedValueState(optimisticActiveIndexValue);
+
+	const screen = useWindowDimensions();
+
+	const insets = useSafeAreaInsets();
+
+	const animation = useDerivedValue<OverlayInterpolationProps>(() => ({
+		progress: accumulatedProgress.value,
+		layouts: {
+			screen,
+		},
+		insets,
+	}));
+
+	return {
+		animation,
+		optimisticActiveIndex,
+	};
+};