react-native-screen-transitions 3.13.0-beta.0 → 3.13.0

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

@@ -73,7 +73,7 @@ function buildTransitionStackState({
 	const routes = state.routes as BaseStackRoute[];
 	const preloadedRoutes = getPreloadedRoutes(state) as BaseStackRoute[];
 	const allRoutes = routes.concat(preloadedRoutes);
-	const routeKeys: string[] = [];
+	const routeKeys = routes.map((route) => route.key);
 	const scenes: ScreenTransitionsAdapterScene[] = [];
 	const routeIndexByKey = new Map<string, number>();
 	let shouldShowFloatOverlay = false;
@@ -112,7 +112,6 @@ function buildTransitionStackState({
 			descriptor: normalizedDescriptor,
 			previousDescriptor,
 		});
-		routeKeys.push(route.key);
 		routeIndexByKey.set(route.key, sceneIndex);
 
 		if (

package/src/shared/components/activity/helpers.ts

@@ -1,8 +1,67 @@
 import { IS_WEB } from "../../constants";
 import type { InactiveBehavior } from "../../types/screen.types";
+import type { StackSceneActivity } from "../../types/stack.types";
 
 export type { InactiveBehavior } from "../../types/screen.types";
 
 export const DEFAULT_INACTIVE_BEHAVIOR: InactiveBehavior = IS_WEB
 	? "unmount"
 	: "hide";
+
+type ActivityState = 0 | 1 | 2;
+
+const ActivityStateByActivity = {
+	active: 2,
+	inert: 1,
+	inactive: 0,
+	closing: 1,
+} satisfies Record<StackSceneActivity, ActivityState>;
+
+const PointerEventsByActivity = {
+	active: "auto",
+	inert: "auto",
+	inactive: "none",
+	closing: "none",
+} as const satisfies Record<StackSceneActivity, "auto" | "none">;
+
+export const HIDDEN_ACTIVITY_SCREEN_STYLE = { display: "none" } as const;
+
+export function resolveActivityScreenPresentation({
+	activity,
+	inactiveBehavior,
+	waitForPaintDriver,
+}: {
+	activity: StackSceneActivity;
+	inactiveBehavior: InactiveBehavior;
+	waitForPaintDriver: boolean;
+}) {
+	let activityState: ActivityState = ActivityStateByActivity[activity];
+	let shouldFreeze = false;
+	let visible = activity !== "inactive";
+
+	if (activity === "inactive") {
+		if (inactiveBehavior === "keep") {
+			activityState = 1;
+			visible = true;
+		} else if (waitForPaintDriver) {
+			activityState = 1;
+			visible = true;
+		} else if (inactiveBehavior === "pause") {
+			activityState = 1;
+			shouldFreeze = true;
+			visible = true;
+		} else {
+			activityState = 0;
+			shouldFreeze = true;
+			visible = false;
+		}
+	}
+
+	return {
+		activityState,
+		freezeOnBlur: true,
+		pointerEvents: PointerEventsByActivity[activity],
+		shouldFreeze,
+		visible,
+	};
+}

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

@@ -1,6 +1,6 @@
 import type * as React from "react";
 import { memo } from "react";
-import { StyleSheet, View, type ViewProps } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
 import { Screen } from "react-native-screens";
 import { IS_WEB } from "../../../constants";
@@ -8,71 +8,40 @@ import { useStack } from "../../../hooks/navigation/use-stack";
 import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../stores/animation.store";
-import type { StackSceneActivity } from "../../../types/stack.types";
-import { DEFAULT_INACTIVE_BEHAVIOR, type InactiveBehavior } from "../helpers";
-
-type ActivityState = 0 | 1 | 2;
-const ActivityStateByActivity = {
-	active: 2,
-	inert: 1,
-	inactive: 0,
-	closing: 1,
-} satisfies Record<StackSceneActivity, ActivityState>;
-
-const PointerEventsByActivity = {
-	active: "auto",
-	inert: "auto",
-	inactive: "none",
-	closing: "none",
-} satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
+import {
+	DEFAULT_INACTIVE_BEHAVIOR,
+	HIDDEN_ACTIVITY_SCREEN_STYLE,
+	type InactiveBehavior,
+	resolveActivityScreenPresentation,
+} from "../helpers";
 
 interface ActivityScreenProps {
-	activity?: StackSceneActivity;
 	children: React.ReactNode;
 	inactiveBehavior?: InactiveBehavior;
 	paintDriverRouteKey?: string;
 	hasNestedState?: boolean;
-	routeKey?: string;
+	routeKey: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
-	activity,
 	children,
 	inactiveBehavior,
 	paintDriverRouteKey,
 	hasNestedState,
 	routeKey,
 }: ActivityScreenProps) {
-	const stackActivity = useBlankStackStore((store) =>
-		routeKey ? store?.scenesByKey[routeKey]?.activity : undefined,
-	);
-	const stackInactiveBehavior = useBlankStackStore((store) =>
-		routeKey
-			? (
-					store?.scenesByKey[routeKey]?.descriptor.options as
-						| { inactiveBehavior?: InactiveBehavior }
-						| undefined
-				)?.inactiveBehavior
-			: undefined,
-	);
-	const stackRoute = useBlankStackStore((store) =>
-		routeKey ? store?.scenesByKey[routeKey]?.route : undefined,
+	const scene = useBlankStackStore((store) => store.scenesByKey[routeKey]);
+	const stackPaintDriverRouteKey = useBlankStackStore((store) =>
+		store.paintDriverRouteKeyByRouteKey.get(routeKey),
 	);
-	const stackPaintDriverRouteKey = useBlankStackStore((store) => {
-		if (!routeKey || !store) {
-			return undefined;
-		}
-
-		const routeIndex = store.routeKeys.indexOf(routeKey);
-		return store.routeKeys[routeIndex + 2];
-	});
-	const resolvedActivity = activity ?? stackActivity ?? "active";
+	const stackInactiveBehavior = (
+		scene.descriptor.options as { inactiveBehavior?: InactiveBehavior }
+	).inactiveBehavior;
 	const resolvedInactiveBehavior =
 		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
 	const resolvedPaintDriverRouteKey =
 		paintDriverRouteKey ?? stackPaintDriverRouteKey;
-	const resolvedHasNestedState =
-		hasNestedState ?? (stackRoute ? "state" in stackRoute : false);
+	const resolvedHasNestedState = hasNestedState ?? "state" in scene.route;
 	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
 	const paintDriverAnimations = resolvedPaintDriverRouteKey
 		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
@@ -97,42 +66,18 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
 
-	let activityState: ActivityState = ActivityStateByActivity[resolvedActivity];
-	let shouldFreeze = false;
-	let visible = resolvedActivity !== "inactive";
-
-	const shouldWaitForPaintDriver = !isPaintDriverSettledOnJS;
-
-	if (resolvedActivity === "inactive") {
-		if (resolvedInactiveBehavior === "keep") {
-			activityState = 1;
-			visible = true;
-		} else if (shouldWaitForPaintDriver) {
-			// Delay hiding until the paint driver has settled to avoid
-			// a blank frame during the transition.
-			activityState = 1;
-			visible = true;
-		} else if (resolvedInactiveBehavior === "pause") {
-			activityState = 1;
-			shouldFreeze = true;
-			visible = true;
-		} else {
-			// `hide` freezes and hides native presentation. Non-nested
-			// `unmount` removes the React subtree through the JS guard below.
-			activityState = 0;
-			shouldFreeze = true;
-			visible = false;
-		}
-	}
+	const { visible, ...screenPresentation } = resolveActivityScreenPresentation({
+		activity: scene.activity,
+		inactiveBehavior: resolvedInactiveBehavior,
+		waitForPaintDriver: !isPaintDriverSettledOnJS,
+	});
 
 	const shouldUnmount =
 		resolvedInactiveBehavior === "unmount" &&
-		resolvedActivity === "inactive" &&
+		scene.activity === "inactive" &&
 		!resolvedHasNestedState &&
 		isPaintDriverSettledOnJS;
 
-	const pointerEvents = PointerEventsByActivity[resolvedActivity];
-
 	if (shouldUnmount) {
 		return null;
 	}
@@ -141,33 +86,23 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	if (IS_WEB || nativeScreenDisabled) {
 		return (
-			<View style={style} pointerEvents={pointerEvents} collapsable={false}>
+			<View
+				style={style}
+				pointerEvents={screenPresentation.pointerEvents}
+				collapsable={false}
+			>
 				{children}
 			</View>
 		);
 	}
 
 	return (
-		<Screen
-			style={style}
-			activityState={activityState}
-			shouldFreeze={shouldFreeze}
-			pointerEvents={pointerEvents}
-			collapsable={false}
-		>
+		<Screen {...screenPresentation} style={style} collapsable={false}>
 			{children}
 		</Screen>
 	);
 });
 
-const HIDDEN_SCREEN_OFFSET = 10_000;
 const styles = StyleSheet.create({
-	hidden: {
-		// NOTE:
-		// When setting a screen to display:"none", the gesture detector will not recognize anymore. Since I believe
-		// rngh is attaching itself to its nearest native view, this of course would kill the detector.
-		// To avoid this, we use a transform to move the screen off-screen instead of display: "none". This isn't my favorite approach,
-		// but i'm hoping react 19's activity could mitigate this better and avoid dependence on rns.
-		transform: [{ translateY: HIDDEN_SCREEN_OFFSET }],
-	},
+	hidden: HIDDEN_ACTIVITY_SCREEN_STYLE,
 });

package/src/shared/components/boundary/components/boundary-target.tsx

@@ -13,7 +13,7 @@ import {
 import { BoundaryPortal } from "../portal/components/boundary-portal";
 import {
 	TARGET_OUTSIDE_ROOT_WARNING,
-	useBoundaryRootStore,
+	useOptionalBoundaryRootStore,
 } from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
@@ -36,7 +36,7 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		style,
 		...rest
 	} = props;
-	const rootContext = useBoundaryRootStore();
+	const rootContext = useOptionalBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
 	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;

package/src/shared/components/boundary/create-boundary-component.tsx

@@ -10,7 +10,10 @@ import {
 	BOUNDARY_TARGET_ACTIVE_PROP,
 	BoundaryTarget,
 } from "./components/boundary-target";
-import { BoundaryContentPortalHost } from "./portal/components/boundary-content-portal";
+import {
+	BoundaryContentPortal,
+	BoundaryContentPortalHost,
+} from "./portal/components/boundary-content-portal";
 import { BoundaryPortal } from "./portal/components/boundary-portal";
 import { BoundaryRootProvider } from "./providers/boundary-root.provider";
 import type { BoundaryComponentProps } from "./types";
@@ -91,7 +94,12 @@ export function createBoundaryComponent<P extends object>(
 								enabled={root.shouldRenderHandoffHost}
 								screenKey={root.currentScreenKey}
 							>
-								{targetResolution.children}
+								<BoundaryContentPortal
+									boundaryId={root.boundTag.tag}
+									enabled={root.shouldRenderHandoffHost}
+								>
+									{targetResolution.children}
+								</BoundaryContentPortal>
 							</BoundaryContentPortalHost>
 						</AnimatedComponent>
 					</BoundaryPortal>

package/src/shared/components/boundary/hooks/use-measurer.ts

@@ -3,7 +3,7 @@ import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
 import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
-import { useScreenSlots } from "../../../providers/screen/styles";
+import { useScreenSlotStore } from "../../../providers/screen/styles";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
 import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset";
@@ -41,7 +41,8 @@ export const useMeasurer = ({
 
 	const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
 	const scrollMetadata = ScrollStore.getValue(currentScreenKey, "metadata");
-	const { visibilityBlocked } = useScreenSlots();
+	const screenSlotStore = useScreenSlotStore();
+	const { visibilityBlocked } = screenSlotStore;
 
 	return useCallback(
 		(target) => {

package/src/shared/components/boundary/portal/components/boundary-content-portal/helpers/active-handoff-receiver.ts

@@ -74,6 +74,7 @@ export const resolveHandoffAttachmentCandidate = ({
 	interpolatorReady,
 	pairChangedDuringClose = false,
 	pairDestinationScreenKey,
+	pairHasBoundaryLink,
 	previousReceiverScreenKey,
 }: {
 	activeReceiverClosing: boolean;
@@ -83,9 +84,20 @@ export const resolveHandoffAttachmentCandidate = ({
 	interpolatorReady: boolean;
 	pairChangedDuringClose?: boolean;
 	pairDestinationScreenKey: string | null;
+	pairHasBoundaryLink?: boolean;
 	previousReceiverScreenKey: string | null;
 }) => {
 	"worklet";
+	const currentPairHasBoundaryLink =
+		pairHasBoundaryLink ?? pairDestinationScreenKey !== null;
+
+	if (
+		activeReceiverClosing &&
+		attachedReceiverScreenKey !== activeReceiverScreenKey &&
+		!currentPairHasBoundaryLink
+	) {
+		return attachedReceiverScreenKey;
+	}
 
 	if (
 		activeReceiverClosing &&
@@ -96,6 +108,16 @@ export const resolveHandoffAttachmentCandidate = ({
 		return pairDestinationScreenKey;
 	}
 
+	if (
+		activeReceiverClosing &&
+		pairChangedDuringClose &&
+		!currentPairHasBoundaryLink
+	) {
+		return hasActiveCloseFinished
+			? previousReceiverScreenKey
+			: attachedReceiverScreenKey;
+	}
+
 	if (
 		hasActiveCloseFinished &&
 		attachedReceiverScreenKey === activeReceiverScreenKey

package/src/shared/components/boundary/portal/components/boundary-content-portal/hooks/use-boundary-content-portal-attachment.ts

@@ -1,7 +1,10 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useStack } from "../../../../../../hooks/navigation/use-stack";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import {
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+} from "../../../../../../providers/screen/styles";
 import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
 import { AnimationStore } from "../../../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
@@ -26,7 +29,7 @@ interface UseBoundaryContentPortalAttachmentParams {
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
@@ -43,7 +46,7 @@ export const useBoundaryContentPortalAttachment = ({
 	const resolvedSourcePairKey = sourcePairKey ?? transitionSourcePairKey;
 	const resolvedDestinationScreenKey =
 		nextScreenKey ?? transitionDestinationScreenKey;
-	const destinationSlots = useScreenSlots(
+	const destinationSlots = useOptionalScreenSlotStore(
 		resolvedDestinationScreenKey ?? currentScreenKey,
 	);
 	const unavailableInterpolatorReady = useSharedValue(0);
@@ -146,6 +149,7 @@ export const useBoundaryContentPortalAttachment = ({
 					interpolatorReady: !!isInterpolatorReady,
 					pairChangedDuringClose,
 					pairDestinationScreenKey: pairDestination,
+					pairHasBoundaryLink: link !== undefined,
 					previousReceiverScreenKey,
 				});
 

package/src/shared/components/boundary/portal/components/boundary-portal/hooks/use-boundary-portal-attachment.ts

@@ -1,7 +1,7 @@
 import { useIsFocused } from "@react-navigation/native";
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { useScreenSlotStore } from "../../../../../../providers/screen/styles";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
 import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
@@ -18,10 +18,6 @@ export const useBoundaryPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryPortalAttachmentParams) => {
 	const localMeasurement = useBoundaryRootStore((root) => {
-		if (!root) {
-			throw new Error("Boundary portal attachment requires a boundary root.");
-		}
-
 		return root.localMeasurement;
 	});
 	const currentScreenKey = useDescriptorsStore(
@@ -31,7 +27,7 @@ export const useBoundaryPortalAttachment = ({
 	// A leaf that is still selected in its own one-screen stack becomes unfocused
 	// when any ancestor route is covered.
 	const focused = useIsFocused();
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue<string | null>(null);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);

package/src/shared/components/boundary/portal/teleport.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, createElement, type ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 /**
  * `react-native-teleport` is an optional peer dependency. The require sits in a
@@ -9,33 +9,12 @@ import { type ComponentType, createElement, type ReactNode } from "react";
  * inline rendering; everything else keeps working.
  */
 let mod: any = null;
-let managerMod: any = null;
-let providerViewMod: any = null;
 try {
 	mod = require("react-native-teleport");
-	managerMod = require("react-native-teleport/lib/module/contexts/PortalManager");
-	providerViewMod = require("react-native-teleport/lib/module/views/PortalProvider");
 } catch {}
 
-const NativePortalProviderView: ComponentType<{ children: ReactNode }> | null =
-	providerViewMod?.default ?? null;
-const PortalManagerProvider: ComponentType<{ children: ReactNode }> | null =
-	managerMod?.PortalManagerProvider ?? null;
-
 const SafeNativePortalProvider: ComponentType<{ children: ReactNode }> | null =
-	PortalManagerProvider
-		? ({ children }: { children: ReactNode }) => {
-				const managedChildren = createElement(
-					PortalManagerProvider,
-					null,
-					children,
-				);
-
-				return NativePortalProviderView
-					? createElement(NativePortalProviderView, null, managedChildren)
-					: managedChildren;
-			}
-		: null;
+	mod?.PortalProvider ?? null;
 
 export const isTeleportAvailable =
 	mod !== null && SafeNativePortalProvider !== null;

package/src/shared/components/boundary/providers/boundary-root.provider.tsx

@@ -14,7 +14,7 @@ import {
 	useComposedSlotStyles,
 	useSlotStackingStyles,
 } from "../../../providers/screen/styles";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { useOptionalBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
@@ -68,10 +68,14 @@ type BoundaryRootProviderProps = Pick<
 	targetStyle?: unknown;
 };
 
-export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
-	"BoundaryRoot",
-	{ guarded: false },
-)<BoundaryRootProviderProps, BoundaryRootContextValue>(
+export const {
+	BoundaryRootProvider,
+	useBoundaryRootStore,
+	useOptionalBoundaryRootStore,
+} = createProvider("BoundaryRoot")<
+	BoundaryRootProviderProps,
+	BoundaryRootContextValue
+>(
 	({
 		children,
 		config,
@@ -98,7 +102,7 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 		const currentScreenKey = useDescriptorsStore(
 			(s) => s.derivations.currentScreenKey,
 		);
-		const isCurrentScreenClosing = useBlankStackStore(
+		const isCurrentScreenClosing = useOptionalBlankStackStore(
 			(store) =>
 				portalRuntime.handoff &&
 				store?.scenesByKey[currentScreenKey]?.activity === "closing",

package/src/shared/components/overlay/helpers/create-overlay-interpolator-frame.ts

@@ -1,6 +1,19 @@
 import { updateDerivations } from "../../../providers/screen/animation/helpers/derivations";
 import type { ScreenInterpolatorFrame } from "../../../providers/screen/animation/helpers/pipeline";
 
+export const shouldUseOverlayGestureDriver = (
+	overlayFrame: ScreenInterpolatorFrame,
+	driverFrame: ScreenInterpolatorFrame,
+): boolean => {
+	"worklet";
+	const gesture = overlayFrame.current.gesture;
+
+	return (
+		driverFrame.current.route.key !== overlayFrame.current.route.key &&
+		!!(gesture.dragging || gesture.dismissing || gesture.settling)
+	);
+};
+
 export const createOverlayInterpolatorFrame = ({
 	overlayFrame,
 	driverFrame,
@@ -22,7 +35,7 @@ export const createOverlayInterpolatorFrame = ({
 	};
 
 	updateDerivations(frame);
-	frame.stackProgress = frame.progress;
+	frame.stackProgress = overlayFrame.stackProgress;
 	frame.logicallySettled = frame.active.settled;
 
 	return frame;

package/src/shared/components/overlay/helpers/get-active-overlay.ts

@@ -74,8 +74,33 @@ export function getFloatOverlayTransitions(
 ): FloatOverlayTransitionEntry[] {
 	const topScene = scenes[scenes.length - 1];
 
-	return overlayStack.map((entry, index) => ({
-		...entry,
-		driverScene: overlayStack[index + 1]?.scene ?? topScene ?? entry.scene,
-	}));
+	return overlayStack.map((entry, index) => {
+		const nextEntry = overlayStack[index + 1];
+		let nextPresentedEntry: FloatOverlayEntry | undefined;
+
+		for (
+			let nextIndex = index + 1;
+			nextIndex < overlayStack.length;
+			nextIndex++
+		) {
+			const candidate = overlayStack[nextIndex];
+			if (candidate?.scene.activity !== "closing") {
+				nextPresentedEntry = candidate;
+				break;
+			}
+		}
+
+		const driverScene =
+			entry.scene.activity === "closing" && nextEntry
+				? entry.scene
+				: (nextPresentedEntry?.scene ??
+					nextEntry?.scene ??
+					topScene ??
+					entry.scene);
+
+		return {
+			...entry,
+			driverScene,
+		};
+	});
 }

package/src/shared/components/overlay/hooks/use-overlay-slot.ts

@@ -15,11 +15,15 @@ import type {
 	ScreenStyleInterpolator,
 } from "../../../types/animation.types";
 import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset";
-import { createOverlayInterpolatorFrame } from "../helpers/create-overlay-interpolator-frame";
+import {
+	createOverlayInterpolatorFrame,
+	shouldUseOverlayGestureDriver,
+} from "../helpers/create-overlay-interpolator-frame";
 import { runOverlaySlotInterpolator } from "../helpers/run-overlay-slot-interpolator";
 
 export const useOverlaySlot = ({
 	overlayAnimationStore,
+	overlayInterpolator,
 	driverAnimationStore,
 	previousOverlayAnimationStore,
 	driverInterpolator,
@@ -27,6 +31,7 @@ export const useOverlaySlot = ({
 	isIncoming,
 }: {
 	overlayAnimationStore: ScreenAnimationContextValue;
+	overlayInterpolator: ScreenStyleInterpolator | undefined;
 	driverAnimationStore: ScreenAnimationContextValue;
 	previousOverlayAnimationStore?: ScreenAnimationContextValue;
 	driverInterpolator: ScreenStyleInterpolator | undefined;
@@ -34,11 +39,16 @@ export const useOverlaySlot = ({
 	isIncoming: boolean;
 }) => {
 	const { height } = useWindowDimensions();
-	const transition = useBuildTransitionAccessor(driverAnimationStore);
+	const overlayTransition = useBuildTransitionAccessor(overlayAnimationStore);
+	const driverTransition = useBuildTransitionAccessor(driverAnimationStore);
 
 	const interpolatorSharedValues = useMemo(
-		() => collectInterpolatorSharedValues([driverInterpolator]),
-		[driverInterpolator],
+		() =>
+			collectInterpolatorSharedValues([
+				overlayInterpolator,
+				driverInterpolator,
+			]),
+		[overlayInterpolator, driverInterpolator],
 	);
 
 	const overlaySlot = useDerivedValue<
@@ -53,17 +63,25 @@ export const useOverlaySlot = ({
 			interpolatorSharedValues[index]?.get();
 		}
 
+		const overlayFrame = overlayAnimationStore.screenInterpolatorProps.get();
+		const driverFrame = driverAnimationStore.screenInterpolatorProps.get();
+		const overlayOwnsGesture = shouldUseOverlayGestureDriver(
+			overlayFrame,
+			driverFrame,
+		);
 		const frame = createOverlayInterpolatorFrame({
-			overlayFrame: overlayAnimationStore.screenInterpolatorProps.get(),
-			driverFrame: driverAnimationStore.screenInterpolatorProps.get(),
+			overlayFrame,
+			driverFrame: overlayOwnsGesture ? overlayFrame : driverFrame,
 			previousOverlayFrame:
 				previousOverlayAnimationStore?.screenInterpolatorProps.get(),
 		});
 
 		return runOverlaySlotInterpolator({
 			frame,
-			interpolator: driverInterpolator,
-			transition,
+			interpolator: overlayOwnsGesture
+				? overlayInterpolator
+				: driverInterpolator,
+			transition: overlayOwnsGesture ? overlayTransition : driverTransition,
 		});
 	});