react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.8

package/src/providers/screen/gestures/scroll-coordination/scroll-metadata-owner.tsx

@@ -14,21 +14,20 @@ const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
 	horizontal: false,
 };
 
-const {
+export const {
 	ScrollMetadataOwnerProvider,
-	useScrollMetadataOwnerStore: useMaybeScrollMetadataOwnerStore,
-} = createProvider("ScrollMetadataOwner", { guarded: false })<
+	useOptionalScrollMetadataOwnerStore,
+} = createProvider("ScrollMetadataOwner")<
 	ScrollMetadataOwnerProviderProps,
 	ScrollMetadataOwnerContextValue
 >(({ children, value }) => ({ children, value }));
 
-export const useScrollMetadataOwnerStore = () =>
-	useMaybeScrollMetadataOwnerStore() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
-
 export const useScrollMetadataOwnerProviderValue = (
 	axis: ScrollGestureAxis,
 ) => {
-	const parent = useScrollMetadataOwnerStore();
+	const parent =
+		useOptionalScrollMetadataOwnerStore() ??
+		DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
 
 	return useMemo(() => {
 		if (parent[axis]) return parent;
@@ -39,5 +38,3 @@ export const useScrollMetadataOwnerProviderValue = (
 		};
 	}, [axis, parent]);
 };
-
-export { ScrollMetadataOwnerProvider };

package/src/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -10,7 +10,7 @@ import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-val
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
-import { useGestureStore } from "../gestures.provider";
+import { useOptionalScreenGestureStore } from "../gestures.provider";
 import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
@@ -18,8 +18,8 @@ import type {
 	ScrollMetadataState,
 } from "../types";
 import {
+	useOptionalScrollMetadataOwnerStore,
 	useScrollMetadataOwnerProviderValue,
-	useScrollMetadataOwnerStore,
 } from "./scroll-metadata-owner";
 import {
 	clearScrollMetadataAxisState,
@@ -88,21 +88,25 @@ const clearScrollMetadataAxis = (
 export const useScrollGestureCoordination = (
 	props: ScrollGestureCoordinationProps,
 ) => {
-	const context = useGestureStore();
+	const context = useOptionalScreenGestureStore();
 	const scrollDirection = props.direction ?? "vertical";
+	const gesturePath = useMemo(
+		() => (context ? [context, ...context.ancestorGestures] : []),
+		[context],
+	);
 
-	const metadataOwnerContext = useScrollMetadataOwnerStore();
+	const metadataOwnerContext = useOptionalScrollMetadataOwnerStore();
 	const metadataOwnerProviderValue =
 		useScrollMetadataOwnerProviderValue(scrollDirection);
-	const isFirstMetadataWriterInTree = !metadataOwnerContext[scrollDirection];
+	const isFirstMetadataWriterInTree = !metadataOwnerContext?.[scrollDirection];
 	const [metadataWriterId] = useState(() =>
 		ScrollStore.createMetadataWriterId(),
 	);
 	const [writesMetadata, setWritesMetadata] = useState(false);
 
 	const { scrollStates, panGestures, pinchGestures, ownerRouteKeys } = useMemo(
-		() => walkUpScrollGestureCoordination(context, scrollDirection),
-		[context, scrollDirection],
+		() => walkUpScrollGestureCoordination(gesturePath, scrollDirection),
+		[gesturePath, scrollDirection],
 	);
 
 	const routeKey = context?.routeKey;

package/src/providers/screen/gestures/scroll-coordination/walk-up-scroll-gesture-coordination.ts

@@ -1,19 +1,18 @@
 import type { SharedValue } from "react-native-reanimated";
 import type { Direction } from "../../../../types/ownership.types";
-import { walkGestureAncestors } from "../shared/ancestors";
 import type {
-	GestureContextType,
 	PanGesture,
 	PinchGesture,
+	ScreenGestureSource,
 	ScrollGestureAxis,
 	ScrollGestureState,
 } from "../types";
 
 /** Walks up the gesture tree until it finds the owner for a specific direction. */
 function findGestureOwnerForDirection(
-	ancestors: GestureContextType[],
+	ancestors: readonly ScreenGestureSource[],
 	direction: Direction,
-): GestureContextType | null {
+): ScreenGestureSource | null {
 	for (const ancestor of ancestors) {
 		if (ancestor.claimedDirections?.[direction]) return ancestor;
 	}
@@ -28,8 +27,10 @@ const getDirectionsForAxis = (
 		? ["vertical", "vertical-inverted"]
 		: ["horizontal", "horizontal-inverted"];
 
-const collectAncestorPinchGestures = (ancestors: GestureContextType[]) => {
-	const pinchGestures: GestureContextType["pinchGesture"][] = [];
+const collectAncestorPinchGestures = (
+	ancestors: readonly ScreenGestureSource[],
+) => {
+	const pinchGestures: ScreenGestureSource["pinchGesture"][] = [];
 
 	for (const ancestor of ancestors) {
 		if (!pinchGestures.includes(ancestor.pinchGesture)) {
@@ -41,12 +42,12 @@ const collectAncestorPinchGestures = (ancestors: GestureContextType[]) => {
 };
 
 const collectAxisOwners = (
-	ancestors: GestureContextType[],
+	ancestors: readonly ScreenGestureSource[],
 	directions: readonly [Direction, Direction],
 ) => {
-	const seenOwners: GestureContextType[] = [];
-	const panGestures: GestureContextType["panGesture"][] = [];
-	const scrollStates: GestureContextType["scrollState"][] = [];
+	const seenOwners: ScreenGestureSource[] = [];
+	const panGestures: ScreenGestureSource["panGesture"][] = [];
+	const scrollStates: ScreenGestureSource["scrollState"][] = [];
 	const ownerRouteKeys: string[] = [];
 
 	for (const direction of directions) {
@@ -73,10 +74,9 @@ interface WalkUpScrollGestureCoordinationResult {
 }
 
 export function walkUpScrollGestureCoordination(
-	context: GestureContextType | null,
+	ancestors: readonly ScreenGestureSource[],
 	axis: ScrollGestureAxis,
 ): WalkUpScrollGestureCoordinationResult {
-	const ancestors = walkGestureAncestors(context);
 	const axisOwners = collectAxisOwners(ancestors, getDirectionsForAxis(axis));
 
 	return {

package/src/providers/screen/gestures/shared/policy.ts

@@ -10,7 +10,6 @@ import {
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
 } from "../../../../constants";
 import type {
-	GestureActivationArea,
 	GestureDirectionActivationArea,
 	GestureDirectionEntry,
 	GestureDirectionOption,
@@ -25,11 +24,11 @@ import type {
 import { computeClaimedDirections } from "../ownership/compute-claimed-directions";
 import { resolveOwnership } from "../ownership/resolve-ownership";
 import type {
-	GestureContextType,
 	PanGesturePolicy,
 	PinchGesturePolicy,
 	ScreenGestureConfig,
 	ScreenGestureParticipation,
+	ScreenGestureSource,
 } from "../types";
 import {
 	getGestureDirectionEntries,
@@ -43,13 +42,10 @@ import {
 import { validateSnapPoints } from "./snap-points";
 
 export type GesturePolicyOptions = {
-	expandViaScrollView?: boolean;
-	gestureActivationArea?: GestureActivationArea;
 	gestureDirection?: GestureDirectionOption;
 	gestureEnabled?: boolean;
 	gestureTracking?: GestureTracking;
 	gestureReleaseVelocityScale?: number;
-	gestureResponseDistance?: number;
 	gestureSensitivity?: number;
 	gestureSnapLocked?: boolean;
 	gestureSnapVelocityImpact?: number;
@@ -138,14 +134,12 @@ const resolveConfiguredGestureActivationArea = (
 };
 
 const resolveGestureActivationArea = (
-	options: GesturePolicyOptions,
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 ): ResolvedGestureActivationArea => {
 	"worklet";
 	return (
 		resolveConfiguredGestureActivationArea(gestureDirection, hasSnapPoints) ??
-		options.gestureActivationArea ??
 		DEFAULT_GESTURE_ACTIVATION_AREA
 	);
 };
@@ -169,17 +163,9 @@ function resolvePolicySheetScrollGestureBehavior(
 	options: GesturePolicyOptions,
 ): SheetScrollGestureBehavior {
 	"worklet";
-	const explicitBehavior = options.sheetScrollGestureBehavior;
-	if (explicitBehavior) {
-		return explicitBehavior;
-	}
-
-	const legacyBehavior = options.expandViaScrollView;
-	if (legacyBehavior !== undefined) {
-		return legacyBehavior ? "expand-and-collapse" : "collapse-only";
-	}
-
-	return DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR;
+	return (
+		options.sheetScrollGestureBehavior ?? DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR
+	);
 }
 
 const resolvePinchDirections = (
@@ -273,13 +259,11 @@ export const resolvePanPolicy = (
 		gestureVelocityImpact:
 			options.gestureVelocityImpact ?? DEFAULT_GESTURE_VELOCITY_IMPACT,
 		gestureActivationArea: resolveGestureActivationArea(
-			options,
 			gestureDirection,
 			hasSnapPoints,
 		),
 		sheetScrollGestureBehavior:
 			resolvePolicySheetScrollGestureBehavior(options),
-		gestureResponseDistance: options.gestureResponseDistance,
 	};
 };
 
@@ -305,20 +289,16 @@ export const resolvePinchPolicy = (
 const resolveGestureParticipation = ({
 	options,
 	isFirstKey,
-	gestureContext,
-	isRemovePrevented,
+	ancestorGestures,
 }: {
 	options: GesturePolicyOptions;
 	isFirstKey: boolean;
-	gestureContext: GestureContextType | null;
-	isRemovePrevented: boolean;
+	ancestorGestures: readonly ScreenGestureSource[];
 }): ScreenGestureParticipation => {
-	const canDismiss =
-		!isRemovePrevented &&
-		resolveGestureCanDismiss({
-			isFirstKey,
-			gestureEnabled: options.gestureEnabled,
-		});
+	const canDismiss = resolveGestureCanDismiss({
+		isFirstKey,
+		gestureEnabled: options.gestureEnabled,
+	});
 	const effectiveSnapPoints = validateSnapPoints({
 		snapPoints: options.snapPoints,
 		canDismiss,
@@ -337,31 +317,27 @@ const resolveGestureParticipation = ({
 
 	return {
 		isFirstKey,
-		isRemovePrevented,
 		canDismiss,
 		canTrackGesture,
 		effectiveSnapPoints,
 		claimedDirections,
-		ownershipStatus: resolveOwnership(claimedDirections, gestureContext),
+		ownershipStatus: resolveOwnership(claimedDirections, ancestorGestures),
 	};
 };
 
 export const resolveScreenGestureConfig = ({
 	options,
 	isFirstKey,
-	gestureContext,
-	isRemovePrevented = false,
+	ancestorGestures,
 }: {
 	options: ScreenTransitionConfig;
 	isFirstKey: boolean;
-	gestureContext: GestureContextType | null;
-	isRemovePrevented?: boolean;
+	ancestorGestures: readonly ScreenGestureSource[];
 }): ScreenGestureConfig => {
 	const participation = resolveGestureParticipation({
 		options,
 		isFirstKey,
-		gestureContext,
-		isRemovePrevented,
+		ancestorGestures,
 	});
 	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
 
@@ -373,14 +349,11 @@ export const resolveScreenGestureConfig = ({
 };
 
 function resolveRuntimeCanDismiss(
-	participation: Pick<
-		ScreenGestureParticipation,
-		"isFirstKey" | "isRemovePrevented" | "canDismiss"
-	>,
+	participation: Pick<ScreenGestureParticipation, "isFirstKey" | "canDismiss">,
 	options: GesturePolicyOptions,
 ) {
 	"worklet";
-	if (participation.isFirstKey || participation.isRemovePrevented) {
+	if (participation.isFirstKey) {
 		return false;
 	}
 

package/src/providers/screen/gestures/shared/snapshot.ts

@@ -30,6 +30,5 @@ export const snapshotGestureHandoff = (
 	snapshot.raw.scale.set(gestures.raw.scale.get());
 	snapshot.raw.normScale.set(gestures.raw.normScale.get());
 	snapshot.raw.rotation.set(gestures.raw.rotation.get());
-	snapshot.active.set(gestures.active.get());
-	snapshot.direction.set(gestures.direction.get());
+	snapshot.active.set(gestures.initiator.get());
 };

package/src/providers/screen/gestures/types.ts

@@ -71,22 +71,23 @@ export const NO_DIRECTION_CLAIMS: DirectionClaimMap = {
 	"horizontal-inverted": null,
 };
 
-export interface GestureContextType {
+export interface ScreenGestureSource {
 	routeKey: string;
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
-	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
 	childDirectionClaims: SharedValue<DirectionClaimMap>;
 }
 
+export interface GestureContextType extends ScreenGestureSource {
+	ancestorGestures: readonly ScreenGestureSource[];
+}
+
 export interface ScreenGestureParticipation {
 	/** Whether this route is the first route in its stack. First routes never track gestures. */
 	isFirstKey: boolean;
-	/** Whether React Navigation currently blocks removal of this route. */
-	isRemovePrevented: boolean;
 	/** Whether this route can dismiss to progress 0 from a gesture release. */
 	canDismiss: boolean;
 	/** Whether recognizers can activate to expose gesture values to interpolators. */
@@ -116,7 +117,6 @@ export interface PanGesturePolicy {
 	sheetScrollGestureBehavior: NonNullable<
 		ScreenTransitionConfig["sheetScrollGestureBehavior"]
 	>;
-	gestureResponseDistance: ScreenTransitionConfig["gestureResponseDistance"];
 	transitionSpec: TransitionSpec | undefined;
 }
 

package/src/providers/screen/options/helpers.ts

@@ -1,5 +1,4 @@
 import {
-	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
 	DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 	DEFAULT_GESTURE_SENSITIVITY,
@@ -10,8 +9,6 @@ import {
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
 } from "../../../constants";
 import type {
-	ActivationArea,
-	GestureActivationArea,
 	GestureDirection,
 	GestureDirectionActivationArea,
 	GestureDirectionEntry,
@@ -122,31 +119,6 @@ const resolveGestureDirectionOption = (
 	return fallback;
 };
 
-const isActivationArea = (value: unknown): value is ActivationArea => {
-	"worklet";
-	return value === "edge" || value === "screen";
-};
-
-const resolveGestureActivationAreaOption = (
-	value: unknown,
-	fallback: RequiredScreenOption<"gestureActivationArea">,
-): RequiredScreenOption<"gestureActivationArea"> => {
-	"worklet";
-	if (isActivationArea(value)) {
-		return value;
-	}
-	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-		const area = value as Record<string, unknown>;
-		const isValid =
-			(area.left === undefined || isActivationArea(area.left)) &&
-			(area.right === undefined || isActivationArea(area.right)) &&
-			(area.top === undefined || isActivationArea(area.top)) &&
-			(area.bottom === undefined || isActivationArea(area.bottom));
-		return isValid ? (area as GestureActivationArea) : fallback;
-	}
-	return fallback;
-};
-
 const resolveSheetScrollGestureBehaviorOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"sheetScrollGestureBehavior">,
@@ -180,30 +152,6 @@ const resolveBackdropBehaviorOption = (
 		: fallback;
 };
 
-const areGestureActivationAreasEqual = (
-	left: RequiredScreenOption<"gestureActivationArea">,
-	right: RequiredScreenOption<"gestureActivationArea">,
-) => {
-	"worklet";
-	if (left === right) return true;
-
-	if (
-		typeof left !== "object" ||
-		left === null ||
-		typeof right !== "object" ||
-		right === null
-	) {
-		return false;
-	}
-
-	return (
-		left.left === right.left &&
-		left.right === right.right &&
-		left.top === right.top &&
-		left.bottom === right.bottom
-	);
-};
-
 const areGestureDirectionEntriesEqual = (
 	left: GestureDirectionEntry,
 	right: GestureDirectionEntry,
@@ -256,11 +204,6 @@ const areScreenOptionsEqual = (
 		left.gestureVelocityImpact === right.gestureVelocityImpact &&
 		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
 		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
-		left.gestureResponseDistance === right.gestureResponseDistance &&
-		areGestureActivationAreasEqual(
-			left.gestureActivationArea,
-			right.gestureActivationArea,
-		) &&
 		left.gestureSnapLocked === right.gestureSnapLocked &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior &&
@@ -302,14 +245,6 @@ export const resolveBaseScreenOptions = (
 			options.gestureReleaseVelocityScale,
 			DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 		),
-		gestureResponseDistance: resolveNumberOption(
-			options.gestureResponseDistance,
-			undefined,
-		),
-		gestureActivationArea: resolveGestureActivationAreaOption(
-			options.gestureActivationArea,
-			DEFAULT_GESTURE_ACTIVATION_AREA,
-		),
 		gestureSnapLocked: resolveBooleanOption(
 			options.gestureSnapLocked,
 			DEFAULT_GESTURE_SNAP_LOCKED,
@@ -376,14 +311,6 @@ export const syncScreenOptionsOverrides = (
 			options?.gestureReleaseVelocityScale,
 			base.gestureReleaseVelocityScale,
 		),
-		gestureResponseDistance: resolveNumberOption(
-			options?.gestureResponseDistance,
-			base.gestureResponseDistance,
-		),
-		gestureActivationArea: resolveGestureActivationAreaOption(
-			options?.gestureActivationArea,
-			base.gestureActivationArea,
-		),
 		gestureSnapLocked: resolveBooleanOption(
 			options?.gestureSnapLocked,
 			base.gestureSnapLocked,

package/src/providers/screen/options/types.ts

@@ -17,8 +17,6 @@ export type ScreenOptionsSnapshot = {
 	gestureVelocityImpact: RequiredScreenOption<"gestureVelocityImpact">;
 	gestureSnapVelocityImpact: RequiredScreenOption<"gestureSnapVelocityImpact">;
 	gestureReleaseVelocityScale: RequiredScreenOption<"gestureReleaseVelocityScale">;
-	gestureResponseDistance: OptionalScreenOption<"gestureResponseDistance">;
-	gestureActivationArea: RequiredScreenOption<"gestureActivationArea">;
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;
 	sheetScrollGestureBehavior: RequiredScreenOption<"sheetScrollGestureBehavior">;
 	backdropBehavior: OptionalScreenOption<"backdropBehavior">;

package/src/providers/screen/screen-composer.tsx

@@ -7,21 +7,21 @@ import { ScreenGestureProvider } from "./gestures";
 import { ScreenOptionsProvider } from "./options";
 import { ScreenSlotProvider } from "./styles";
 
-type Props<TDescriptor extends BaseDescriptor> = {
-	previous?: TDescriptor;
-	current?: TDescriptor;
-	next?: TDescriptor;
+type Props = {
+	previous?: BaseDescriptor;
+	current?: BaseDescriptor;
+	next?: BaseDescriptor;
 	routeKey?: string;
 	children: React.ReactNode;
 };
 
-export function ScreenComposer<TDescriptor extends BaseDescriptor>({
+export function ScreenComposer({
 	previous,
 	current,
 	next,
 	routeKey,
 	children,
-}: Props<TDescriptor>) {
+}: Props) {
 	return (
 		<DescriptorsProvider
 			previous={previous}

package/src/providers/screen/styles/constants.ts

@@ -65,6 +65,7 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 };
 
 const RESERVED_STYLE_SLOT_IDS = {
+	overlay: true,
 	content: true,
 	backdrop: true,
 	surface: true,

package/src/providers/screen/styles/helpers/select-interpolator-frame.ts

@@ -2,13 +2,7 @@ import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
 
 export type SelectedInterpolatorFrame = Pick<
 	ScreenInterpolatorFrame,
-	| "progress"
-	| "transitionProgress"
-	| "next"
-	| "focused"
-	| "active"
-	| "inactive"
-	| "logicallySettled"
+	"progress" | "transitionProgress" | "next" | "focused" | "active" | "inactive"
 >;
 
 export const selectInterpolatorFrame = (
@@ -25,7 +19,6 @@ export const selectInterpolatorFrame = (
 			focused: frame.focused,
 			active: frame.active,
 			inactive: frame.inactive,
-			logicallySettled: frame.logicallySettled,
 		};
 	}
 
@@ -36,6 +29,5 @@ export const selectInterpolatorFrame = (
 		focused: true,
 		active: frame.current,
 		inactive: frame.previous,
-		logicallySettled: frame.current.settled,
 	};
 };

package/src/providers/screen/styles/helpers/transition-visual-state.ts

@@ -42,3 +42,29 @@ export const hasCloseTransitionFinished = ({
 	"worklet";
 	return !!closing && animationProgress === 0;
 };
+
+export const isScreenInterpolatorReady = ({
+	hasInterpolator,
+	opening,
+	closing,
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	hasInterpolator: boolean;
+	opening: boolean;
+	closing: number;
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+
+	return (
+		hasInterpolator &&
+		!isOpenTransitionBlocked({
+			opening,
+			pendingLifecycleStartBlockCount,
+			animationProgress,
+		}) &&
+		!hasCloseTransitionFinished({ closing, animationProgress })
+	);
+};

package/src/providers/screen/styles/helpers/visibility-block-ownership.ts

@@ -0,0 +1,16 @@
+type VisibilityBlockOwnershipParams = {
+	localBlocked: boolean;
+	ancestorBlocked: boolean;
+};
+
+export const resolveVisibilityBlockOwnership = ({
+	localBlocked,
+	ancestorBlocked,
+}: VisibilityBlockOwnershipParams) => {
+	"worklet";
+
+	return {
+		appliesOffset: localBlocked && !ancestorBlocked,
+		effectiveBlocked: localBlocked || ancestorBlocked,
+	};
+};

package/src/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -1,14 +1,33 @@
 import { useMemo } from "react";
 import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import { useNavigationRoute } from "../../../navigation/navigation-host.provider";
 import {
 	composeSlotStyleWithLocalTransform,
 	getLocalTransformForSlotComposition,
 } from "../helpers/compose-slot-style";
-import { useScreenSlots } from "../slot.provider";
+import { useOptionalScreenSlotStore } from "../slot.provider";
+
+const useCurrentScreenSlotsMap = () => {
+	const routeKey = useNavigationRoute().key;
+	const localSlotsMap = useOptionalScreenSlotStore(
+		(store) => store?.slotsMap ?? null,
+	);
+	const keyedSlotsMap = useOptionalScreenSlotStore(
+		localSlotsMap ? null : routeKey,
+		(store) => store.slotsMap,
+	);
+	const slotsMap = localSlotsMap ?? keyedSlotsMap;
+
+	if (!slotsMap) {
+		throw new Error(`ScreenSlotStore is unavailable for route "${routeKey}"`);
+	}
+
+	return slotsMap;
+};
 
 export const useSlotStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const slot = slotId ? slotsMap.get()[slotId] : undefined;
@@ -26,7 +45,7 @@ export const useComposedSlotStyles = (
 	slotId: string | undefined,
 	style: unknown,
 ) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 	const localTransform = useMemo(
 		() => getLocalTransformForSlotComposition(style),
 		[style],
@@ -50,7 +69,7 @@ export const useComposedSlotStyles = (
  * target takes the full associated style. Yields `NO_STYLES` when neither is set.
  */
 export const useSlotStackingStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -66,7 +85,7 @@ export const useSlotStackingStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotLayoutStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -103,7 +122,7 @@ export const useSlotLayoutStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotProps = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedProps(() => {
 		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;