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

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;AAMzF,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;AAoBF;;;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;CA6E3B,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.0",
   "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/screens.tsx

@@ -7,8 +7,8 @@ import Animated, {
 	useSharedValue,
 } from "react-native-reanimated";
 import { Screen as RNSScreen } from "react-native-screens";
+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;
@@ -36,7 +36,7 @@ export const Screen = ({
 	freezeOnBlur,
 	shouldFreeze,
 }: ScreenProps) => {
-	const { activeScreensLimit, routes } = useStackNavigationContext();
+	const { activeScreensLimit, routes } = useManagedStackContext();
 	const routesLength = routes.length;
 
 	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");

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

@@ -1,19 +1,20 @@
-import { SafeAreaProviderCompat } from "@react-navigation/elements";
 import {
 	NavigationContext,
 	NavigationRouteContext,
 } from "@react-navigation/native";
 import * as React from "react";
+import { Fragment } 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 { Overlay } from "../../shared/components/overlay";
+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 { BlankStackScreenLifecycleController } from "../controllers/blank-stack-lifecycle";
+import type {
+	BlankStackDescriptor,
+	BlankStackNavigationHelpers,
+} from "../types";
 import { Screen } from "./screens";
 
 function isFabric() {
@@ -39,68 +40,59 @@ 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 },
+	withManagedStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
+		({ descriptors, focusedIndex, scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+					<Overlay.Container>
+						<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;
 
-		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;
+								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}
+								// 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}
+									>
+										<ScreenComposer
+											previous={previousDescriptor}
+											current={descriptor}
+											next={nextDescriptor}
+											LifecycleController={BlankStackScreenLifecycleController}
 										>
-											<ScreenTransitionProvider
-												previous={previousDescriptor}
-												current={descriptor}
-												next={nextDescriptor}
-												LifecycleController={
-													BlankStackScreenLifecycleController
-												}
-											>
-												<SceneView key={route.key} descriptor={descriptor} />
-											</ScreenTransitionProvider>
-										</Screen>
-									);
-								})}
-							</ScreenContainer>
-						</SafeAreaProviderCompat>
-					</GestureHandlerRootView>
-				</RoutesProvider>
-			</FlagsProvider>
-		);
-	},
+											<SceneView key={route.key} descriptor={descriptor} />
+										</ScreenComposer>
+									</Screen>
+								);
+							})}
+						</ScreenContainer>
+					</Overlay.Container>
+				</Fragment>
+			);
+		},
+	),
 );
 
 const styles = StyleSheet.create({

package/src/{shared/components → blank-stack}/controllers/blank-stack-lifecycle.tsx

@@ -1,14 +1,15 @@
 import { useLayoutEffect } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
-import type { BlankStackDescriptor } from "../../../blank-stack/types";
-import { useStackNavigationContext } from "../../../blank-stack/utils/with-stack-navigation";
-import useStableCallback from "../../hooks/use-stable-callback";
-import { useKeys } from "../../providers/keys.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
-import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
+import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
+import { useHighRefreshRate } from "../../shared/hooks/animation/use-high-refresh-rate";
+import useStableCallback from "../../shared/hooks/use-stable-callback";
+import { useKeys } from "../../shared/providers/screen/keys.provider";
+import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+import { startScreenTransition } from "../../shared/utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../../shared/utils/reset-stores-for-screen";
+import type { BlankStackDescriptor } from "../types";
 
-export interface Props {
+interface Props {
 	children: React.ReactNode;
 }
 
@@ -17,16 +18,20 @@ export interface Props {
  */
 export const BlankStackScreenLifecycleController = ({ children }: Props) => {
 	const { current } = useKeys<BlankStackDescriptor>();
-	const { handleCloseRoute, closingRouteKeysShared } =
-		useStackNavigationContext();
+	const { handleCloseRoute, closingRouteKeysShared } = useManagedStackContext();
 
 	const animations = AnimationStore.getAll(current.route.key);
 
+	const { deactivateHighRefreshRate, activateHighRefreshRate } =
+		useHighRefreshRate(current);
+
 	const handleInitialize = useStableCallback(() => {
+		activateHighRefreshRate();
 		startScreenTransition({
 			target: "open",
 			spec: current.options.transitionSpec,
 			animations,
+			onAnimationFinish: deactivateHighRefreshRate,
 		});
 	});
 
@@ -35,6 +40,7 @@ export const BlankStackScreenLifecycleController = ({ children }: Props) => {
 	});
 
 	const handleCloseEnd = useStableCallback((finished: boolean) => {
+		deactivateHighRefreshRate();
 		if (!finished) {
 			return;
 		}
@@ -50,6 +56,7 @@ export const BlankStackScreenLifecycleController = ({ children }: Props) => {
 				return;
 			}
 
+			runOnJS(activateHighRefreshRate)();
 			startScreenTransition({
 				target: "close",
 				spec: current.options.transitionSpec,

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 = {};
 
@@ -62,46 +58,17 @@ export type BlankStackScene = {
 };
 
 // We want it to be an empty object because navigator does not have any additional props
-export type BlankStackNavigationConfig = {};
+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>;
-};
+/**
+ * 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>
+>;
 
-export type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
+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 +78,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.

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

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { Overlay } from "../../shared/components/overlay";
+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 { ComponentStackScreenLifecycleController } from "../controllers/component-stack-lifecycle";
+import type { ComponentNavigation, ComponentStackDescriptor } from "../types";
+import { Screen } from "./screens";
+
+type SceneViewProps = {
+	descriptor: ComponentStackDescriptor;
+};
+
+const SceneView = React.memo(function SceneView({
+	descriptor,
+}: SceneViewProps) {
+	return (
+		<>
+			{descriptor.options.overlayMode === "screen" && <Overlay.Screen />}
+			{descriptor.render()}
+		</>
+	);
+});
+
+export const ComponentView = withStackCore(
+	{ TRANSITIONS_ALWAYS_ON: true },
+	withManagedStack<ComponentStackDescriptor, ComponentNavigation>(
+		({ scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+					<Overlay.Container>
+						<View style={styles.container}>
+							{scenes.map((scene, sceneIndex) => {
+								const descriptor = scene.descriptor;
+								const route = scene.route;
+
+								const previousDescriptor = scenes[sceneIndex - 1]?.descriptor;
+								const nextDescriptor = scenes[sceneIndex + 1]?.descriptor;
+
+								return (
+									<Screen
+										key={route.key}
+										index={sceneIndex}
+										routeKey={route.key}
+									>
+										<ScreenComposer
+											previous={previousDescriptor}
+											current={descriptor}
+											next={nextDescriptor}
+											LifecycleController={
+												ComponentStackScreenLifecycleController
+											}
+										>
+											<SceneView key={route.key} descriptor={descriptor} />
+										</ScreenComposer>
+									</Screen>
+								);
+							})}
+						</View>
+					</Overlay.Container>
+				</Fragment>
+			);
+		},
+	),
+);
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/component-stack/components/screens.tsx

@@ -0,0 +1,86 @@
+import type * as React from "react";
+import { StyleSheet } from "react-native";
+import Animated, {
+	interpolate,
+	useAnimatedProps,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+
+interface ScreenProps {
+	routeKey: string;
+	index: number;
+	children: React.ReactNode;
+}
+
+enum ScreenActivity {
+	INACTIVE = 0,
+	TRANSITIONING_OR_BELOW_TOP = 1,
+	ON_TOP = 2,
+}
+
+const EPSILON = 1e-5;
+
+export const Screen = ({ routeKey, index, children }: ScreenProps) => {
+	const { activeScreensLimit, routes } = useManagedStackContext();
+	const routesLength = routes.length;
+
+	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");
+	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
+	const screenActivity = useSharedValue<ScreenActivity>(
+		ScreenActivity.TRANSITIONING_OR_BELOW_TOP,
+	);
+
+	useDerivedValue(() => {
+		if (!sceneProgress) {
+			screenActivity.set(ScreenActivity.TRANSITIONING_OR_BELOW_TOP);
+			return;
+		}
+
+		if (index < routesLength - activeScreensLimit - 1) {
+			screenActivity.set(ScreenActivity.INACTIVE);
+		} else {
+			const outputValue =
+				index === routesLength - 1
+					? ScreenActivity.ON_TOP
+					: index >= routesLength - activeScreensLimit
+						? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
+						: ScreenActivity.INACTIVE;
+
+			const v = interpolate(
+				sceneProgress.get(),
+				[0, 1 - EPSILON, 1],
+				[1, 1, outputValue],
+				"clamp",
+			);
+
+			const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
+
+			if (next !== screenActivity.get()) {
+				screenActivity.set(next);
+			}
+		}
+	});
+
+	const animatedProps = useAnimatedProps(() => {
+		// const activity = screenActivity.get();
+		return {
+			// activityState: activity,
+			// shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
+			pointerEvents: sceneClosing.get()
+				? ("none" as const)
+				: ("box-none" as const),
+		};
+	});
+
+	return (
+		<Animated.View
+			style={StyleSheet.absoluteFill}
+			animatedProps={animatedProps}
+		>
+			{children}
+		</Animated.View>
+	);
+};