react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.2

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

@@ -1,14 +1,13 @@
 import {
 	type ForwardedRef,
 	type ReactNode,
-	useCallback,
 	useImperativeHandle,
+	useLayoutEffect,
 	useMemo,
 	useRef,
-	useState,
 } from "react";
 import type { View } from "react-native";
-import type { AnimatedRef, StyleProps } from "react-native-reanimated";
+import type { AnimatedRef } from "react-native-reanimated";
 import { useAnimatedRef } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import {
@@ -30,28 +29,11 @@ import type {
 	BoundaryOwnProps,
 } from "../types";
 
-interface BoundaryRootContextValue extends BoundaryRootRenderState {
-	registerTargetRef: (
-		targetRef: AnimatedRef<View>,
-		preparedStyles: StyleProps,
-		measurementRef?: AnimatedRef<View>,
-	) => void;
-	unregisterTargetRef: (targetRef: AnimatedRef<View>) => void;
-	activeTargetRef: AnimatedRef<View> | null;
-	boundTag: BoundTag;
-	portalRuntime: BoundaryPortalRuntime;
-}
-
-type BoundaryTargetEntry = {
-	ref: AnimatedRef<View>;
-	/** Surface to measure — the portal placeholder when content can teleport. */
-	measurementRef: AnimatedRef<View>;
-	preparedStyles: StyleProps;
-};
+type BoundaryRootContextValue = BoundaryRootRenderState;
 
 // logger.warn prepends the library prefix.
 const MULTIPLE_TARGETS_WARNING =
-	"Multiple Boundary.Target elements were rendered under the same boundary root. The first registered target will be measured.";
+	"Multiple Boundary.Target elements were rendered under the same boundary root. The first target in render order will be measured.";
 
 export const TARGET_OUTSIDE_ROOT_WARNING =
 	"Boundary.Target must be rendered inside Transition.Boundary or a component created by createBoundaryComponent.";
@@ -61,9 +43,9 @@ export type BoundaryRootRenderState = {
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	handoffEnabled: boolean;
+	measurementRef: AnimatedRef<View>;
 	portalRuntime: BoundaryPortalRuntime;
 	ref: AnimatedRef<View>;
-	rootEscapePlaceholderRef: AnimatedRef<View>;
 	shouldRenderBoundaryRootThroughPortal: boolean;
 	shouldRenderHandoffHost: boolean;
 };
@@ -75,8 +57,11 @@ type BoundaryRootProviderProps = Pick<
 	children: (state: BoundaryRootRenderState) => ReactNode;
 	config: BoundaryConfigProps;
 	forwardedRef?: ForwardedRef<any>;
+	hasTarget: boolean;
 	id: BoundaryId;
 	style?: unknown;
+	targetCount: number;
+	targetStyle?: unknown;
 };
 
 export const {
@@ -95,8 +80,11 @@ export const {
 		forwardedRef,
 		group,
 		handoff,
+		hasTarget,
 		id,
 		style,
+		targetCount,
+		targetStyle,
 	}) => {
 		const requestedBoundTag = useMemo(
 			() => createBoundTag(String(id), group),
@@ -137,51 +125,18 @@ export const {
 		const associatedStyles = useComposedSlotStyles(boundTag.tag, style);
 		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
 		const rootRef = useAnimatedRef<View>();
-		const rootEscapePlaceholderRef = useAnimatedRef<View>();
-		const [targetEntry, setTargetEntry] = useState<BoundaryTargetEntry | null>(
-			null,
-		);
-
-		const registerTargetRef = useCallback(
-			(
-				targetRef: AnimatedRef<View>,
-				preparedStyles: StyleProps,
-				measurementRef?: AnimatedRef<View>,
-			) => {
-				setTargetEntry((prev) => {
-					if (prev?.ref === targetRef) {
-						return prev;
-					}
-
-					if (__DEV__ && prev !== null) {
-						logger.warnOnce(
-							"boundary:multiple-targets",
-							MULTIPLE_TARGETS_WARNING,
-						);
-					}
-
-					return (
-						prev ?? {
-							ref: targetRef,
-							measurementRef: measurementRef ?? targetRef,
-							preparedStyles,
-						}
-					);
-				});
-			},
-			[],
-		);
+		const measurementRef = useAnimatedRef<View>();
 
-		const unregisterTargetRef = useCallback((targetRef: AnimatedRef<View>) => {
-			setTargetEntry((prev) => (prev?.ref === targetRef ? null : prev));
-		}, []);
+		useLayoutEffect(() => {
+			if (__DEV__ && targetCount > 1) {
+				logger.warnOnce("boundary:multiple-targets", MULTIPLE_TARGETS_WARNING);
+			}
+		}, [targetCount]);
 
-		const rootMeasurementRef = shouldEscapeBoundaryRootToScreenHost
-			? rootEscapePlaceholderRef
-			: rootRef;
-		const measuredRef = targetEntry?.measurementRef ?? rootMeasurementRef;
-		const hasActiveTarget = targetEntry !== null;
-		const targetPreparedStyles = targetEntry?.preparedStyles;
+		const measuredRef =
+			hasTarget || shouldEscapeBoundaryRootToScreenHost
+				? measurementRef
+				: rootRef;
 
 		useImperativeHandle(forwardedRef, () => rootRef.current as any, [rootRef]);
 
@@ -191,15 +146,14 @@ export const {
 			runtimeEnabled,
 			currentScreenKey,
 			measuredRef,
-			style,
-			targetPreparedStyles,
+			style: hasTarget ? targetStyle : style,
 			handoff: portalRuntime.handoff,
 			escapeClipping: portalRuntime.escapeClipping,
 			config,
 		});
 
 		const shouldRenderBoundaryRootThroughPortal =
-			shouldEscapeBoundaryRootToScreenHost && !hasActiveTarget;
+			shouldEscapeBoundaryRootToScreenHost && !hasTarget;
 		const handoffEnabled = enabled && portalRuntime.handoff;
 		// A nested active target takes the full associated style, so the root keeps
 		// only its stacking context. Root-owned escape-clipping moves the root
@@ -209,7 +163,7 @@ export const {
 		// handoff host is absolute-filled inside this root, so the root is the
 		// visual frame that animates the received payload.
 		const attachedStyle = shouldAttachAssociatedStyles
-			? hasActiveTarget
+			? hasTarget
 				? associatedStackingStyles
 				: shouldRenderBoundaryRootThroughPortal
 					? undefined
@@ -219,31 +173,25 @@ export const {
 		const value = useMemo<BoundaryRootContextValue>(
 			() => ({
 				attachedStyle,
-				activeTargetRef: targetEntry?.ref ?? null,
 				boundTag,
 				currentScreenKey,
 				handoffEnabled,
+				measurementRef,
 				portalRuntime,
-				registerTargetRef,
 				ref: rootRef,
-				rootEscapePlaceholderRef,
 				shouldRenderBoundaryRootThroughPortal,
-				shouldRenderHandoffHost: handoffEnabled && !hasActiveTarget,
-				unregisterTargetRef,
+				shouldRenderHandoffHost: handoffEnabled && !hasTarget,
 			}),
 			[
 				attachedStyle,
 				boundTag,
 				currentScreenKey,
 				handoffEnabled,
-				hasActiveTarget,
+				hasTarget,
+				measurementRef,
 				portalRuntime,
-				registerTargetRef,
 				rootRef,
-				rootEscapePlaceholderRef,
 				shouldRenderBoundaryRootThroughPortal,
-				targetEntry,
-				unregisterTargetRef,
 			],
 		);
 

package/src/components/boundary/utils/refresh-signals.ts

@@ -40,6 +40,7 @@ export const getRefreshBoundarySignal = (params: {
 	entering: boolean;
 	animating: boolean;
 	progress: number;
+	gestureInProgress: boolean;
 	linkState?: LinkPairsState;
 }): RefreshBoundarySignal | null => {
 	"worklet";
@@ -57,11 +58,18 @@ export const getRefreshBoundarySignal = (params: {
 		entering,
 		animating,
 		progress,
+		gestureInProgress,
 		linkState,
 	} = params;
 
 	if (!enabled) return null;
 
+	// This is temporary for a patch fix. However, this architecture should
+	// change: our signals aren't currently doing their intended job, so right
+	// now we'll add one more guard until the shape is much more tested and
+	// bulletproof.
+	if (gestureInProgress) return null;
+
 	const canRefreshPreCloseDestination =
 		shouldRefresh && closing && !entering && !animating && progress >= 1;
 

package/src/components/boundary/utils/resolve-boundary-target.tsx

@@ -0,0 +1,39 @@
+import {
+	Children,
+	cloneElement,
+	Fragment,
+	isValidElement,
+	type ReactElement,
+	type ReactNode,
+} from "react";
+
+type ResolveBoundaryTargetOptions = {
+	isTarget: (element: ReactElement) => boolean;
+	mapTarget?: (element: ReactElement, selected: boolean) => ReactElement;
+};
+
+export const resolveBoundaryTarget = (
+	children: ReactNode,
+	options: ResolveBoundaryTargetOptions,
+): {
+	children: ReactNode;
+	target: ReactElement | null;
+	targetCount: number;
+} => {
+	let target: ReactElement | null = null;
+	let targetCount = 0;
+	const map = (nodes: ReactNode): ReactNode =>
+		Children.map(nodes, (node) => {
+			if (!isValidElement<{ children?: ReactNode }>(node)) return node;
+			if (node.type === Fragment) {
+				return cloneElement(node, undefined, map(node.props.children));
+			}
+			if (!options.isTarget(node)) return node;
+			target ??= node;
+			targetCount += 1;
+			return options.mapTarget?.(node, targetCount === 1) ?? node;
+		});
+
+	const mappedChildren = map(children);
+	return { children: target ? mappedChildren : children, target, targetCount };
+};

package/src/components/masked-view.tsx

@@ -1,4 +1,10 @@
-import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
+import {
+	I18nManager,
+	type StyleProp,
+	StyleSheet,
+	View,
+	type ViewStyle,
+} from "react-native";
 import { CONTAINER_STYLE_ID, MASK_STYLE_ID } from "../constants";
 import { createTransitionAwareComponent } from "./create-transition-aware-component";
 
@@ -49,9 +55,19 @@ const styles = StyleSheet.create({
 	root: {
 		flex: 1,
 	},
-	rootMask: {
-		backgroundColor: "white",
-	},
+	// The mask rect's translate math assumes a physical top-left base. Under
+	// native RTL a fixed-width flex child anchors to the right edge, so pin it
+	// to the physical left (`end` = left edge in RTL).
+	rootMask: I18nManager.isRTL
+		? {
+				backgroundColor: "white",
+				end: 0,
+				position: "absolute",
+				top: 0,
+			}
+		: {
+				backgroundColor: "white",
+			},
 	rootContainer: {
 		flex: 1,
 	},

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

@@ -30,7 +30,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	const BackdropComponent = current.options.backdropComponent;
 	const routeKey = current.route.key;
 	const animations = AnimationStore.getBag(routeKey);
-	const { targetProgress, resolvedAutoSnapPoint } =
+	const { targetProgress, animationProgress, resolvedAutoSnapPoint } =
 		SystemStore.getBag(routeKey);
 
 	const AnimatedBackdropComponent = useMemo(
@@ -99,6 +99,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 					spec,
 					animations,
 					targetProgress,
+					animationProgress,
 					onAnimationFinish: shouldDismiss ? dismissScreen : undefined,
 				});
 			});
@@ -106,6 +107,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	}, [
 		animations,
 		targetProgress,
+		animationProgress,
 		resolvedAutoSnapPoint,
 		backdropBehavior,
 		current,

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

@@ -1,5 +1,5 @@
 import { memo, useCallback } from "react";
-import { StyleSheet, View, type ViewProps } from "react-native";
+import { I18nManager, StyleSheet, View, type ViewProps } from "react-native";
 import Animated from "react-native-reanimated";
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
@@ -97,7 +97,17 @@ const styles = StyleSheet.create({
 	navigationContainer: {
 		flex: 1,
 	},
-	navigationMaskElement: {
-		backgroundColor: "white",
-	},
+	// The mask rect's translate math assumes a physical top-left base. Under
+	// native RTL a fixed-width flex child anchors to the right edge, so pin it
+	// to the physical left (`end` = left edge in RTL).
+	navigationMaskElement: I18nManager.isRTL
+		? {
+				backgroundColor: "white",
+				end: 0,
+				position: "absolute",
+				top: 0,
+			}
+		: {
+				backgroundColor: "white",
+			},
 });

package/src/components/screen-lifecycle/hooks/use-transition-start-controller.ts

@@ -22,6 +22,7 @@ export const useTransitionStartController = ({
 }) => {
 	const {
 		targetProgress,
+		animationProgress,
 		pendingLifecycleRequestKind,
 		pendingLifecycleRequestTarget,
 		pendingLifecycleStartBlockCount,
@@ -62,6 +63,7 @@ export const useTransitionStartController = ({
 				spec: transitionSpec,
 				animations,
 				targetProgress,
+				animationProgress,
 				onAnimationFinish,
 			});
 

package/src/navigators/react-navigation/index.tsx

@@ -1,22 +1,15 @@
 import {
 	createStandardNavigationFactories,
-	type NavigatorTypeBagBase,
-	type ParamListBase,
 	type StackActionHelpers,
 	type StackNavigationState,
 	StackRouter,
 	type StackRouterOptions,
 	type StandardNavigationTypeBagBase,
-	type StaticConfig,
-	type TypedNavigator,
 } from "@react-navigation/native";
-import type * as React from "react";
 import { reactNavigationHost } from "../../providers/navigation/react-navigation-host";
 import type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
-	BlankStackNavigationProp,
-	BlankStackNavigatorProps,
 } from "../../types/blank-stack.types";
 import {
 	BlankStackNavigator,
@@ -31,26 +24,10 @@ interface BlankStackStandardTypeBag extends StandardNavigationTypeBagBase {
 	RouterOptions: StackRouterOptions;
 }
 
-type BlankStackTypeBagFor<
-	ParamList extends ParamListBase,
-	NavigatorID extends string | undefined,
-> = NavigatorTypeBagBase & {
-	ParamList: ParamList;
-	NavigatorID: NavigatorID;
-	State: StackNavigationState<ParamList>;
-	ScreenOptions: BlankStackNavigationOptions;
-	EventMap: BlankStackNavigationEventMap;
-	NavigationList: {
-		[RouteName in keyof ParamList]: BlankStackNavigationProp<
-			ParamList,
-			RouteName,
-			NavigatorID
-		>;
-	};
-	Navigator: React.ComponentType<BlankStackNavigatorProps>;
-};
-
-const standardBlankStackFactories = createStandardNavigationFactories<
+export const {
+	createNavigator: createBlankStackNavigator,
+	createScreen: createBlankStackScreen,
+} = createStandardNavigationFactories<
 	BlankStackStandardTypeBag,
 	BlankStackStandardNavigatorProps
 >(BlankStackNavigator, StackRouter, ({ state, navigation }) => ({
@@ -59,27 +36,6 @@ const standardBlankStackFactories = createStandardNavigationFactories<
 	navigationHost: reactNavigationHost,
 }));
 
-export const createBlankStackScreen = standardBlankStackFactories.createScreen;
-
-const createReactNavigationBlankStackNavigator =
-	standardBlankStackFactories.createNavigator as unknown as (
-		config?: unknown,
-	) => unknown;
-
-export function createBlankStackNavigator<
-	const ParamList extends ParamListBase = ParamListBase,
-	const NavigatorID extends string | undefined = undefined,
-	const TypeBag extends NavigatorTypeBagBase = BlankStackTypeBagFor<
-		ParamList,
-		NavigatorID
-	>,
-	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
->(config?: Config): TypedNavigator<TypeBag, Config> {
-	return createReactNavigationBlankStackNavigator(
-		config,
-	) as unknown as TypedNavigator<TypeBag, Config>;
-}
-
 export type {
 	BlankStackFactoryOptions,
 	BlankStackNavigationEventMap,

package/src/providers/helpers/measured-bounds-writes.ts

@@ -67,6 +67,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
+			{ handoff, escapeClipping },
 		);
 	}
 };

package/src/providers/screen/gestures/gestures.provider.tsx

@@ -8,7 +8,6 @@ import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
 import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
-import { useBuildRotationGesture } from "./rotation/use-build-rotation-gesture";
 import {
 	type DirectionClaimMap,
 	type GestureCompositionOwner,
@@ -54,14 +53,9 @@ export const {
 		gestureCompositionOwner,
 	});
 
-	const rotationGesture = useBuildRotationGesture({
-		gestureConfig,
-		gestureCompositionOwner,
-	});
-
 	const detectorGesture = useMemo(
-		() => Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-		[panGesture, pinchGesture, rotationGesture],
+		() => Gesture.Simultaneous(panGesture, pinchGesture),
+		[panGesture, pinchGesture],
 	);
 
 	const value = useMemo<GestureContextType>(
@@ -70,7 +64,6 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
-			rotationGesture,
 			scrollState,
 			gestureContext,
 			claimedDirections: gestureConfig.participation.claimedDirections,
@@ -81,7 +74,6 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
-			rotationGesture,
 			scrollState,
 			gestureContext,
 			gestureConfig.participation.claimedDirections,

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

@@ -170,6 +170,7 @@ export const finalizePanRelease = (
 		emitWillAnimate: false,
 		markEntering: false,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		animations,
 		initialVelocity: plan.progressVelocity,
 	});

package/src/providers/screen/gestures/pinch/activation/use-pinch-activation.ts

@@ -3,7 +3,7 @@ import type {
 	GestureStateManager,
 	GestureTouchEvent,
 } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
@@ -34,6 +34,48 @@ export const updateAbsolutePinchFocalPoint = (
 	}
 };
 
+export const updatePinchRotation = (
+	event: GestureTouchEvent,
+	gestures: GestureStoreMap,
+	lastAngle: SharedValue<number>,
+	accumulatedRotation: SharedValue<number>,
+	captureOrigin: boolean,
+) => {
+	"worklet";
+	const firstTouch = event.allTouches[0];
+	const secondTouch = event.allTouches[1];
+
+	if (!firstTouch || !secondTouch) {
+		return;
+	}
+
+	const angle = Math.atan2(
+		secondTouch.absoluteY - firstTouch.absoluteY,
+		secondTouch.absoluteX - firstTouch.absoluteX,
+	);
+
+	if (captureOrigin) {
+		lastAngle.set(angle);
+		accumulatedRotation.set(0);
+		gestures.rotation.set(0);
+		gestures.raw.rotation.set(0);
+		return;
+	}
+
+	let angleDelta = angle - lastAngle.get();
+	if (angleDelta > Math.PI) {
+		angleDelta -= 2 * Math.PI;
+	} else if (angleDelta < -Math.PI) {
+		angleDelta += 2 * Math.PI;
+	}
+
+	const rotation = accumulatedRotation.get() + angleDelta;
+	lastAngle.set(angle);
+	accumulatedRotation.set(rotation);
+	gestures.rotation.set(rotation);
+	gestures.raw.rotation.set(rotation);
+};
+
 interface UsePinchActivationProps {
 	runtime: SharedValue<PinchGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
@@ -45,6 +87,9 @@ export const usePinchActivation = ({
 	screenOptions,
 	gestureCompositionOwner,
 }: UsePinchActivationProps) => {
+	const lastAngle = useSharedValue(0);
+	const accumulatedRotation = useSharedValue(0);
+
 	const onTouchesDown = useCallback(
 		(
 			event: GestureTouchEvent,
@@ -68,6 +113,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					true,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					true,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -79,7 +131,13 @@ export const usePinchActivation = ({
 				stateManager?.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	const onTouchesMove = useCallback(
@@ -102,6 +160,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					false,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					false,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -113,7 +178,13 @@ export const usePinchActivation = ({
 				stateManager.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	return useMemo(

package/src/providers/screen/gestures/pinch/behavior/pinch-lifecycle.ts

@@ -108,6 +108,7 @@ export const finalizePinchRelease = (
 		markEntering: false,
 		animations,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		initialVelocity: release.initialVelocity,
 	});
 };

package/src/providers/screen/gestures/pinch/behavior/pinch-release.ts

@@ -95,7 +95,7 @@ export const resolvePinchRelease = (
 	const {
 		participation,
 		policy,
-		stores: { animations },
+		stores: { animations, system },
 	} = runtime;
 	const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
 	const currentProgress = animations.transitionProgress.get();
@@ -106,9 +106,7 @@ export const resolvePinchRelease = (
 			policy.pinchInEnabled,
 			policy.pinchOutEnabled,
 		);
-	const target = shouldDismiss
-		? 0
-		: runtime.stores.gestures.internal.progressBaseline.get();
+	const target = shouldDismiss ? 0 : system.targetProgress.get();
 	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
 	const handoffVelocity = getPinchReleaseHandoffVelocity(
 		event.velocity,