react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

package/lib/typescript/utils/animation/animate-to-progress.d.ts

@@ -1,5 +1,5 @@
 import type { SharedValue } from "react-native-reanimated";
-import { type AnimationStoreMap } from "../../stores/animation.store";
+import type { MotionAnimationValues } from "../../providers/screen/motion/types";
 import type { TransitionSpec } from "../../types/animation.types";
 interface AnimateToProgressProps {
     /**
@@ -10,7 +10,7 @@ interface AnimateToProgressProps {
      */
     target: "open" | "close" | number;
     spec?: TransitionSpec;
-    animations: AnimationStoreMap;
+    animations: MotionAnimationValues;
     targetProgress: SharedValue<number>;
     animationProgress: SharedValue<number>;
     emitWillAnimate?: boolean;

package/lib/typescript/utils/animation/animate-to-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate-to-progress.d.ts","sourceRoot":"","sources":["../../../../src/utils/animation/animate-to-progress.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EACN,KAAK,iBAAiB,EAEtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAGlE,UAAU,sBAAsB;IAC/B;;;;;OAKG;IACH,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACjC;AAsBD,eAAO,MAAM,6BAA6B,GACzC,iBAAiB,MAAM,EACvB,gBAAgB,MAAM;;;CAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,8HAU/B,sBAAsB,SAgGxB,CAAC"}
+{"version":3,"file":"animate-to-progress.d.ts","sourceRoot":"","sources":["../../../../src/utils/animation/animate-to-progress.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAGlE,UAAU,sBAAsB;IAC/B;;;;;OAKG;IACH,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,qBAAqB,CAAC;IAClC,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACjC;AAsBD,eAAO,MAAM,6BAA6B,GACzC,iBAAiB,MAAM,EACvB,gBAAgB,MAAM;;;CAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,8HAU/B,sBAAsB,SAgGxB,CAAC"}

package/lib/typescript/utils/create-provider.d.ts

@@ -19,7 +19,8 @@
  *
  * Providers created with `global: true` return a `key` from their factory.
  * Both generated store hooks accept that key to subscribe to the original
- * provider store from outside its React context.
+ * provider store from outside its React context. Arrays of keys return ordered
+ * snapshots (null for unmounted keys) and apply the selector to each store.
  */
 import { type ReactNode } from "react";
 type ProviderStoreHook<ContextValue> = {
@@ -27,6 +28,8 @@ type ProviderStoreHook<ContextValue> = {
     <Selected>(selector: (value: ContextValue) => Selected): Selected;
 };
 type GlobalProviderStoreHook<ContextValue> = {
+    (keys: readonly string[]): readonly (ContextValue | null)[];
+    <Selected>(keys: readonly string[], selector: (value: ContextValue) => Selected): readonly (Selected | null)[];
     (key: string): ContextValue;
     <Selected>(key: string, selector: (value: ContextValue) => Selected): Selected;
 };
@@ -35,6 +38,8 @@ type OptionalProviderStoreHook<ContextValue> = {
     <Selected>(selector: (value: ContextValue | null) => Selected): Selected;
 };
 type OptionalGlobalProviderStoreHook<ContextValue> = {
+    (keys: readonly string[]): readonly (ContextValue | null)[];
+    <Selected>(keys: readonly string[], selector: (value: ContextValue) => Selected): readonly (Selected | null)[];
     (key: string | null): ContextValue | null;
     <Selected>(key: string | null, selector: (value: ContextValue) => Selected): Selected | null;
 };
@@ -43,7 +48,6 @@ type ResolvedOptionalProviderStoreHook<ContextValue, Global extends boolean> = O
 type ProviderFactoryResult<ContextValue, Global extends boolean> = {
     value: ContextValue;
     children?: ReactNode;
-    unregisterOnCleanup?: boolean;
 } & (Global extends true ? {
     key: string;
 } : {
@@ -51,17 +55,19 @@ type ProviderFactoryResult<ContextValue, Global extends boolean> = {
 });
 export default function createProvider<ProviderName extends string, Global extends boolean = false>(name: ProviderName, options?: {
     global?: Global;
-}): <ProviderProps extends object, ContextValue>(factory: (props: ProviderProps) => ProviderFactoryResult<ContextValue, Global>) => {
+}): <ProviderProps extends object, ContextValue>(factory: (props: ProviderProps) => ProviderFactoryResult<ContextValue, Global>) => (Global extends true ? { [P in ProviderName as `get${P}Store`]: (key: string) => ContextValue; } : unknown) & {
     StoreProvider: {
-        ({ children, registerGlobally, storeKey, unregisterOnCleanup, value, }: {
+        ({ children, registerGlobally, storeKey, value, }: {
             children?: ReactNode;
             registerGlobally?: boolean;
             storeKey?: string;
-            unregisterOnCleanup?: boolean;
             value: ContextValue;
         }): import("react").JSX.Element;
         displayName: string;
     };
-} & { [P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>; } & { [P in ProviderName as `useOptional${P}Store`]: ResolvedOptionalProviderStoreHook<ContextValue, Global>; } & { [P in ProviderName as `use${P}Store`]: ResolvedProviderStoreHook<ContextValue, Global>; };
+} & { [P in ProviderName as `${P}Provider`]: React.FC<ProviderProps | (Global extends true ? {
+    screenKey: string;
+    children?: ReactNode;
+} : never)>; } & { [P in ProviderName as `useOptional${P}Store`]: ResolvedOptionalProviderStoreHook<ContextValue, Global>; } & { [P in ProviderName as `use${P}Store`]: ResolvedProviderStoreHook<ContextValue, Global>; };
 export {};
 //# sourceMappingURL=create-provider.d.ts.map

package/lib/typescript/utils/create-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-provider.d.ts","sourceRoot":"","sources":["../../../src/utils/create-provider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"create-provider.d.ts","sourceRoot":"","sources":["../../../src/utils/create-provider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "4.1.0-alpha.0",
+	"version": "4.1.0-beta.0",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -41,12 +41,6 @@
 			"import": "./lib/module/navigators/expo-router/index.js",
 			"require": "./lib/commonjs/navigators/expo-router/index.js",
 			"types": "./lib/typescript/navigators/expo-router/index.d.ts"
-		},
-		"./custom-navigator": {
-			"react-native": "./src/custom-navigator.ts",
-			"import": "./lib/module/custom-navigator.js",
-			"require": "./lib/commonjs/custom-navigator.js",
-			"types": "./lib/typescript/custom-navigator.d.ts"
 		}
 	},
 	"scripts": {
@@ -94,6 +88,7 @@
 	},
 	"devDependencies": {
 		"@react-navigation/native": "7.3.13",
+		"@react-navigation/native-stack": "7.18.10",
 		"@testing-library/react-native": "13.3.3",
 		"@types/react": "~19.2.17",
 		"expo-router": "56.2.11",

package/src/adapters/with-screen-transitions/factory-types.ts

@@ -0,0 +1,67 @@
+import type {
+	NavigationProp,
+	NavigationState,
+	NavigatorTypeBagBase,
+	ParamListBase,
+	StackActionHelpers,
+	StackNavigationState,
+	StaticConfig,
+	TypedNavigator,
+} from "@react-navigation/native";
+import type { NativeStackAdapterOptions } from "./options";
+
+type AdapterState<
+	Bag extends NavigatorTypeBagBase,
+	Params extends ParamListBase,
+> =
+	Bag["State"] extends StackNavigationState<ParamListBase>
+		? StackNavigationState<Params>
+		: Omit<Bag["State"], keyof NavigationState> & NavigationState<Params>;
+
+type AdapterNavigation<
+	Bag extends NavigatorTypeBagBase,
+	Params extends ParamListBase,
+	Name extends keyof Params,
+	ID extends string | undefined,
+> = Omit<
+	Bag["NavigationList"][keyof Bag["ParamList"]],
+	keyof NavigationProp<ParamListBase> | keyof StackActionHelpers<ParamListBase>
+> &
+	NavigationProp<
+		Params,
+		Name,
+		ID,
+		AdapterState<Bag, Params>,
+		NativeStackAdapterOptions<Bag["ScreenOptions"]>,
+		Bag["EventMap"]
+	> &
+	(Bag["State"] extends StackNavigationState<ParamListBase>
+		? StackActionHelpers<Params>
+		: {});
+
+type AdapterTypeBag<
+	Bag extends NavigatorTypeBagBase,
+	Params extends ParamListBase,
+	ID extends string | undefined,
+> = Omit<
+	Bag,
+	"ParamList" | "NavigatorID" | "State" | "ScreenOptions" | "NavigationList"
+> & {
+	ParamList: Params;
+	NavigatorID: ID;
+	State: AdapterState<Bag, Params>;
+	ScreenOptions: NativeStackAdapterOptions<Bag["ScreenOptions"]>;
+	NavigationList: {
+		[Name in keyof Params]: AdapterNavigation<Bag, Params, Name, ID>;
+	};
+};
+
+/** Retain the host's navigator props and events while adding transition options. */
+export type ScreenTransitionsFactory<Bag extends NavigatorTypeBagBase> = <
+	const Params extends ParamListBase = Bag["ParamList"],
+	const ID extends string | undefined = Bag["NavigatorID"],
+	const TypeBag extends NavigatorTypeBagBase = AdapterTypeBag<Bag, Params, ID>,
+	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(
+	config?: Config,
+) => TypedNavigator<TypeBag, Config>;

package/src/adapters/with-screen-transitions/index.tsx

@@ -2,7 +2,7 @@ import type {
 	NavigatorTypeBagBase,
 	TypedNavigator,
 } from "@react-navigation/native";
-import type { ComponentType, ReactNode } from "react";
+import type { ReactNode } from "react";
 import {
 	Children,
 	cloneElement,
@@ -11,6 +11,7 @@ import {
 	useCallback,
 	useMemo,
 } from "react";
+import type { ScreenTransitionsFactory } from "./factory-types";
 import type {
 	NativeStackAdapterOptionInput,
 	NativeStackAdapterOptions,
@@ -104,6 +105,66 @@ export function adaptNavigatorChildren(children: ReactNode): ReactNode {
 	});
 }
 
+function adaptStaticConfig(config: Record<string, any>): Record<string, any> {
+	const adaptScreens = (screens: Record<string, any>) =>
+		Object.fromEntries(
+			Object.entries(screens).map(([name, screen]) => [
+				name,
+				screen && typeof screen === "object" && "screen" in screen
+					? {
+							...screen,
+							options: adaptNativeStackTransitionOptions(screen.options),
+							...(typeof screen.layout === "function"
+								? { layout: createTransitionScreenLayout(screen.layout) }
+								: {}),
+						}
+					: screen,
+			]),
+		);
+
+	// Preserve screens/groups insertion order: it determines the initial route.
+	const adapted = { ...config };
+	if (config.screens) adapted.screens = adaptScreens(config.screens);
+	if (config.groups) {
+		adapted.groups = Object.fromEntries(
+			Object.entries(config.groups).map(([name, value]) => {
+				const group = value as Record<string, any>;
+				return [
+					name,
+					{
+						...group,
+						screens: adaptScreens(group.screens),
+						screenOptions: adaptNativeStackTransitionOptions(
+							group.screenOptions,
+						),
+						...(typeof group.screenLayout === "function"
+							? {
+									screenLayout: createTransitionScreenLayout(
+										group.screenLayout,
+									),
+								}
+							: {}),
+					},
+				];
+			}),
+		);
+	}
+	adapted.screenOptions = adaptNativeStackTransitionOptions(
+		config.screenOptions,
+	);
+	adapted.layout = (layoutArgs: NavigatorLayoutArgs) => (
+		<ScreenTransitionsStackLayout
+			layout={config.layout}
+			layoutArgs={layoutArgs}
+		/>
+	);
+	adapted.screenLayout = createTransitionScreenLayout(config.screenLayout);
+	return adapted;
+}
+
+export function withScreenTransitions<TBag extends NavigatorTypeBagBase>(
+	factory: () => TypedNavigator<TBag, unknown>,
+): ScreenTransitionsFactory<TBag>;
 export function withScreenTransitions<
 	TBag extends NavigatorTypeBagBase,
 	TConfig,
@@ -114,9 +175,21 @@ export function withScreenTransitions<
 	TNavigator extends NavigatorWithScreenTransitions,
 >(navigator: TNavigator): TNavigator;
 export function withScreenTransitions(
-	navigator: NavigatorWithScreenTransitions,
+	navigator: NavigatorWithScreenTransitions | ((config?: any) => any),
 ): any {
-	const BaseNavigator = navigator.Navigator as ComponentType<any>;
+	if (typeof navigator === "function" && !("Navigator" in navigator)) {
+		return (config?: Record<string, any>) =>
+			config == null
+				? withScreenTransitions(navigator())
+				: navigator(adaptStaticConfig(config));
+	}
+	const BaseNavigator = (navigator as NavigatorWithScreenTransitions)
+		?.Navigator;
+	if (!BaseNavigator) {
+		throw new Error(
+			"withScreenTransitions requires a navigator with a Navigator component. Pass the navigator factory itself for static configuration: withScreenTransitions(createNativeStackNavigator)({ screens: ... }).",
+		);
+	}
 
 	const Navigator = forwardRef<unknown, ScreenTransitionsNavigatorProps>(
 		function ScreenTransitionsNavigator(

package/src/adapters/with-screen-transitions/lifecycle/index.tsx

@@ -0,0 +1,13 @@
+import { useScreenLifecycle } from "../../../components/screen/lifecycle/use-screen-lifecycle";
+import { useBuilderStore } from "../../../providers/screen/builder";
+import { useNativeCloseTransitionIntent } from "./use-native-close-transition-intent";
+
+export function NativeStackLifecycle() {
+	const current = useBuilderStore((store) => store.descriptors.current);
+
+	const { completeClose } = useNativeCloseTransitionIntent(current);
+
+	useScreenLifecycle({ completeClose });
+
+	return null;
+}

package/src/adapters/with-screen-transitions/lifecycle/use-native-close-transition-intent.ts

@@ -0,0 +1,88 @@
+import { useLayoutEffect, useRef } from "react";
+import { resetStoresForScreen } from "../../../components/screen/lifecycle/hooks/helpers/reset-stores-for-screen";
+import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
+import useStableCallback from "../../../hooks/use-stable-callback";
+import type { BaseDescriptor } from "../../../providers/screen/builder";
+import { useScreenRelationships } from "../../../providers/screen/builder/topology";
+import { useOptionalMotionStore } from "../../../providers/screen/motion";
+import {
+	dispatchCloseAction,
+	isCloseActionReplay,
+} from "../../../utils/navigation/close-action-replay";
+import type { AdapterDescriptorOptions } from "../options";
+import {
+	doesNavigatorOwnCloseAction,
+	shouldInterceptClose,
+} from "./close-interception-rules";
+
+export function useNativeCloseTransitionIntent(current: BaseDescriptor): {
+	completeClose: () => void;
+} {
+	const routeKey = current.route.key;
+	const { parentScreenKey } = useScreenRelationships();
+	const { dismissScreen, requestDismiss } = useNavigationHelpers();
+	const pendingActionRef = useRef<any>(null);
+
+	const nearestAncestorDismissing = useOptionalMotionStore(
+		parentScreenKey ?? null,
+		(store) => store.state.dismissing,
+	);
+
+	const completeClose = useStableCallback(() => {
+		const pendingAction = pendingActionRef.current;
+		pendingActionRef.current = null;
+
+		if (pendingAction) {
+			dispatchCloseAction(pendingAction, (action) => {
+				current.navigation.dispatch(action);
+			});
+		} else {
+			dismissScreen();
+		}
+
+		resetStoresForScreen(routeKey);
+	});
+
+	const handleBeforeRemove = useStableCallback((event: any) => {
+		if (isCloseActionReplay(event.data.action)) {
+			return;
+		}
+
+		const state = current.navigation.getState();
+		const routeIndex = state.routes.findIndex(
+			(route) => route.key === routeKey,
+		);
+		const action = event.data.action;
+		const ownsAction = doesNavigatorOwnCloseAction({
+			state,
+			action,
+		});
+		const shouldIntercept = shouldInterceptClose({
+			enabled:
+				(current.options as AdapterDescriptorOptions).enableTransitions ===
+				true,
+			ownsAction,
+			ancestorDismissing: !!nearestAncestorDismissing?.get(),
+			routeIndex,
+			focusedIndex: state.index,
+		});
+
+		if (!shouldIntercept) {
+			return;
+		}
+
+		pendingActionRef.current ??= event.data.action;
+		if (!requestDismiss()) {
+			pendingActionRef.current = null;
+			return;
+		}
+
+		event.preventDefault();
+	});
+
+	useLayoutEffect(() => {
+		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
+	}, [current.navigation, handleBeforeRemove]);
+
+	return { completeClose };
+}

package/src/adapters/with-screen-transitions/stack-layout.tsx

@@ -1,16 +1,17 @@
 import type { NavigationState, Route } from "@react-navigation/native";
 import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Overlay } from "../../components/overlay";
-import { ScreenComposer } from "../../providers/screen/screen-composer";
+import { Screen } from "../../components/screen/screen";
 import { BlankStackStoreProvider } from "../../providers/stack/blank-stack.provider";
-import { StackCoreProvider } from "../../providers/stack/core.provider";
 import type { BaseStackDescriptor, BaseStackRoute } from "../../types";
-import { isOverlayVisible } from "../../utils/overlay/visibility";
 import {
 	ScreenTransitionsAdapterProvider,
 	type ScreenTransitionsAdapterScene,
 	useScreenTransitionsAdapterContext,
 } from "./context";
+import { NativeStackLifecycle } from "./lifecycle";
 import {
 	type AdapterDescriptorOptions,
 	resolveAdapterTransitionOptions,
@@ -109,9 +110,8 @@ function buildTransitionStackState({
 
 		if (
 			!shouldShowFloatOverlay &&
-			(normalizedDescriptor.options as AdapterDescriptorOptions)
-				.enableTransitions &&
-			isOverlayVisible(normalizedDescriptor.options)
+			normalizedDescriptor.options.overlay &&
+			normalizedDescriptor.options.overlayShown !== false
 		) {
 			shouldShowFloatOverlay = true;
 		}
@@ -182,9 +182,9 @@ export function ScreenTransitionsStackLayout(
 	props: ScreenTransitionsStackContentProps,
 ) {
 	return (
-		<StackCoreProvider config={{ TRANSITIONS_ALWAYS_ON: false }}>
+		<GestureHandlerRootView style={styles.container}>
 			<ScreenTransitionsStackContent {...props} />
-		</StackCoreProvider>
+		</GestureHandlerRootView>
 	);
 }
 
@@ -207,5 +207,11 @@ export function ScreenTransitionsScreenLayout({
 
 	const scene = scenes[sceneIndex];
 
-	return <ScreenComposer routeKey={scene.route.key}>{children}</ScreenComposer>;
+	return (
+		<Screen routeKey={scene.route.key} lifecycle={NativeStackLifecycle}>
+			{children}
+		</Screen>
+	);
 }
+
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/animation/snap-to.ts

@@ -1,7 +1,6 @@
 import { scheduleOnUI } from "react-native-worklets";
-import { AnimationStore } from "../stores/animation.store";
+import { getMotionStore } from "../providers/screen/motion";
 import type { HistoryEntry } from "../stores/history.store";
-import { SystemStore } from "../stores/system.store";
 import { animateToProgress } from "../utils/animation/animate-to-progress";
 import { resolveSnapTransitionSpec } from "../utils/animation/resolve-snap-transition-spec";
 import { logger } from "../utils/logger";
@@ -13,14 +12,13 @@ const getSortedSnapPoints = (
 	const snapPoints = descriptor.options?.snapPoints;
 	if (!snapPoints || snapPoints.length === 0) return null;
 
-	// Resolve 'auto' to the measured fraction stored in SystemStore
-	const autoVal = SystemStore.getValue(
+	// Resolve 'auto' to the measured fraction owned by Motion
+	const autoVal = getMotionStore(
 		descriptor.route.key,
-		"resolvedAutoSnapPoint",
-	).get();
+	).state.resolvedAutoSnapPoint.get();
 
 	const resolved = snapPoints
-		.map((p) => (p === "auto" ? autoVal : p))
+		.map((p) => (typeof p === "string" ? autoVal : p))
 		.filter((p): p is number => typeof p === "number" && p > 0);
 
 	return resolved.length > 0 ? resolved.sort((a, b) => a - b) : null;
@@ -44,15 +42,11 @@ export function snapDescriptorToIndex(
 	}
 
 	const targetProgress = sorted[index];
-	const animations = AnimationStore.getBag(descriptor.route.key);
-	const targetProgressValue = SystemStore.getValue(
-		descriptor.route.key,
-		"targetProgress",
-	);
-	const animationProgressValue = SystemStore.getValue(
-		descriptor.route.key,
-		"animationProgress",
-	);
+	const animations = getMotionStore(descriptor.route.key).state;
+	const {
+		targetProgress: targetProgressValue,
+		animationProgress: animationProgressValue,
+	} = animations;
 
 	scheduleOnUI(() => {
 		"worklet";

package/src/animation/transition-blocking.ts

@@ -1,5 +1,5 @@
+import { getMotionStore } from "../providers/screen/motion";
 import { HistoryStore } from "../stores/history.store";
-import { SystemStore } from "../stores/system.store";
 import type { ScreenKey } from "../types/screen.types";
 import { logger } from "../utils/logger";
 
@@ -52,7 +52,7 @@ export function blockTransition(routeKey?: ScreenKey): void {
 		return;
 	}
 
-	SystemStore.getBag(resolvedRouteKey).actions.blockLifecycleStart();
+	getMotionStore(resolvedRouteKey).state.actions.blockLifecycleStart();
 }
 
 /**
@@ -75,5 +75,5 @@ export function unblockTransition(routeKey?: ScreenKey): void {
 		return;
 	}
 
-	SystemStore.getBag(resolvedRouteKey).actions.unblockLifecycleStart();
+	getMotionStore(resolvedRouteKey).state.actions.unblockLifecycleStart();
 }

package/src/components/activity/variants/activity-screen.tsx

@@ -1,51 +1,62 @@
 import type * as React from "react";
-import { memo } from "react";
+import { memo, useState } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
 import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
+import { useOptionalMotionStore } from "../../../providers/screen/motion";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
-import { AnimationStore } from "../../../stores/animation.store";
 import type { StackSceneActivity } from "../../../types/stack.types";
 import { ActivityView, type ActivityViewMode } from "../activity-view";
 import { DEFAULT_INACTIVE_BEHAVIOR, type InactiveBehavior } from "../helpers";
 
+// Let the content and backdrop layers decide whether to capture touches.
 const PointerEventsByActivity = {
-	active: "auto",
-	inert: "auto",
+	active: "box-none",
+	inert: "box-none",
 	inactive: "none",
 	closing: "none",
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
 	children: React.ReactNode;
-	inactiveBehavior?: InactiveBehavior;
-	paintDriverRouteKey?: string;
-	hasNestedState?: boolean;
 	routeKey: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
 	children,
-	inactiveBehavior,
-	paintDriverRouteKey,
-	hasNestedState,
 	routeKey,
 }: ActivityScreenProps) {
 	const scene = useBlankStackStore((store) => store.scenesByKey[routeKey]);
-	const stackPaintDriverRouteKey = useBlankStackStore((store) =>
+	const paintDriverRouteKey = useBlankStackStore((store) =>
 		store.paintDriverRouteKeyByRouteKey.get(routeKey),
 	);
-	const stackInactiveBehavior = (
-		scene.descriptor.options as { inactiveBehavior?: InactiveBehavior }
-	).inactiveBehavior;
-	const resolvedInactiveBehavior =
-		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
-	const resolvedPaintDriverRouteKey =
-		paintDriverRouteKey ?? stackPaintDriverRouteKey;
-	const resolvedHasNestedState = hasNestedState ?? "state" in scene.route;
-	const paintDriverAnimations = resolvedPaintDriverRouteKey
-		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
-		: undefined;
+	const inactiveBehavior =
+		(scene.descriptor.options as { inactiveBehavior?: InactiveBehavior })
+			.inactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
+	const hasNestedState = "state" in scene.route;
+	const registeredPaintDriverProgress = useOptionalMotionStore(
+		paintDriverRouteKey ?? null,
+		(store) => store.state.transitionProgress,
+	);
+	const [paintDriver, setPaintDriver] = useState({
+		key: paintDriverRouteKey,
+		progress: registeredPaintDriverProgress,
+	});
+	// Activity disconnects the driver's provider when it pauses. Keep observing
+	// the same progress value so that pausing it doesn't wake older screens.
+	if (
+		paintDriver.key !== paintDriverRouteKey ||
+		(registeredPaintDriverProgress !== null &&
+			paintDriver.progress !== registeredPaintDriverProgress)
+	) {
+		setPaintDriver({
+			key: paintDriverRouteKey,
+			progress: registeredPaintDriverProgress,
+		});
+	}
+	const paintDriverProgress =
+		registeredPaintDriverProgress ??
+		(paintDriver.key === paintDriverRouteKey ? paintDriver.progress : null);
 
 	/**
 	 * Avoid hiding inactive content until the screen that exposes it has settled.
@@ -57,11 +68,11 @@ export const ActivityScreen = memo(function ActivityScreen({
 	const isPaintDriverSettled = useDerivedValue(() => {
 		"worklet";
 
-		if (!paintDriverAnimations) {
+		if (!paintDriverProgress) {
 			return false;
 		}
 
-		return paintDriverAnimations.transitionProgress.get() >= 1;
+		return paintDriverProgress.get() >= 1;
 	});
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
@@ -71,9 +82,9 @@ export const ActivityScreen = memo(function ActivityScreen({
 	let visible = scene.activity !== "inactive";
 
 	if (scene.activity === "inactive") {
-		if (resolvedInactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
+		if (inactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
 			visible = true;
-		} else if (resolvedInactiveBehavior === "pause") {
+		} else if (inactiveBehavior === "pause") {
 			activityViewMode = "paused";
 			visible = true;
 		} else {
@@ -83,9 +94,9 @@ export const ActivityScreen = memo(function ActivityScreen({
 	}
 
 	const shouldUnmount =
-		resolvedInactiveBehavior === "unmount" &&
+		inactiveBehavior === "unmount" &&
 		scene.activity === "inactive" &&
-		!resolvedHasNestedState &&
+		!hasNestedState &&
 		isPaintDriverSettledOnJS;
 
 	if (shouldUnmount) {