react-native-screen-transitions 3.6.0-alpha.0 → 3.6.0-alpha.2

package/src/shared/components/create-boundary-component/{hooks/helpers/scroll-measurement.ts → utils/measured-bounds.ts}

@@ -7,7 +7,7 @@ import {
 import type {
 	ScrollGestureAxisState,
 	ScrollGestureState,
-} from "../../../../types/gesture.types";
+} from "../../../types/gesture.types";
 
 const SCROLL_MEASUREMENT_EPSILON = 1;
 
@@ -46,6 +46,30 @@ export const adjustedMeasuredBoundsForOverscrollDeltas = (
 	};
 };
 
+export const isMeasurementInViewport = (
+	measured: MeasuredDimensions,
+	viewportWidth: number,
+	viewportHeight: number,
+): boolean => {
+	"worklet";
+
+	if (measured.width <= 0 || measured.height <= 0) {
+		return false;
+	}
+
+	const toleranceX = viewportWidth * 0.15;
+	const toleranceY = viewportHeight * 0.15;
+	const centerX = measured.pageX + measured.width / 2;
+	const centerY = measured.pageY + measured.height / 2;
+
+	return (
+		centerX >= -toleranceX &&
+		centerX <= viewportWidth + toleranceX &&
+		centerY >= -toleranceY &&
+		centerY <= viewportHeight + toleranceY
+	);
+};
+
 export const measureWithOverscrollAwareness = (
 	ref: AnimatedRef<View>,
 	scrollState: ScrollGestureState | null,

package/src/shared/components/create-boundary-component/utils/refresh-signals.ts

@@ -0,0 +1,164 @@
+import {
+	createPendingPairKey,
+	createScreenPairKey,
+	getDestinationScreenKeyFromPairKey,
+} from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../stores/bounds/types";
+import type { MeasureTarget } from "../types";
+
+const SOURCE_SIGNAL_PREFIX = "source|";
+const DESTINATION_SIGNAL_PREFIX = "destination|";
+
+type RefreshBoundarySignal = MeasureTarget & {
+	signal: string;
+};
+
+const findNestedDestinationPairKey = (
+	linkState: LinkPairsState | undefined,
+	linkId: string,
+	ancestorScreenKeys: readonly string[] | undefined,
+): ScreenPairKey | null => {
+	"worklet";
+	const destinationScreenKey = ancestorScreenKeys?.[0];
+	if (!linkState || !destinationScreenKey) return null;
+
+	for (const pairKey in linkState) {
+		if (getDestinationScreenKeyFromPairKey(pairKey) !== destinationScreenKey) {
+			continue;
+		}
+
+		if (linkState[pairKey]?.links?.[linkId]?.destination) {
+			return pairKey;
+		}
+	}
+
+	return null;
+};
+
+const buildRefreshSignal = (
+	type: MeasureTarget["type"],
+	pairKey: ScreenPairKey,
+	key: string,
+): RefreshBoundarySignal => {
+	"worklet";
+	const prefix =
+		type === "source" ? SOURCE_SIGNAL_PREFIX : DESTINATION_SIGNAL_PREFIX;
+	return {
+		type,
+		pairKey,
+		signal: `${prefix}${pairKey}|${key}`,
+	};
+};
+
+export const getRefreshBoundarySignal = (params: {
+	enabled: boolean;
+	currentScreenKey: string;
+	preferredSourceScreenKey?: string;
+	nextScreenKey?: string;
+	linkId: string;
+	group?: string;
+	ancestorScreenKeys?: readonly string[];
+	shouldRefresh: boolean;
+	closing: boolean;
+	entering: boolean;
+	animating: boolean;
+	progress: number;
+	linkState?: LinkPairsState;
+}): RefreshBoundarySignal | null => {
+	"worklet";
+	const {
+		enabled,
+		currentScreenKey,
+		preferredSourceScreenKey,
+		nextScreenKey,
+		linkId,
+		group,
+		ancestorScreenKeys,
+		shouldRefresh,
+		closing,
+		entering,
+		animating,
+		progress,
+		linkState,
+	} = params;
+
+	if (!enabled) return null;
+
+	const canRefreshPreCloseDestination =
+		shouldRefresh && closing && !entering && !animating && progress >= 1;
+	const canRefreshSettledDestination = shouldRefresh && !closing && !entering;
+
+	if (!canRefreshPreCloseDestination && !canRefreshSettledDestination) {
+		return null;
+	}
+
+	// Non-group refresh only rewrites destination bounds. Source refresh is a
+	// grouped-only fallback for active ids that do not have source bounds yet.
+	if (!group) {
+		if (nextScreenKey) {
+			return null;
+		}
+
+		// Nested initial screens have no previous screen in their own navigator,
+		// so recover the pair by looking for a destination on the ancestor route.
+		const pairKey = preferredSourceScreenKey
+			? createScreenPairKey(preferredSourceScreenKey, currentScreenKey)
+			: findNestedDestinationPairKey(linkState, linkId, ancestorScreenKeys);
+
+		if (!pairKey) return null;
+
+		return buildRefreshSignal(
+			"destination",
+			pairKey,
+			[currentScreenKey, closing ? "closing" : "settled"].join("|"),
+		);
+	}
+
+	// Source-side grouped refresh: a new active id may not have source bounds yet,
+	// so the next screen's lifecycle pulse gives that source one chance to capture.
+	if (nextScreenKey) {
+		const pairKey = createScreenPairKey(currentScreenKey, nextScreenKey);
+		const pendingPairKey = createPendingPairKey(currentScreenKey);
+		const activeId = linkState?.[pairKey]?.groups?.[group]?.activeId;
+		const hasSource =
+			!!linkState?.[pairKey]?.links?.[linkId]?.source ||
+			!!linkState?.[pendingPairKey]?.links?.[linkId]?.source;
+
+		if (activeId !== linkId || hasSource) {
+			return null;
+		}
+
+		return buildRefreshSignal(
+			"source",
+			pairKey,
+			[group, linkId, closing ? "closing" : "settled"].join("|"),
+		);
+	}
+
+	if (!preferredSourceScreenKey) return null;
+
+	// Destination-side grouped refresh: only the active member rewrites the
+	// destination side, keeping inactive grouped members from stealing the link.
+	const pairKey = createScreenPairKey(
+		preferredSourceScreenKey,
+		currentScreenKey,
+	);
+	const activeId = linkState?.[pairKey]?.groups?.[group]?.activeId;
+	const hasSource = !!linkState?.[pairKey]?.links?.[linkId]?.source;
+	const hasDestination = !!linkState?.[pairKey]?.links?.[linkId]?.destination;
+
+	// Destination retargeting should only measure a concrete member that already
+	// participates in the pair. Missing members fall back to initialId at resolve.
+	if (activeId !== linkId || (!hasSource && !hasDestination)) {
+		return null;
+	}
+
+	return buildRefreshSignal(
+		"destination",
+		pairKey,
+		[group, linkId, closing ? "closing" : "settled"].join("|"),
+	);
+};

package/src/shared/components/create-boundary-component/utils/source-signals.ts

@@ -0,0 +1,72 @@
+import { createScreenPairKey } from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../stores/bounds/types";
+
+const SOURCE_SIGNAL_PREFIX = "source|";
+
+type SourceCaptureSignal = {
+	pairKey: ScreenPairKey;
+	signal: string;
+};
+
+const buildSourceSignal = (
+	pairKey: ScreenPairKey,
+	key: string,
+): SourceCaptureSignal => {
+	"worklet";
+	return {
+		pairKey,
+		signal: `${SOURCE_SIGNAL_PREFIX}${pairKey}|${key}`,
+	};
+};
+
+export const getInitialSourceCaptureSignal = (params: {
+	enabled: boolean;
+	nextScreenKey?: string;
+	currentScreenKey?: string;
+	linkId: string;
+	group?: string;
+	shouldAutoMeasure: boolean;
+	linkState?: LinkPairsState;
+}): SourceCaptureSignal | null => {
+	"worklet";
+	const {
+		enabled,
+		nextScreenKey,
+		currentScreenKey,
+		linkId,
+		group,
+		shouldAutoMeasure,
+		linkState,
+	} = params;
+
+	if (!enabled || !nextScreenKey || !currentScreenKey) {
+		return null;
+	}
+
+	// Trigger components capture on press. This passive path is for Boundary.View
+	// slots that need a source before navigation starts.
+	if (!shouldAutoMeasure) {
+		return null;
+	}
+
+	const pairKey = createScreenPairKey(currentScreenKey, nextScreenKey);
+
+	if (group) {
+		const activeId = linkState?.[pairKey]?.groups?.[group]?.activeId;
+
+		// Passive grouped sources should not measure every mounted item. Once a
+		// group has an active id, only that concrete member can auto-capture.
+		if (activeId && activeId !== linkId) {
+			return null;
+		}
+	}
+
+	const signalParts = group
+		? [currentScreenKey, nextScreenKey, group, linkId]
+		: [currentScreenKey, nextScreenKey, linkId];
+
+	return buildSourceSignal(pairKey, signalParts.join("|"));
+};

package/src/shared/components/create-transition-aware-component.tsx

@@ -12,7 +12,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../constants";
 import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
-import { useScrollGestureCoordination } from "../providers/screen/gestures/hooks/use-scroll-gesture-coordination";
+import { useScrollGestureCoordination } from "../providers/screen/gestures/scroll-coordination";
 import { useScreenStyles } from "../providers/screen/styles";
 import type { TransitionAwareProps } from "../types/screen.types";
 

package/src/shared/components/native-screen.tsx

@@ -1,17 +1,15 @@
 import type * as React from "react";
-import { StyleSheet, type View } from "react-native";
+import { StyleSheet } from "react-native";
 import Animated, {
 	Extrapolation,
 	interpolate,
 	useAnimatedProps,
-	useAnimatedRef,
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
 import { Screen as RNSScreen } from "react-native-screens";
 import { EPSILON } from "../constants";
 import { useStack } from "../hooks/navigation/use-stack";
-import { LayoutAnchorProvider } from "../providers/layout-anchor.provider";
 import { useManagedStackContext } from "../providers/stack/managed.provider";
 import { AnimationStore } from "../stores/animation.store";
 
@@ -54,7 +52,6 @@ export const NativeScreen = ({
 	const routesLength = routes.length;
 	const topIndex = routesLength - 1;
 	const topRouteKey = routes[topIndex]?.key ?? routeKey;
-	const screenRef = useAnimatedRef<View>();
 
 	const sceneClosing = AnimationStore.getValue(routeKey, "closing");
 	const topSceneProgress = AnimationStore.getValue(topRouteKey, "progress");
@@ -155,16 +152,13 @@ export const NativeScreen = ({
 	if (DISABLE_NATIVE_SCREENS) {
 		return (
 			<Animated.View
-				ref={screenRef}
 				// Keep a native boundary per screen when falling back to plain views.
 				// Android release builds can otherwise flatten sibling screens together.
 				collapsable={false}
 				style={StyleSheet.absoluteFill}
 				animatedProps={animatedProps}
 			>
-				<LayoutAnchorProvider anchorRef={screenRef}>
-					{children}
-				</LayoutAnchorProvider>
+				{children}
 			</Animated.View>
 		);
 	}
@@ -172,14 +166,11 @@ export const NativeScreen = ({
 	return (
 		<AnimatedNativeScreen
 			enabled
-			ref={screenRef}
 			style={StyleSheet.absoluteFill}
 			freezeOnBlur={freezeOnBlur}
 			animatedProps={animatedProps}
 		>
-			<LayoutAnchorProvider anchorRef={screenRef}>
-				{children}
-			</LayoutAnchorProvider>
+			{children}
 		</AnimatedNativeScreen>
 	);
 };

package/src/shared/components/screen-container/helpers/find-collapse-target.ts

@@ -1,5 +1,5 @@
 import { EPSILON } from "../../../constants";
-import { sanitizeSnapPoints } from "../../../providers/screen/gestures/helpers/validate-snap-points";
+import { sanitizeSnapPoints } from "../../../providers/screen/gestures/shared/snap-points";
 
 interface FindCollapseTargetResult {
 	target: number;
@@ -31,14 +31,25 @@ export function findCollapseTarget(
 			: { target: currentProgress, shouldDismiss: false };
 	}
 
-	const sorted = [...normalized].sort((a, b) => a - b);
-	const minSnap = sorted[0];
+	let minSnap = normalized[0];
+	let nextLowerSnap: number | null = null;
 
-	// Find next lower snap point
-	for (let i = sorted.length - 1; i >= 0; i--) {
-		if (sorted[i] < currentProgress - EPSILON) {
-			return { target: sorted[i], shouldDismiss: false };
+	for (let i = 0; i < normalized.length; i++) {
+		const snap = normalized[i];
+		if (snap < minSnap) {
+			minSnap = snap;
 		}
+
+		if (
+			snap < currentProgress - EPSILON &&
+			(nextLowerSnap === null || snap > nextLowerSnap)
+		) {
+			nextLowerSnap = snap;
+		}
+	}
+
+	if (nextLowerSnap !== null) {
+		return { target: nextLowerSnap, shouldDismiss: false };
 	}
 
 	// At or below min snap → dismiss if allowed

package/src/shared/components/screen-container/hooks/use-content-layout.ts

@@ -46,7 +46,7 @@ export function useContentLayout() {
 				if (
 					!isFirstMeasurement ||
 					animations.progress.get() !== 0 ||
-					animations.animating.get() !== 0
+					animations.progressAnimating.get() !== 0
 				) {
 					return;
 				}

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -63,11 +63,17 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 			runOnUI(() => {
 				"worklet";
-				const resolvedSnaps = rawSnapPoints
-					.map((point) =>
-						point === "auto" ? resolvedAutoSnapPoint.get() : point,
-					)
-					.filter((point): point is number => typeof point === "number");
+				const resolvedSnaps: number[] = [];
+
+				for (let i = 0; i < rawSnapPoints.length; i++) {
+					const point = rawSnapPoints[i];
+					const resolvedPoint =
+						point === "auto" ? resolvedAutoSnapPoint.get() : point;
+
+					if (typeof resolvedPoint === "number") {
+						resolvedSnaps.push(resolvedPoint);
+					}
+				}
 
 				const { target, shouldDismiss } = findCollapseTarget(
 					animations.progress.get(),

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -27,8 +27,38 @@ let hasWarnedMissingMaskedView = false;
 
 export const MaybeMaskedNavigationContainer = memo(
 	({ enabled, children, pointerEvents }: Props) => {
+		if (!enabled || LazyMaskedView === View) {
+			return children;
+		}
+
+		return (
+			<MaskedNavigationContainer pointerEvents={pointerEvents}>
+				{children}
+			</MaskedNavigationContainer>
+		);
+	},
+);
+
+const MaskedNavigationContainer = memo(
+	({
+		children,
+		pointerEvents,
+	}: {
+		children: React.ReactNode;
+		pointerEvents: ViewProps["pointerEvents"];
+	}) => {
 		const { stylesMap } = useScreenStyles();
 
+		const maybeLogWarning = useCallback(() => {
+			if (LazyMaskedView !== View) return;
+			if (hasWarnedMissingMaskedView) return;
+
+			hasWarnedMissingMaskedView = true;
+			logger.warn(
+				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
+			);
+		}, []);
+
 		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
@@ -43,21 +73,6 @@ export const MaybeMaskedNavigationContainer = memo(
 			);
 		});
 
-		const maybeLogWarning = useCallback(() => {
-			if (!enabled) return;
-			if (LazyMaskedView !== View) return;
-			if (hasWarnedMissingMaskedView) return;
-
-			hasWarnedMissingMaskedView = true;
-			logger.warn(
-				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
-			);
-		}, [enabled]);
-
-		if (!enabled || LazyMaskedView === View) {
-			return children;
-		}
-
 		return (
 			<LazyMaskedView
 				style={styles.navigationMaskedRoot}

package/src/shared/components/screen-container/layers/surface-container.tsx

@@ -14,7 +14,6 @@ type Props = {
 };
 
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 
 	const SurfaceComponent = current.options.surfaceComponent;
@@ -25,29 +24,50 @@ export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
 			: null;
 	}, [SurfaceComponent]);
 
-	const animatedSurfaceStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.get().surface?.style ?? NO_STYLES;
-	});
-
-	const animatedSurfaceProps = useAnimatedProps(() => {
-		"worklet";
-		return stylesMap.get().surface?.props ?? NO_PROPS;
-	});
-
 	if (!AnimatedSurfaceComponent) return children;
 
 	return (
-		<AnimatedSurfaceComponent
-			style={[styles.surface, animatedSurfaceStyle]}
-			animatedProps={animatedSurfaceProps}
+		<AnimatedSurface
+			SurfaceComponent={AnimatedSurfaceComponent}
 			pointerEvents={pointerEvents}
 		>
 			{children}
-		</AnimatedSurfaceComponent>
+		</AnimatedSurface>
 	);
 });
 
+type AnimatedSurfaceProps = {
+	children: React.ReactNode;
+	pointerEvents: ViewProps["pointerEvents"];
+	SurfaceComponent: ComponentType<any>;
+};
+
+const AnimatedSurface = memo(
+	({ children, pointerEvents, SurfaceComponent }: AnimatedSurfaceProps) => {
+		const { stylesMap } = useScreenStyles();
+
+		const animatedSurfaceStyle = useAnimatedStyle(() => {
+			"worklet";
+			return stylesMap.get().surface?.style ?? NO_STYLES;
+		});
+
+		const animatedSurfaceProps = useAnimatedProps(() => {
+			"worklet";
+			return stylesMap.get().surface?.props ?? NO_PROPS;
+		});
+
+		return (
+			<SurfaceComponent
+				style={[styles.surface, animatedSurfaceStyle]}
+				animatedProps={animatedSurfaceProps}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</SurfaceComponent>
+		);
+	},
+);
+
 const styles = StyleSheet.create({
 	surface: {
 		flex: 1,

package/src/shared/components/screen-lifecycle/hooks/helpers/reset-stores-for-screen.ts

@@ -1,35 +1,15 @@
 import { runOnUI } from "react-native-reanimated";
 import { AnimationStore } from "../../../../stores/animation.store";
-import {
-	clear,
-	clearByAncestor,
-	clearByBranch,
-} from "../../../../stores/bounds/internals/clear";
+import { clear } from "../../../../stores/bounds/internals/clear";
 import { GestureStore } from "../../../../stores/gesture.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
 import { SystemStore } from "../../../../stores/system.store";
 
-export function resetStoresForScreen(
-	routeKey: string,
-	isBranchScreen: boolean,
-	branchNavigatorKey?: string,
-) {
+export function resetStoresForScreen(routeKey: string) {
 	AnimationStore.clearBag(routeKey);
 	GestureStore.clearBag(routeKey);
 	ScrollStore.clearBag(routeKey);
 	SystemStore.clearBag(routeKey);
 
-	runOnUI(() => {
-		"worklet";
-		if (!isBranchScreen) return;
-
-		clear(routeKey);
-
-		if (branchNavigatorKey) {
-			clearByBranch(branchNavigatorKey);
-			return;
-		}
-
-		clearByAncestor(routeKey);
-	})();
+	runOnUI(clear)(routeKey);
 }

package/src/shared/components/screen-lifecycle/hooks/use-close-transition-intent.ts

@@ -68,7 +68,6 @@ const useManagedClose = ({
  */
 const useNativeStackClose = ({
 	current,
-	animations,
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
@@ -106,7 +105,6 @@ const useNativeStackClose = ({
 		const isFirstScreen = routeIndex <= 0;
 
 		if (!isEnabled || nearestAncestorDismissing?.get() || isFirstScreen) {
-			animations.closing.set(1);
 			resetStores();
 			return;
 		}
@@ -137,12 +135,11 @@ export function useCloseTransitionIntent(
 } {
 	const routeKey = current.route.key;
 	const { flags } = useStackCoreContext();
-	const { isBranchScreen, branchNavigatorKey } = useDescriptorDerivations();
 	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
 	const { requestLifecycleTransition } = system.actions;
 
 	const resetStores = useStableCallback(() => {
-		resetStoresForScreen(routeKey, isBranchScreen, branchNavigatorKey);
+		resetStoresForScreen(routeKey);
 	});
 
 	const closeParams: CloseHookParams = {

package/src/shared/components/screen-lifecycle/hooks/use-open-transition-intent.ts

@@ -66,7 +66,7 @@ export function useOpenTransitionIntent(
 				system.targetProgress.set(target);
 				animations.progress.set(target);
 			}
-			animations.animating.set(0);
+			animations.progressAnimating.set(0);
 			animations.closing.set(0);
 			animations.entering.set(0);
 			return;

package/src/shared/configs/presets.ts

@@ -246,7 +246,7 @@ export const SharedIGImage = ({
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
 		enableTransitions: true,
-		gestureDrivesProgress: false,
+		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			current,
 			layouts: {
@@ -394,7 +394,7 @@ export const SharedAppleMusic = ({
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
-		gestureDrivesProgress: false,
+		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			bounds,
 			focused,
@@ -608,7 +608,7 @@ export const SharedXImage = ({
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "vertical-inverted"],
-		gestureDrivesProgress: false,
+		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			focused,
 			bounds,