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

package/src/shared/providers/screen/gestures/ownership/{use-walk-up-and-register-shadowing-claims.ts → gesture-ownership-bridge.tsx}

@@ -30,9 +30,9 @@ const findShadowedDirections = (
 ) => {
 	const shadowedDirections: Direction[] = [];
 
-	for (const dir of DIRECTIONS) {
-		if (claimedDirections[dir] && ancestorDirections[dir]) {
-			shadowedDirections.push(dir);
+	for (const direction of DIRECTIONS) {
+		if (claimedDirections[direction] && ancestorDirections[direction]) {
+			shadowedDirections.push(direction);
 		}
 	}
 
@@ -70,8 +70,8 @@ const registerShadowingClaims = (
 
 	for (const { ancestor, directions } of shadowedAncestors) {
 		const newClaims = { ...ancestor.childDirectionClaims.get() };
-		for (const dir of directions) {
-			newClaims[dir] = { routeKey: currentScreenKey, isDismissing };
+		for (const direction of directions) {
+			newClaims[direction] = { routeKey: currentScreenKey, isDismissing };
 		}
 		ancestor.childDirectionClaims.set(newClaims);
 	}
@@ -86,10 +86,9 @@ const clearShadowingClaims = (
 		const newClaims = { ...currentClaims };
 		let needsUpdate = false;
 
-		for (const dir of directions) {
-			// Only remove claims written by this screen; a newer descendant may own it now.
-			if (currentClaims[dir]?.routeKey === currentScreenKey) {
-				newClaims[dir] = null;
+		for (const direction of directions) {
+			if (currentClaims[direction]?.routeKey === currentScreenKey) {
+				newClaims[direction] = null;
 				needsUpdate = true;
 			}
 		}
@@ -121,51 +120,32 @@ const getDescriptorClaimedDirections = (
 	}).participation.claimedDirections;
 };
 
-/**
- * Registers this screen with ancestors that claim the same direction.
- *
- * Example, when C is top-most:
- * A claims vertical
- * └─ B claims horizontal
- *    └─ C claims vertical
- *
- * C walks up the tree and writes itself into A.childDirectionClaims.vertical.
- * B is skipped because it does not claim vertical.
- */
-export function useWalkUpAndRegisterShadowingClaims(
-	claimedDirections: ClaimedDirections,
-): void {
-	const parentContext = useGestureStore();
+const requireGestureContext = (
+	gestureContext: GestureContextType | null,
+): GestureContextType => {
+	if (!gestureContext) {
+		throw new Error(
+			"GestureOwnershipBridge must be rendered within a ScreenGestureProvider",
+		);
+	}
+
+	return gestureContext;
+};
+
+function ActiveGestureOwnershipBridge() {
+	const gestureContext = requireGestureContext(useGestureStore());
 	const previous = useDescriptorsStore((store) => store.previous);
-	const isTopMostScreen = useDescriptorsStore(
-		(store) => store.derivations.isTopMostScreen,
-	);
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
 	const isCurrentScreenClosing = useBlankStackStore(
-		(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+		(store) =>
+			store?.scenesByKey[gestureContext.routeKey]?.activity === "closing",
 	);
-
-	/*
-	 * We want to calculate effective claimed directions as claimedDirections is not enough for us.
-	 * What this solves is lingering claimed directions when a screen is closing.
-	 *
-	 * Overlay claims horizontal
-	 *   └─ A has no local horizontal claim
-	 *   └─ B claims horizontal (closing)
-	 *   └─ C claims horizontal (closing)
-	 *
-	 * Closing screens are still mounted, so they can still block parent gestures.
-	 * But they cannot receive touches anymore.
-	 *
-	 * So when B/C are closing and the user is really touching A, B/C should not
-	 * keep blocking the parent with their own gesture config.
-	 *
-	 * A closing screen should act like the visible screen underneath it:
-	 * - if the screen underneath claims the gesture, keep blocking the parent
-	 * - if the screen underneath does not claim it, let the parent handle it
-	 */
+	const {
+		claimedDirections,
+		gestureContext: parentContext,
+		routeKey: currentScreenKey,
+	} = gestureContext;
+	// A retained closing screen cannot receive touches, so its ownership must
+	// mirror the visible screen underneath instead of blocking an ancestor.
 	const effectiveClaimedDirections = useMemo(
 		() =>
 			resolveShadowingClaimDirections({
@@ -178,14 +158,13 @@ export function useWalkUpAndRegisterShadowingClaims(
 			}),
 		[isCurrentScreenClosing, claimedDirections, previous, parentContext],
 	);
-
 	const shadowedAncestors = useMemo(
 		() => findShadowedAncestors(parentContext, effectiveClaimedDirections),
 		[parentContext, effectiveClaimedDirections],
 	);
 
 	useLayoutEffect(() => {
-		if (!isTopMostScreen || !shadowedAncestors.length) {
+		if (!shadowedAncestors.length) {
 			return;
 		}
 
@@ -194,5 +173,16 @@ export function useWalkUpAndRegisterShadowingClaims(
 		return () => {
 			clearShadowingClaims(shadowedAncestors, currentScreenKey);
 		};
-	}, [shadowedAncestors, currentScreenKey, isTopMostScreen]);
+	}, [shadowedAncestors, currentScreenKey]);
+
+	return null;
+}
+
+/** Keeps gesture ownership subscriptions attached only to participating screens. */
+export function GestureOwnershipBridge() {
+	const isTopMostScreen = useDescriptorsStore(
+		(store) => store.derivations.isTopMostScreen,
+	);
+
+	return isTopMostScreen ? <ActiveGestureOwnershipBridge /> : null;
 }

package/src/shared/providers/screen/gestures/pan/behavior/pan-lifecycle.ts

@@ -109,6 +109,7 @@ export const finalizePanRelease = (
 			: {
 					target: animations.transitionProgress.get(),
 					shouldDismiss: false,
+					isCancelled: true,
 					initialVelocity: 0,
 					transitionSpec: undefined,
 					resetSpec: policy.transitionSpec?.open,

package/src/shared/providers/screen/gestures/pan/behavior/pan-release.ts

@@ -1,4 +1,5 @@
 import { clamp } from "react-native-reanimated";
+import { EPSILON } from "../../../../../constants";
 import {
 	getPanSnapAxisConfigForDirection,
 	isResolvedPanGestureDirection,
@@ -111,6 +112,7 @@ const buildInactivePanSnapRelease = (
 	return {
 		target: stores.animations.transitionProgress.get(),
 		shouldDismiss: false,
+		isCancelled: true,
 		initialVelocity: 0,
 		transitionSpec: policy.transitionSpec,
 		resetSpec: policy.transitionSpec?.open,
@@ -146,6 +148,7 @@ export const resolvePanRelease = (
 	return {
 		target: shouldDismiss ? 0 : 1,
 		shouldDismiss,
+		isCancelled: !shouldDismiss,
 		initialVelocity: getPanReleaseProgressVelocity({
 			animations,
 			shouldDismiss,
@@ -205,9 +208,16 @@ export const resolveSnapPanRelease = (
 	const shouldDismiss = participation.canDismiss && result.shouldDismiss;
 	const target = shouldDismiss ? 0 : result.targetProgress;
 
+	// Compare against the gesture's starting snap so only true snap-backs lose velocity.
+	const initialTarget = policy.gestureSnapLocked
+		? (runtime.stores.gestures.internal.lockedSnapPoint.get() ??
+			runtime.stores.system.targetProgress.get())
+		: runtime.stores.system.targetProgress.get();
+
 	return {
 		target,
 		shouldDismiss,
+		isCancelled: !shouldDismiss && Math.abs(target - initialTarget) <= EPSILON,
 		initialVelocity: getProgressVelocityTowardTarget({
 			handoffVelocity: getPanReleaseHandoffVelocity(
 				axisVelocity,
@@ -238,7 +248,7 @@ export const buildPanReleasePlan = (
 	"worklet";
 	const { policy } = runtime;
 	const releaseVelocityScale = Math.max(0, policy.gestureReleaseVelocityScale);
-	const resetVelocityScale = releaseVelocityScale;
+	const resetVelocityScale = release.isCancelled ? 0 : releaseVelocityScale;
 	const resetVelocityX =
 		resetVelocityScale === 0 ? 0 : rawEvent.velocityX * resetVelocityScale;
 	const resetVelocityY =
@@ -264,7 +274,7 @@ export const buildPanReleasePlan = (
 	return {
 		target: release.target,
 		shouldDismiss: release.shouldDismiss,
-		progressVelocity: release.initialVelocity,
+		progressVelocity: release.isCancelled ? 0 : release.initialVelocity,
 		resetVelocityX,
 		resetVelocityY,
 		resetVelocityNormX: resetVelocityX / Math.max(1, dimensions.width),

package/src/shared/providers/screen/gestures/pan/behavior/use-pan-behavior.ts

@@ -97,6 +97,7 @@ export const usePanBehavior = (
 				? {
 						target: latestRuntime.stores.animations.transitionProgress.get(),
 						shouldDismiss: false,
+						isCancelled: true,
 						initialVelocity: 0,
 						transitionSpec: undefined,
 						resetSpec: latestRuntime.policy.transitionSpec?.open,

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

@@ -172,6 +172,7 @@ export interface PinchTrackState {
 export interface PanReleaseResult {
 	target: number;
 	shouldDismiss: boolean;
+	isCancelled: boolean;
 	initialVelocity: number;
 	commitProgress?: number;
 	transitionSpec: TransitionSpec | undefined;

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

@@ -62,9 +62,11 @@ export const STYLE_RESET_VALUES: Record<string, unknown> = {
 export const PROP_RESET_VALUES: Record<string, unknown> = {
 	hostName: PORTAL_HOST_NAME_RESET_VALUE,
 	pointerEvents: "auto",
+	teleport: false,
 };
 
 const RESERVED_STYLE_SLOT_IDS = {
+	overlay: true,
 	content: true,
 	backdrop: true,
 	surface: true,

package/src/shared/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/shared/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/shared/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -1,3 +1,4 @@
+import { useRoute } from "@react-navigation/native";
 import { useMemo } from "react";
 import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../../constants";
@@ -7,8 +8,19 @@ import {
 } from "../helpers/compose-slot-style";
 import { useScreenSlots } from "../slot.provider";
 
+const useCurrentScreenSlotsMap = () => {
+	const route = useRoute();
+	const slotsMap = useScreenSlots(route.key, (store) => store.slotsMap);
+
+	if (!slotsMap) {
+		throw new Error(`ScreenSlot store for route "${route.key}" was not found`);
+	}
+
+	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 +38,7 @@ export const useComposedSlotStyles = (
 	slotId: string | undefined,
 	style: unknown,
 ) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 	const localTransform = useMemo(
 		() => getLocalTransformForSlotComposition(style),
 		[style],
@@ -50,7 +62,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 +78,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 +115,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;

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -40,6 +40,7 @@ import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options"
 import {
 	hasCloseTransitionFinished,
 	isOpenTransitionBlocked,
+	isScreenInterpolatorReady,
 } from "../helpers/transition-visual-state";
 import { resolveInitialDestinationStyleGate } from "../helpers/visibility-gate";
 
@@ -144,17 +145,59 @@ export const useInterpolatedStylesMap = ({
 		(s) => s.derivations.destinationPairKey,
 	);
 	const screenOptions = useScreenOptionsStore();
-	const {
+	const screenInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
+	const screenInterpolatorPropsRevision = useScreenAnimationStore(
+		(store) => store.screenInterpolatorPropsRevision,
+	);
+	const selectedInterpolatorOptions = useScreenAnimationStore(
+		(store) => store.selectedInterpolatorOptions,
+	);
+	const nextInterpolator = useScreenAnimationStore(
+		(store) => store.nextInterpolator,
+	);
+	const currentInterpolator = useScreenAnimationStore(
+		(store) => store.currentInterpolator,
+	);
+	const ancestorScreenAnimationSources = useScreenAnimationStore(
+		(store) => store.ancestorScreenAnimationSources,
+	);
+	const descendantScreenAnimationSources = useScreenAnimationStore(
+		(store) => store.descendantScreenAnimationSources,
+	);
+	const transition = useBuildTransitionAccessor({
 		screenInterpolatorProps,
 		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
 		ancestorScreenAnimationSources,
 		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-	const transition = useBuildTransitionAccessor();
-	const nextInterpolatorReady = useSharedValue(0);
+	});
+	const hasCurrentInterpolator = !!currentInterpolator;
+	const { closing: currentClosing, entering: currentEntering } =
+		AnimationStore.getBag(currentScreenKey);
+	const {
+		animationProgress: currentAnimationProgress,
+		pendingLifecycleRequestKind: currentPendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: currentPendingLifecycleStartBlockCount,
+	} = SystemStore.getBag(currentScreenKey);
+	const interpolatorReady = useDerivedValue<number>(() => {
+		"worklet";
+		const isPendingOpen =
+			currentPendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const opening = isPendingOpen || !!currentEntering.get();
+
+		return isScreenInterpolatorReady({
+			hasInterpolator: hasCurrentInterpolator,
+			opening,
+			closing: currentClosing.get(),
+			pendingLifecycleStartBlockCount:
+				currentPendingLifecycleStartBlockCount.get(),
+			animationProgress: currentAnimationProgress.get(),
+		})
+			? 1
+			: 0;
+	});
 
 	// In some cases, a user may want to use external shared values to drive animations in the interpoaltor.
 	// We can now support this by collecting those shared values and reading them here to trigger an update.
@@ -249,10 +292,6 @@ export const useInterpolatedStylesMap = ({
 			!nextInterpolator ||
 			isOpeningBlocked ||
 			hasCloseFinished;
-		const nextReady = currentOwnsInterpolator ? 0 : 1;
-
-		nextInterpolatorReady.set(nextReady);
-
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"
 			: "next";
@@ -328,7 +367,7 @@ export const useInterpolatedStylesMap = ({
 	});
 
 	return {
+		interpolatorReady,
 		localStylesMaps,
-		nextInterpolatorReady,
 	};
 };

package/src/shared/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -1,5 +1,6 @@
 import { useWindowDimensions } from "react-native";
 import {
+	type SharedValue,
 	useAnimatedProps,
 	useAnimatedReaction,
 	useAnimatedStyle,
@@ -10,9 +11,18 @@ import { SystemStore } from "../../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
 import { useDescriptorsStore } from "../../descriptors";
 import { hasCloseTransitionFinished } from "../helpers/transition-visual-state";
+import { resolveVisibilityBlockOwnership } from "../helpers/visibility-block-ownership";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
-export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
+type Params = {
+	ancestorVisibilityBlocked: SharedValue<boolean> | null;
+	isFloatingOverlay?: boolean;
+};
+
+export const useMaybeBlockVisibility = ({
+	ancestorVisibilityBlocked,
+	isFloatingOverlay,
+}: Params) => {
 	const { height } = useWindowDimensions();
 	const currentScreenKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
@@ -25,29 +35,39 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	} = SystemStore.getBag(currentScreenKey);
 
 	const hasVisibilityGateOpened = useSharedValue(false);
-	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
+	const localVisibilityBlocked = useSharedValue(!isFloatingOverlay);
+	const effectiveVisibilityBlocked = useSharedValue(!isFloatingOverlay);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
 
-			return resolveScreenVisibilityGate({
-				isFloatingOverlay,
-				hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
-				pendingLifecycleStartBlockCount: pendingLifecycleStartBlockCount.get(),
-				pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
-				animationProgress: animationProgress.get(),
-				entering: entering.get(),
-			});
+			return {
+				gate: resolveScreenVisibilityGate({
+					isFloatingOverlay,
+					hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
+					pendingLifecycleStartBlockCount:
+						pendingLifecycleStartBlockCount.get(),
+					pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
+					animationProgress: animationProgress.get(),
+					entering: entering.get(),
+				}),
+				ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+			};
 		},
-		(gate) => {
+		({ gate, ancestorBlocked }) => {
 			"worklet";
 
 			if (gate.shouldOpenGate) {
 				hasVisibilityGateOpened.set(true);
 			}
 
-			shouldBlockVisibility.set(gate.shouldBlock);
+			const ownership = resolveVisibilityBlockOwnership({
+				localBlocked: gate.shouldBlock,
+				ancestorBlocked,
+			});
+			localVisibilityBlocked.set(gate.shouldBlock);
+			effectiveVisibilityBlocked.set(ownership.effectiveBlocked);
 		},
 	);
 
@@ -66,10 +86,15 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 			};
 		}
 
+		const ownership = resolveVisibilityBlockOwnership({
+			localBlocked: localVisibilityBlocked.get(),
+			ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+		});
+
 		return {
 			transform: [
 				{
-					translateY: shouldBlockVisibility.get() ? offset : 0,
+					translateY: ownership.appliesOffset ? offset : 0,
 				},
 			],
 		};
@@ -78,7 +103,7 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const animatedProps = useAnimatedProps(() => {
 		"worklet";
 		return {
-			pointerEvents: shouldBlockVisibility.get()
+			pointerEvents: effectiveVisibilityBlocked.get()
 				? ("none" as const)
 				: ("box-none" as const),
 		};
@@ -87,6 +112,6 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	return {
 		animatedStyle,
 		animatedProps,
-		shouldBlockVisibility,
+		visibilityBlocked: effectiveVisibilityBlocked,
 	};
 };