react-native-screen-transitions 3.1.0 → 3.2.0-beta.1

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

@@ -1,7 +1,7 @@
 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.types";
 import { type ActivationArea, type GestureActivationArea, GestureOffsetState } from "../../types/gesture.types";
+import type { Layout } from "../../types/screen.types";
 type Directions = {
     vertical: boolean;
     verticalInverted: boolean;

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

@@ -1 +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,wBAAwB,CAAC;AACrD,OAAO,EACN,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,2BAA2B,CAAC;AAEnC,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;AAED,KAAK,eAAe,GAAG;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,cAAc,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,UAAU,yBAAyB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAaD,wBAAgB,cAAc,CAAC,IAAI,CAAC,EAAE,qBAAqB,GAAG,eAAe,CAc5E;AAED,wBAAgB,sBAAsB,CACrC,YAAY,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACtC,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,eAAe,EACtB,gBAAgB,CAAC,EAAE,MAAM;;;;;EAczB;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;;EAmBhE;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,yBAAyB;;;EAyFrE;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA2EhC,CAAC"}
+{"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,EACN,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEvD,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;AAED,KAAK,eAAe,GAAG;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,cAAc,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,UAAU,yBAAyB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAaD,wBAAgB,cAAc,CAAC,IAAI,CAAC,EAAE,qBAAqB,GAAG,eAAe,CAc5E;AAED,wBAAgB,sBAAsB,CACrC,YAAY,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACtC,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,eAAe,EACtB,gBAAgB,CAAC,EAAE,MAAM;;;;;EAczB;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;;EAmBhE;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,yBAAyB;;;EAyFrE;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA2EhC,CAAC"}

package/lib/typescript/shared/utils/navigation/align-routes-with-latest.d.ts

@@ -0,0 +1,13 @@
+interface RouteWithKey {
+    key: string;
+}
+/**
+ * Aligns current routes with the latest route data while preserving references
+ * when possible for performance optimization
+ */
+export declare const alignRoutesWithLatest: <Route extends RouteWithKey, DescriptorMap extends Record<string, unknown>>(currentRoutes: Route[], currentDescriptors: DescriptorMap, nextRoutes: Route[], nextDescriptors: DescriptorMap) => {
+    routes: Route[];
+    descriptors: DescriptorMap;
+};
+export {};
+//# sourceMappingURL=align-routes-with-latest.d.ts.map

package/lib/typescript/shared/utils/navigation/align-routes-with-latest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"align-routes-with-latest.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/navigation/align-routes-with-latest.ts"],"names":[],"mappings":"AAEA,UAAU,YAAY;IACrB,GAAG,EAAE,MAAM,CAAC;CACZ;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GACjC,KAAK,SAAS,YAAY,EAC1B,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE7C,eAAe,KAAK,EAAE,EACtB,oBAAoB,aAAa,EACjC,YAAY,KAAK,EAAE,EACnB,iBAAiB,aAAa,KAC5B;IAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IAAC,WAAW,EAAE,aAAa,CAAA;CAiD/C,CAAC"}

package/lib/typescript/shared/utils/navigation/are-descriptors-equal.d.ts

@@ -0,0 +1,2 @@
+export declare const areDescriptorsEqual: <DescriptorMap extends Record<string, unknown>>(a: DescriptorMap, b: DescriptorMap) => boolean;
+//# sourceMappingURL=are-descriptors-equal.d.ts.map

package/lib/typescript/shared/utils/navigation/are-descriptors-equal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"are-descriptors-equal.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/navigation/are-descriptors-equal.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,GAC/B,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE7C,GAAG,aAAa,EAChB,GAAG,aAAa,KACd,OASF,CAAC"}

package/lib/typescript/shared/utils/navigation/compose-descriptors.d.ts

@@ -0,0 +1,6 @@
+interface RouteWithKey {
+    key: string;
+}
+export declare const composeDescriptors: <Route extends RouteWithKey, DescriptorMap extends Record<string, unknown>>(routes: Route[], nextDescriptors: DescriptorMap, currentDescriptors: DescriptorMap) => DescriptorMap;
+export {};
+//# sourceMappingURL=compose-descriptors.d.ts.map

package/lib/typescript/shared/utils/navigation/compose-descriptors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compose-descriptors.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/navigation/compose-descriptors.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACrB,GAAG,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,kBAAkB,GAC9B,KAAK,SAAS,YAAY,EAC1B,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE7C,QAAQ,KAAK,EAAE,EACf,iBAAiB,aAAa,EAC9B,oBAAoB,aAAa,KAC/B,aASF,CAAC"}

package/lib/typescript/shared/utils/navigation/have-same-route-keys.d.ts

@@ -0,0 +1,6 @@
+interface RouteWithKey {
+    key: string;
+}
+export declare const haveSameRouteKeys: <Route extends RouteWithKey>(previous: Route[], next: Route[]) => boolean;
+export {};
+//# sourceMappingURL=have-same-route-keys.d.ts.map

package/lib/typescript/shared/utils/navigation/have-same-route-keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"have-same-route-keys.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/navigation/have-same-route-keys.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACrB,GAAG,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,iBAAiB,GAAI,KAAK,SAAS,YAAY,EAC3D,UAAU,KAAK,EAAE,EACjB,MAAM,KAAK,EAAE,KACX,OAMF,CAAC"}

package/lib/typescript/shared/utils/navigation/routes-are-identical.d.ts

@@ -0,0 +1,6 @@
+interface RouteWithKey {
+    key: string;
+}
+export declare const routesAreIdentical: <Route extends RouteWithKey>(a: Route[], b: Route[]) => boolean;
+export {};
+//# sourceMappingURL=routes-are-identical.d.ts.map

package/lib/typescript/shared/utils/navigation/routes-are-identical.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes-are-identical.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/navigation/routes-are-identical.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACrB,GAAG,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,YAAY,EAC5D,GAAG,KAAK,EAAE,EACV,GAAG,KAAK,EAAE,KACR,OAKF,CAAC"}

package/lib/typescript/shared/utils/navigation/sync-routes-with-removed.d.ts

@@ -0,0 +1,21 @@
+import type { useClosingRouteKeys } from "../../hooks/navigation/use-closing-route-keys";
+interface RouteWithKey {
+    key: string;
+}
+type SyncRoutesWithRemovedParams<Route extends RouteWithKey, DescriptorMap extends Record<string, unknown>> = {
+    prevRoutes: Route[];
+    prevDescriptors: DescriptorMap;
+    nextRoutes: Route[];
+    nextDescriptors: DescriptorMap;
+    closingRouteKeys: ReturnType<typeof useClosingRouteKeys>;
+};
+/**
+ * Synchronizes routes while handling removed routes that may still be animating out.
+ * This manages the complex logic of keeping closing routes visible during transitions.
+ */
+export declare const syncRoutesWithRemoved: <Route extends RouteWithKey, DescriptorMap extends Record<string, unknown>>({ prevRoutes, prevDescriptors, nextRoutes, nextDescriptors, closingRouteKeys, }: SyncRoutesWithRemovedParams<Route, DescriptorMap>) => {
+    routes: Route[];
+    descriptors: DescriptorMap;
+};
+export {};
+//# sourceMappingURL=sync-routes-with-removed.d.ts.map

package/lib/typescript/shared/utils/navigation/sync-routes-with-removed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync-routes-with-removed.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/navigation/sync-routes-with-removed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAGzF,UAAU,YAAY;IACrB,GAAG,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,2BAA2B,CAC/B,KAAK,SAAS,YAAY,EAC1B,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC1C;IACH,UAAU,EAAE,KAAK,EAAE,CAAC;IACpB,eAAe,EAAE,aAAa,CAAC;IAC/B,UAAU,EAAE,KAAK,EAAE,CAAC;IACpB,eAAe,EAAE,aAAa,CAAC;IAC/B,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;CACzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GACjC,KAAK,SAAS,YAAY,EAC1B,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5C,iFAMC,2BAA2B,CAAC,KAAK,EAAE,aAAa,CAAC,KAAG;IACtD,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,WAAW,EAAE,aAAa,CAAC;CAoE3B,CAAC"}

package/lib/typescript/shared/utils/read-shared-value.d.ts

@@ -0,0 +1,7 @@
+import { type SharedValue } from "react-native-reanimated";
+/**
+ * Safely read a SharedValue from the UI thread.
+ * Avoids the "cannot read .value inside component render" warning.
+ */
+export declare const readSharedValue: <T>(sv: SharedValue<T>) => T;
+//# sourceMappingURL=read-shared-value.d.ts.map

package/lib/typescript/shared/utils/read-shared-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-shared-value.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/read-shared-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,WAAW,EAChB,MAAM,yBAAyB,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,CAAC,0BAIF,CAAC"}

package/lib/typescript/shared/utils/reset-stores-for-screen.d.ts

@@ -1,6 +1,7 @@
-import type { TransitionDescriptor } from "../providers/keys.provider";
+import type { BaseStackDescriptor } from "../types/stack.types";
 /**
- * Reset all stores for a given screen
+ * Reset all stores for a given screen.
+ * Accepts any descriptor that has a route with a key.
  */
-export declare const resetStoresForScreen: (current: TransitionDescriptor) => void;
+export declare const resetStoresForScreen: (current: BaseStackDescriptor) => void;
 //# sourceMappingURL=reset-stores-for-screen.d.ts.map

package/lib/typescript/shared/utils/reset-stores-for-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reset-stores-for-screen.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/reset-stores-for-screen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAKvE;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,oBAAoB,SAIjE,CAAC"}
+{"version":3,"file":"reset-stores-for-screen.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/reset-stores-for-screen.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,mBAAmB,SAIhE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screen-transitions",
-  "version": "3.1.0",
+  "version": "3.2.0-beta.1",
   "description": "Easy screen transitions for React Native and Expo",
   "author": "Ed",
   "license": "MIT",
@@ -31,6 +31,12 @@
       "import": "./lib/module/blank-stack/index.js",
       "require": "./lib/commonjs/blank-stack/index.js",
       "types": "./lib/typescript/blank-stack/index.d.ts"
+    },
+    "./component-stack": {
+      "react-native": "./src/component-stack/index.ts",
+      "import": "./lib/module/component-stack/index.js",
+      "require": "./lib/commonjs/component-stack/index.js",
+      "types": "./lib/typescript/component-stack/index.d.ts"
     }
   },
   "scripts": {
@@ -67,7 +73,6 @@
     "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:"

package/src/blank-stack/components/adjusted-screen-container.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet, View } from "react-native";
+import { ScreenContainer } from "react-native-screens";
+import { useStack } from "../../shared/hooks/navigation/use-stack";
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export const AdjustedScreenContainer = ({ children }: Props) => {
+	const {
+		flags: { DISABLE_NATIVE_SCREENS = false },
+	} = useStack();
+	if (!DISABLE_NATIVE_SCREENS) {
+		return (
+			<ScreenContainer style={styles.container}>{children}</ScreenContainer>
+		);
+	}
+	return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+});

package/src/blank-stack/components/{screens.tsx → adjusted-screen.tsx}

@@ -1,14 +1,18 @@
 import type * as React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, type View } from "react-native";
 import Animated, {
+	Extrapolation,
 	interpolate,
 	useAnimatedProps,
+	useAnimatedRef,
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
 import { Screen as RNSScreen } from "react-native-screens";
+import { useStack } from "../../shared/hooks/navigation/use-stack";
+import { LayoutAnchorProvider } from "../../shared/providers/layout-anchor.provider";
+import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
 import { AnimationStore } from "../../shared/stores/animation.store";
-import { useStackNavigationContext } from "../utils/with-stack-navigation";
 
 interface ScreenProps {
 	routeKey: string;
@@ -25,10 +29,12 @@ enum ScreenActivity {
 }
 
 const EPSILON = 1e-5;
+const POINT_NONE = "none" as const;
+const POINT_BOX_NONE = "box-none" as const;
 
-const AnimatedScreen = Animated.createAnimatedComponent(RNSScreen);
+const AnimatedNativeScreen = Animated.createAnimatedComponent(RNSScreen);
 
-export const Screen = ({
+export const AdjustedScreen = ({
 	routeKey,
 	index,
 	isPreloaded,
@@ -36,8 +42,12 @@ export const Screen = ({
 	freezeOnBlur,
 	shouldFreeze,
 }: ScreenProps) => {
-	const { activeScreensLimit, routes } = useStackNavigationContext();
+	const {
+		flags: { DISABLE_NATIVE_SCREENS = false },
+	} = useStack();
+	const { activeScreensLimit, routes } = useManagedStackContext();
 	const routesLength = routes.length;
+	const screenRef = useAnimatedRef<View>();
 
 	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");
 	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
@@ -65,7 +75,7 @@ export const Screen = ({
 				sceneProgress.get(),
 				[0, 1 - EPSILON, 1],
 				[1, 1, outputValue],
-				"clamp",
+				Extrapolation.CLAMP,
 			);
 
 			const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
@@ -78,23 +88,34 @@ export const Screen = ({
 
 	const animatedProps = useAnimatedProps(() => {
 		const activity = screenActivity.get();
+		if (!DISABLE_NATIVE_SCREENS) {
+			return {
+				activityState: activity,
+				shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
+				pointerEvents: sceneClosing.get() ? POINT_NONE : POINT_BOX_NONE,
+			};
+		}
+
 		return {
-			activityState: activity,
-			shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
-			pointerEvents: sceneClosing.get()
-				? ("none" as const)
-				: ("box-none" as const),
+			pointerEvents: sceneClosing.get() ? POINT_NONE : POINT_BOX_NONE,
 		};
 	});
 
+	const AdjustedScreenComponent = !DISABLE_NATIVE_SCREENS
+		? AnimatedNativeScreen
+		: Animated.View;
+
 	return (
-		<AnimatedScreen
+		<AdjustedScreenComponent
 			enabled
+			ref={screenRef}
 			style={StyleSheet.absoluteFill}
 			freezeOnBlur={freezeOnBlur}
 			animatedProps={animatedProps}
 		>
-			{children}
-		</AnimatedScreen>
+			<LayoutAnchorProvider anchorRef={screenRef}>
+				{children}
+			</LayoutAnchorProvider>
+		</AdjustedScreenComponent>
 	);
 };

package/src/blank-stack/components/stack-view.native.tsx

@@ -0,0 +1,94 @@
+import {
+	NavigationContext,
+	NavigationRouteContext,
+} from "@react-navigation/native";
+import * as React from "react";
+import { Fragment } from "react";
+import { Overlay } from "../../shared/components/overlay";
+import { ManagedLifecycle } from "../../shared/controller/managed-lifecycle";
+import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
+import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { withManagedStack } from "../../shared/providers/stack/managed.provider";
+import type {
+	BlankStackDescriptor,
+	BlankStackNavigationHelpers,
+} from "../types";
+import { AdjustedScreen } from "./adjusted-screen";
+import { AdjustedScreenContainer } from "./adjusted-screen-container";
+
+function isFabric() {
+	return "nativeFabricUIManager" in global;
+}
+
+type SceneViewProps = {
+	descriptor: BlankStackDescriptor;
+};
+
+const SceneView = React.memo(function 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 = withStackCore(
+	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: false },
+	withManagedStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
+		({ descriptors, focusedIndex, scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+					<AdjustedScreenContainer>
+						{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 (
+								<AdjustedScreen
+									key={route.key}
+									isPreloaded={isPreloaded}
+									index={sceneIndex}
+									routeKey={route.key}
+									shouldFreeze={shouldFreeze}
+									freezeOnBlur={descriptor.options.freezeOnBlur}
+								>
+									<ScreenComposer
+										previous={previousDescriptor}
+										current={descriptor}
+										next={nextDescriptor}
+										LifecycleController={ManagedLifecycle}
+									>
+										<SceneView key={route.key} descriptor={descriptor} />
+									</ScreenComposer>
+								</AdjustedScreen>
+							);
+						})}
+					</AdjustedScreenContainer>
+				</Fragment>
+			);
+		},
+	),
+);

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

@@ -1,20 +1,20 @@
-import { SafeAreaProviderCompat } from "@react-navigation/elements";
 import {
 	NavigationContext,
 	NavigationRouteContext,
 } from "@react-navigation/native";
 import * as React from "react";
-import { StyleSheet } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { ScreenContainer } from "react-native-screens";
-import { BlankStackScreenLifecycleController } from "../../shared/components/controllers/blank-stack-lifecycle";
-import { FlagsProvider } from "../../shared/providers/flags.provider";
-import { RoutesProvider } from "../../shared/providers/routes.provider";
-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";
+import { Fragment } from "react";
+import { Overlay } from "../../shared/components/overlay";
+import { ManagedLifecycle } from "../../shared/controller/managed-lifecycle";
+import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
+import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { withManagedStack } from "../../shared/providers/stack/managed.provider";
+import type {
+	BlankStackDescriptor,
+	BlankStackNavigationHelpers,
+} from "../types";
+import { AdjustedScreen } from "./adjusted-screen";
+import { AdjustedScreenContainer } from "./adjusted-screen-container";
 
 function isFabric() {
 	return "nativeFabricUIManager" in global;
@@ -39,70 +39,56 @@ const SceneView = React.memo(function SceneView({
 	);
 });
 
-export const StackView = withStackNavigationProvider(
-	({ descriptors, focusedIndex, routes, scenes, shouldShowFloatOverlay }) => {
-		// Memoize route keys array for ScenesProvider
-		const routeKeys = React.useMemo(
-			() => routes.map((route) => route.key),
-			[routes],
-		);
+export const StackView = withStackCore(
+	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: true },
+	withManagedStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
+		({ descriptors, focusedIndex, scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
 
-		return (
-			<FlagsProvider TRANSITIONS_ALWAYS_ON>
-				<RoutesProvider routeKeys={routeKeys}>
-					<GestureHandlerRootView>
-						<SafeAreaProviderCompat>
-							{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-							<ScreenContainer style={styles.container}>
-								{scenes.map((scene, sceneIndex) => {
-									const descriptor = scene.descriptor;
-									const route = scene.route;
-									const isFocused = focusedIndex === sceneIndex;
-									const isBelowFocused = focusedIndex - 1 === sceneIndex;
+					<AdjustedScreenContainer>
+						{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 previousDescriptor =
+								scenes[sceneIndex - 1]?.descriptor ?? undefined;
+							const nextDescriptor =
+								scenes[sceneIndex + 1]?.descriptor ?? undefined;
 
-									const isPreloaded = descriptors[route.key] === 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}
-											routeKey={route.key}
-											shouldFreeze={shouldFreeze}
-											freezeOnBlur={descriptor.options.freezeOnBlur}
-										>
-											<ScreenTransitionProvider
-												previous={previousDescriptor}
-												current={descriptor}
-												next={nextDescriptor}
-												LifecycleController={
-													BlankStackScreenLifecycleController
-												}
-											>
-												<SceneView key={route.key} descriptor={descriptor} />
-											</ScreenTransitionProvider>
-										</Screen>
-									);
-								})}
-							</ScreenContainer>
-						</SafeAreaProviderCompat>
-					</GestureHandlerRootView>
-				</RoutesProvider>
-			</FlagsProvider>
-		);
-	},
+							// 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 (
+								<AdjustedScreen
+									key={route.key}
+									isPreloaded={isPreloaded}
+									index={sceneIndex}
+									routeKey={route.key}
+									shouldFreeze={shouldFreeze}
+									freezeOnBlur={descriptor.options.freezeOnBlur}
+								>
+									<ScreenComposer
+										previous={previousDescriptor}
+										current={descriptor}
+										next={nextDescriptor}
+										LifecycleController={ManagedLifecycle}
+									>
+										<SceneView key={route.key} descriptor={descriptor} />
+									</ScreenComposer>
+								</AdjustedScreen>
+							);
+						})}
+					</AdjustedScreenContainer>
+				</Fragment>
+			);
+		},
+	),
 );
-
-const styles = StyleSheet.create({
-	container: { flex: 1 },
-});

package/src/blank-stack/types.ts

@@ -11,12 +11,8 @@ import type {
 	StackRouterOptions,
 	Theme,
 } from "@react-navigation/native";
-import type { DerivedValue } from "react-native-reanimated";
 import type { ScreenTransitionConfig } from "../shared";
-import type {
-	OverlayInterpolationProps,
-	ScreenInterpolationProps,
-} from "../shared/types/animation.types";
+import type { OverlayProps } from "../shared/types/overlay.types";
 
 export type BlankStackNavigationEventMap = {};
 
@@ -61,47 +57,19 @@ export type BlankStackScene = {
 	descriptor: BlankStackDescriptor;
 };
 
-// We want it to be an empty object because navigator does not have any additional props
-export type BlankStackNavigationConfig = {};
-
-export type BlankStackOverlayProps = {
-	/**
-	 * Route of the currently focused screen in the stack.
-	 */
-	focusedRoute: Route<string>;
-
-	/**
-	 * Index of the focused route in the stack.
-	 */
-	focusedIndex: number;
-
-	/**
-	 * All routes currently in the stack.
-	 */
-	routes: Route<string>[];
-
-	/**
-	 * Custom metadata from the focused screen's options.
-	 */
-	meta?: Record<string, unknown>;
-
-	/**
-	 * Navigation prop for the overlay.
-	 */
-	navigation: BlankStackNavigationProp<ParamListBase>;
-
-	/**
-	 * Animation values for the overlay.
-	 */
-	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
-
-	/**
-	 * Animation values for the screen.
-	 */
-	screenAnimation: DerivedValue<ScreenInterpolationProps>;
+type BlankStackNavigationConfig = {
+	DISABLE_NATIVE_SCREENS?: boolean;
 };
 
-export type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
+/**
+ * Props passed to overlay components in blank-stack.
+ * Uses the shared OverlayProps type with blank-stack's navigation type.
+ */
+export type BlankStackOverlayProps = OverlayProps<
+	BlankStackNavigationProp<ParamListBase>
+>;
+
+type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
 	/**
 	 * Whether to detach the previous screen from the view hierarchy to save memory.
 	 * Set it to `false` if you need the previous screen to be seen through the active screen.
@@ -111,25 +79,6 @@ export type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
 };
 
 export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
-	/**
-	 * Function that given `OverlayProps` returns a React Element to display as a overlay.
-	 */
-	overlay?: (props: BlankStackOverlayProps) => React.ReactNode;
-
-	/**
-	 * Layout: How the Overlay is positioned
-	 * - 'float': Single persistent overlay above all screens (like iOS)
-	 * - 'screen': Per-screen overlay that transitions with content
-	 * @default 'screen'
-	 */
-	overlayMode?: "float" | "screen";
-
-	/**
-	 * Whether to show the overlay. The overlay is shown by default.
-	 * Setting this to `false` hides the overlay.
-	 */
-	overlayShown?: boolean;
-
 	/**
 	 * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
 	 * Defaults to `true` when `enableFreeze()` is run at the top of the application.