react-native-screen-transitions 3.9.0-beta.2 → 3.9.0-beta.3

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

@@ -9,6 +9,7 @@ import { useDescriptorsStore } from "../../../../../../providers/screen/descript
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
 import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
 import { AnimationStore } from "../../../../../../stores/animation.store";
+import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import {
@@ -132,7 +133,7 @@ export const useBoundaryContentPortalAttachment = ({
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			if (!enabled || !sourcePairKey) {
+			if (!enabled) {
 				return {
 					hostScreenKey: null,
 					ownerPairKey: sourcePairKey,
@@ -144,13 +145,51 @@ export const useBoundaryContentPortalAttachment = ({
 			const progressAnimating = settledHostAnimating.get();
 			const progressSettled = settledHostProgress.get();
 			const willAnimate = settledHostWillAnimate.get();
+			const closing = settledHostClosing.get();
+			const isOwnedHostClosing =
+				!!closing &&
+				!!ownership &&
+				settledHostScreenKey === ownership.hostScreenKey;
+
+			if (isOwnedHostClosing && ownership) {
+				const isClosingComplete = isHandoffHostClosingComplete({
+					closing,
+					progressAnimating,
+					progressSettled,
+					willAnimate,
+				});
+
+				if (!isClosingComplete) {
+					return ownership;
+				}
+
+				const sourceScreenKey = getSourceScreenKeyFromPairKey(
+					ownership.ownerPairKey,
+				);
+
+				return {
+					hostScreenKey: sourceScreenKey,
+					ownerPairKey: ownership.ownerPairKey,
+					ownerScreenKey: sourceScreenKey,
+					status: "complete",
+				};
+			}
+
+			if (!sourcePairKey) {
+				return {
+					hostScreenKey: null,
+					ownerPairKey: sourcePairKey,
+					ownerScreenKey: null,
+					status: "clear",
+				};
+			}
 
 			return resolveBoundaryPortalOwnership({
 				boundaryId,
 				currentScreenKey,
 				handoff: true,
 				isSettledHostClosingComplete: isHandoffHostClosingComplete({
-					closing: settledHostClosing.get(),
+					closing,
 					progressAnimating,
 					progressSettled,
 					willAnimate,
@@ -251,7 +290,11 @@ export const useBoundaryContentPortalAttachment = ({
 		"worklet";
 
 		const slot = activeSlotsMap.get()[boundaryId];
-		const { teleport, ...slotProps } = slot?.props ?? {};
+		const {
+			pointerEvents: _pointerEvents,
+			teleport,
+			...slotProps
+		} = slot?.props ?? {};
 		const shouldTeleport = shouldAttachBoundaryPortal({
 			enabled,
 			teleport,

package/src/shared/components/boundary/portal/components/boundary-content-portal/index.tsx

@@ -4,9 +4,13 @@ import {
 	memo,
 	type ReactNode,
 } from "react";
-import type { ViewProps } from "react-native";
+import { StyleSheet } from "react-native";
 import Animated from "react-native-reanimated";
-import { isTeleportAvailable, NativePortal } from "../../teleport";
+import {
+	isTeleportAvailable,
+	NativePortal,
+	PORTAL_POINTER_EVENTS,
+} from "../../teleport";
 import { useBoundaryContentPortalAttachment } from "./hooks/use-boundary-content-portal-attachment";
 
 export { BoundaryContentPortalHost } from "./components/host";
@@ -15,7 +19,6 @@ type BoundaryContentPortalProps = {
 	boundaryId?: string;
 	children: ReactNode;
 	enabled: boolean;
-	pointerEvents?: ViewProps["pointerEvents"];
 };
 
 type NullableHostNamePortalProps = Omit<
@@ -35,7 +38,6 @@ export const BoundaryContentPortal = memo(function BoundaryContentPortal({
 	boundaryId,
 	children,
 	enabled,
-	pointerEvents,
 }: BoundaryContentPortalProps) {
 	const shouldEnablePortal = enabled && boundaryId !== undefined;
 	const { teleportProps } = useBoundaryContentPortalAttachment({
@@ -48,7 +50,8 @@ export const BoundaryContentPortal = memo(function BoundaryContentPortal({
 			<AnimatedNativePortal
 				animatedProps={teleportProps}
 				name={boundaryId}
-				pointerEvents={pointerEvents}
+				pointerEvents={PORTAL_POINTER_EVENTS}
+				style={StyleSheet.absoluteFill}
 			>
 				{children}
 			</AnimatedNativePortal>

package/src/shared/components/boundary/portal/components/boundary-portal/components/host.tsx

@@ -10,6 +10,7 @@ import Animated from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
 import { SystemStore } from "../../../../../../stores/system.store";
+import { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
 import { useActivePortalBoundaryHosts } from "../stores/portal-boundary-host.store";
@@ -74,7 +75,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		? activeBoundaryHosts.map((host) => (
 				<View
 					key={host.portalHostName}
-					pointerEvents="none"
+					pointerEvents={PORTAL_POINTER_EVENTS}
 					style={[
 						styles.boundaryHostViewport,
 						{ width: viewportWidth, height: viewportHeight },
@@ -89,7 +90,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 	return (
 		<Animated.View
 			ref={measurement.hostRef}
-			pointerEvents="none"
+			pointerEvents={PORTAL_POINTER_EVENTS}
 			style={[
 				styles.host,
 				{ width: viewportWidth, height: viewportHeight },

package/src/shared/components/boundary/portal/components/boundary-portal/components/portal-boundary-host.tsx

@@ -11,7 +11,7 @@ import {
 	ScrollStore,
 } from "../../../../../../stores/scroll.store";
 import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
-import { NativePortalHost } from "../../../teleport";
+import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { hasLocalSlot } from "../helpers/has-local-slot";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
@@ -142,12 +142,13 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 
 	return (
 		<Animated.View
-			pointerEvents="none"
+			pointerEvents={PORTAL_POINTER_EVENTS}
 			style={[style, hostStyle]}
 			collapsable={false}
 		>
 			<AnimatedPortalBoundaryHost
 				name={host.portalHostName}
+				pointerEvents={PORTAL_POINTER_EVENTS}
 				style={[styles.content, contentFrameStyle, slotStyle]}
 			/>
 		</Animated.View>

package/src/shared/components/boundary/portal/components/boundary-portal/components/portal-slot.tsx

@@ -4,11 +4,12 @@ import {
 	memo,
 	type ReactNode,
 } from "react";
-import type { View, ViewProps } from "react-native";
+import type { View } from "react-native";
 import Animated, { type AnimatedRef, runOnUI } from "react-native-reanimated";
 import { logger } from "../../../../../../utils/logger";
 import {
 	isTeleportAvailable,
+	PORTAL_POINTER_EVENTS,
 	NativePortal as TeleportPortal,
 } from "../../../teleport";
 import { usePlaceholderStyles } from "../hooks/use-placeholder-styles";
@@ -31,7 +32,6 @@ type BoundaryPortalSlotProps = {
 	children: ReactNode;
 	enabled: boolean;
 	animatedProps: any;
-	pointerEvents?: ViewProps["pointerEvents"];
 	placeholderRef?: AnimatedRef<View>;
 };
 
@@ -40,7 +40,6 @@ export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
 	children,
 	enabled,
 	animatedProps,
-	pointerEvents,
 	placeholderRef,
 }: BoundaryPortalSlotProps) {
 	const isPortalEnabled = enabled && isTeleportAvailable;
@@ -62,13 +61,13 @@ export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
 					runOnUI(handleOnLayout)(layout)
 				}
 				style={placeholderStyle}
-				pointerEvents={pointerEvents}
+				pointerEvents={PORTAL_POINTER_EVENTS}
 				collapsable={false}
 			>
 				<AnimatedNativePortal
 					animatedProps={animatedProps}
 					name={id}
-					pointerEvents={pointerEvents}
+					pointerEvents={PORTAL_POINTER_EVENTS}
 				>
 					{children}
 				</AnimatedNativePortal>

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

@@ -227,7 +227,11 @@ export const useBoundaryPortalAttachment = ({
 		"worklet";
 
 		const slot = slotsMap.get()[boundaryId];
-		const { teleport, ...slotProps } = slot?.props ?? {};
+		const {
+			pointerEvents: _pointerEvents,
+			teleport,
+			...slotProps
+		} = slot?.props ?? {};
 		const shouldTeleport = shouldAttachBoundaryPortal({
 			enabled,
 			teleport,

package/src/shared/components/boundary/portal/components/boundary-portal/index.tsx

@@ -1,5 +1,5 @@
 import { memo, type ReactNode } from "react";
-import type { View, ViewProps } from "react-native";
+import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import { BoundaryPortalSlot } from "./components/portal-slot";
 import { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
@@ -9,7 +9,6 @@ type BoundaryPortalProps = {
 	children: ReactNode;
 	enabled: boolean;
 	placeholderRef?: AnimatedRef<View>;
-	pointerEvents?: ViewProps["pointerEvents"];
 };
 
 export const BoundaryPortal = memo(function BoundaryPortal({
@@ -17,7 +16,6 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 	children,
 	enabled,
 	placeholderRef,
-	pointerEvents,
 }: BoundaryPortalProps) {
 	const { teleportProps } = useBoundaryPortalAttachment({
 		boundaryId,
@@ -30,7 +28,6 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 			enabled={enabled}
 			animatedProps={teleportProps}
 			placeholderRef={placeholderRef}
-			pointerEvents={pointerEvents}
 		>
 			{children}
 		</BoundaryPortalSlot>

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

@@ -39,6 +39,7 @@ const SafeNativePortalProvider: ComponentType<{ children: ReactNode }> | null =
 
 export const isTeleportAvailable =
 	mod !== null && SafeNativePortalProvider !== null;
+export const PORTAL_POINTER_EVENTS = "box-none" as const;
 export const NativePortal: ComponentType<any> | null = mod?.Portal ?? null;
 export const NativePortalProvider: ComponentType<any> | null =
 	SafeNativePortalProvider;

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

@@ -4,6 +4,7 @@ import {
 	useCallback,
 	useImperativeHandle,
 	useMemo,
+	useRef,
 	useState,
 } from "react";
 import type { View } from "react-native";
@@ -59,6 +60,7 @@ export type BoundaryRootRenderState = {
 	attachedStyle: unknown;
 	boundTag: BoundTag;
 	currentScreenKey: string;
+	handoffEnabled: boolean;
 	portalRuntime: BoundaryPortalRuntime;
 	ref: AnimatedRef<View>;
 	rootEscapePlaceholderRef: AnimatedRef<View>;
@@ -96,7 +98,7 @@ export const {
 		id,
 		style,
 	}) => {
-		const boundTag = useMemo(
+		const requestedBoundTag = useMemo(
 			() => createBoundTag(String(id), group),
 			[id, group],
 		);
@@ -108,6 +110,21 @@ export const {
 		const currentScreenKey = useDescriptorsStore(
 			(s) => s.derivations.currentScreenKey,
 		);
+		const currentActivity = useDescriptorsStore(
+			(s) => s.descriptors.current.activity,
+		);
+		const retainedBoundTagRef = useRef(requestedBoundTag);
+		const shouldRetainClosingBoundTag =
+			portalRuntime.handoff && currentActivity === "closing";
+
+		// Navigation can update a retained closing route's params before that
+		// route leaves the stack. Keep its handoff identity stable so the payload
+		// remains attached to the closing destination instead of being orphaned.
+		if (!shouldRetainClosingBoundTag) {
+			retainedBoundTagRef.current = requestedBoundTag;
+		}
+
+		const boundTag = retainedBoundTagRef.current;
 		const hasConfiguredInterpolator = useDescriptorsStore(
 			(s) => s.derivations.hasConfiguredInterpolator,
 		);
@@ -183,6 +200,7 @@ export const {
 
 		const shouldRenderBoundaryRootThroughPortal =
 			shouldEscapeBoundaryRootToScreenHost && !hasActiveTarget;
+		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
 		// through a screen host, so its associated style is applied through the
@@ -204,19 +222,21 @@ export const {
 				activeTargetRef: targetEntry?.ref ?? null,
 				boundTag,
 				currentScreenKey,
+				handoffEnabled,
 				portalRuntime,
 				registerTargetRef,
 				ref: rootRef,
 				rootEscapePlaceholderRef,
 				shouldRenderBoundaryRootThroughPortal,
-				shouldRenderHandoffHost: enabled && portalRuntime.handoff,
+				shouldRenderHandoffHost: handoffEnabled && !hasActiveTarget,
 				unregisterTargetRef,
 			}),
 			[
 				attachedStyle,
 				boundTag,
 				currentScreenKey,
-				enabled,
+				handoffEnabled,
+				hasActiveTarget,
 				portalRuntime,
 				registerTargetRef,
 				rootRef,

package/src/shared/constants.ts

@@ -53,12 +53,16 @@ const DEFAULT_GESTURE_VALUES = {
 	velocity: 0,
 	focalX: 0,
 	focalY: 0,
+	pinchOriginX: 0,
+	pinchOriginY: 0,
 	raw: DEFAULT_RAW_GESTURE_VALUES,
 	handoff: {
 		...DEFAULT_RAW_GESTURE_VALUES,
 		velocity: 0,
 		focalX: 0,
 		focalY: 0,
+		pinchOriginX: 0,
+		pinchOriginY: 0,
 		raw: DEFAULT_RAW_GESTURE_VALUES,
 		active: null,
 		direction: null,

package/src/shared/index.ts

@@ -63,6 +63,8 @@ export type {
 	BoundsNavigationAccessor,
 	BoundsNavigationRevealOptions,
 	BoundsNavigationRevealStyle,
+	BoundsNavigationZoomAxisResponse,
+	BoundsNavigationZoomDragOptions,
 	BoundsNavigationZoomOpacityRange,
 	BoundsNavigationZoomOpacityRanges,
 	BoundsNavigationZoomOptions,

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/index.ts

@@ -78,6 +78,8 @@ export const hydrateTransitionState = (
 	out.gesture.normScale = s.gesture.normScale.get();
 	out.gesture.focalX = s.gesture.focalX.get();
 	out.gesture.focalY = s.gesture.focalY.get();
+	out.gesture.pinchOriginX = s.gesture.pinchOriginX.get();
+	out.gesture.pinchOriginY = s.gesture.pinchOriginY.get();
 	out.gesture.rotation = s.gesture.rotation.get();
 	out.gesture.raw.x = s.gesture.raw.x.get();
 	out.gesture.raw.y = s.gesture.raw.y.get();
@@ -121,6 +123,12 @@ export const hydrateTransitionState = (
 	handoff.focalY = useHandoffSnapshot
 		? s.gesture.internal.snapshot.focalY.get()
 		: out.gesture.focalY;
+	handoff.pinchOriginX = useHandoffSnapshot
+		? s.gesture.internal.snapshot.pinchOriginX.get()
+		: out.gesture.pinchOriginX;
+	handoff.pinchOriginY = useHandoffSnapshot
+		? s.gesture.internal.snapshot.pinchOriginY.get()
+		: out.gesture.pinchOriginY;
 	handoff.rotation = useHandoffSnapshot
 		? s.gesture.internal.snapshot.rotation.get()
 		: out.gesture.rotation;

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

@@ -6,6 +6,7 @@ import type {
 import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { GestureStore } from "../../../../../stores/gesture.store";
 import { GestureActivationState } from "../../../../../types/gesture.types";
+import type { Direction } from "../../../../../types/ownership.types";
 import { useDescriptorDerivations } from "../../../descriptors";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePanRuntime } from "../../shared/runtime";
@@ -47,6 +48,7 @@ export const usePanActivation = ({
 	const gestureActivationState = useSharedValue<GestureActivationState>(
 		GestureActivationState.PENDING,
 	);
+	const pendingDirection = useSharedValue<Direction | null>(null);
 
 	const onTouchesDown = useCallback(
 		(
@@ -61,6 +63,7 @@ export const usePanActivation = ({
 
 			if (!participation.canTrackGesture) {
 				gestureActivationState.set(GestureActivationState.FAILED);
+				pendingDirection.set(null);
 				stateManager?.fail();
 				return;
 			}
@@ -68,8 +71,15 @@ export const usePanActivation = ({
 			const firstTouch = event.changedTouches[0];
 			initialTouch.set({ x: firstTouch.x, y: firstTouch.y });
 			gestureActivationState.set(GestureActivationState.PENDING);
+			pendingDirection.set(null);
 		},
-		[gestureActivationState, initialTouch, runtime, screenOptions],
+		[
+			gestureActivationState,
+			initialTouch,
+			pendingDirection,
+			runtime,
+			screenOptions,
+		],
 	);
 
 	const onTouchesMove = useCallback(
@@ -110,6 +120,7 @@ export const usePanActivation = ({
 			}
 
 			if (decision.action === "fail") {
+				pendingDirection.set(null);
 				stateManager.fail();
 				return;
 			}
@@ -119,12 +130,9 @@ export const usePanActivation = ({
 			}
 
 			if (decision.direction) {
-				const { gestures } = resolvedRuntime.stores;
-				gestures.active.set(decision.direction);
-				gestures.direction.set(decision.direction);
+				pendingDirection.set(decision.direction);
 			}
 
-			gestureCompositionOwner.set("pan");
 			stateManager.activate();
 		},
 		[
@@ -134,6 +142,7 @@ export const usePanActivation = ({
 			dimensions,
 			gestureActivationState,
 			initialTouch,
+			pendingDirection,
 			runtime,
 			screenOptions,
 			scrollState,
@@ -142,7 +151,7 @@ export const usePanActivation = ({
 	);
 
 	return useMemo(
-		() => ({ onTouchesDown, onTouchesMove }),
-		[onTouchesDown, onTouchesMove],
+		() => ({ onTouchesDown, onTouchesMove, pendingDirection }),
+		[onTouchesDown, onTouchesMove, pendingDirection],
 	);
 };

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

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import { useNavigationHelpers } from "../../../../../hooks/navigation/use-navigation-helpers";
+import type { Direction } from "../../../../../types/ownership.types";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { usePanGestureSensitivity } from "../../hooks/use-gesture-sensitivity";
 import { resolvePanRuntime } from "../../shared/runtime";
@@ -28,6 +29,7 @@ export const usePanBehavior = (
 	screenOptions: ScreenOptionsContextValue,
 	dimensions: GestureDimensions,
 	gestureCompositionOwner: SharedValue<GestureCompositionOwner>,
+	pendingDirection: SharedValue<Direction | null>,
 ): PanBehavior => {
 	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
@@ -38,16 +40,31 @@ export const usePanBehavior = (
 		const latestRuntime = resolvePanRuntime(runtime.get(), screenOptions.get());
 		if (gestureCompositionOwner.get() === "pinch") {
 			clearPanTrackingValues(latestRuntime.stores.gestures);
+			pendingDirection.set(null);
 			resetSensitivity();
 			return;
 		}
 
+		const direction = pendingDirection.get();
+		if (direction) {
+			latestRuntime.stores.gestures.active.set(direction);
+			latestRuntime.stores.gestures.direction.set(direction);
+		}
+		pendingDirection.set(null);
+		gestureCompositionOwner.set("pan");
+
 		if (latestRuntime.participation.effectiveSnapPoints.hasSnapPoints) {
 			primeSnapPanRelease(latestRuntime);
 		}
 		startPanBase(latestRuntime);
 		resetSensitivity();
-	}, [runtime, screenOptions, resetSensitivity, gestureCompositionOwner]);
+	}, [
+		runtime,
+		screenOptions,
+		resetSensitivity,
+		gestureCompositionOwner,
+		pendingDirection,
+	]);
 
 	const onUpdate = useCallback(
 		(rawEvent: PanGestureEvent) => {

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

@@ -50,6 +50,7 @@ export const useBuildPanGesture = ({
 		screenOptions,
 		dimensions,
 		gestureCompositionOwner,
+		activation.pendingDirection,
 	);
 
 	const panGesture = useMemo(() => {

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

@@ -4,10 +4,36 @@ import type {
 	GestureTouchEvent,
 } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
+import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
 import type { GestureCompositionOwner, PinchGestureRuntime } from "../../types";
 
+export const updateAbsolutePinchFocalPoint = (
+	event: GestureTouchEvent,
+	gestures: GestureStoreMap,
+	captureOrigin: boolean,
+) => {
+	"worklet";
+	const firstTouch = event.allTouches[0];
+	const secondTouch = event.allTouches[1];
+
+	if (!firstTouch || !secondTouch) {
+		return;
+	}
+
+	const focalX = (firstTouch.absoluteX + secondTouch.absoluteX) / 2;
+	const focalY = (firstTouch.absoluteY + secondTouch.absoluteY) / 2;
+
+	gestures.focalX.set(focalX);
+	gestures.focalY.set(focalY);
+
+	if (captureOrigin) {
+		gestures.pinchOriginX.set(focalX);
+		gestures.pinchOriginY.set(focalY);
+	}
+};
+
 interface UsePinchActivationProps {
 	runtime: SharedValue<PinchGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
@@ -25,10 +51,11 @@ export const usePinchActivation = ({
 			stateManager: GestureStateManager | undefined,
 		) => {
 			"worklet";
-			const { participation, policy } = resolvePinchRuntime(
+			const latestRuntime = resolvePinchRuntime(
 				runtime.get(),
 				screenOptions.get(),
 			);
+			const { participation, policy } = latestRuntime;
 
 			if (!participation.canTrackGesture || !policy.enabled) {
 				stateManager?.fail();
@@ -36,6 +63,11 @@ export const usePinchActivation = ({
 			}
 
 			if (event.numberOfTouches === 2) {
+				updateAbsolutePinchFocalPoint(
+					event,
+					latestRuntime.stores.gestures,
+					true,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -53,10 +85,11 @@ export const usePinchActivation = ({
 	const onTouchesMove = useCallback(
 		(event: GestureTouchEvent, stateManager: GestureStateManager) => {
 			"worklet";
-			const { participation, policy } = resolvePinchRuntime(
+			const latestRuntime = resolvePinchRuntime(
 				runtime.get(),
 				screenOptions.get(),
 			);
+			const { participation, policy } = latestRuntime;
 
 			if (!participation.canTrackGesture || !policy.enabled) {
 				stateManager.fail();
@@ -64,6 +97,11 @@ export const usePinchActivation = ({
 			}
 
 			if (event.numberOfTouches === 2) {
+				updateAbsolutePinchFocalPoint(
+					event,
+					latestRuntime.stores.gestures,
+					false,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}

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

@@ -13,10 +13,7 @@ import type {
 } from "../../types";
 import { resetPinchGestureValues } from "./pinch-reset";
 
-export const startPinchBase = (
-	runtime: PinchGestureRuntime,
-	event: PinchGestureEvent,
-) => {
+export const startPinchBase = (runtime: PinchGestureRuntime) => {
 	"worklet";
 	const {
 		stores: { gestures, animations },
@@ -38,8 +35,6 @@ export const startPinchBase = (
 	gestures.direction.set(null);
 	gestures.velocity.set(0);
 	clearTransformTrackingValues(gestures);
-	gestures.focalX.set(event.focalX);
-	gestures.focalY.set(event.focalY);
 	gestures.internal.progressBaseline.set(animations.transitionProgress.get());
 };
 
@@ -56,13 +51,14 @@ export const trackPinchGesture = (
 
 	gestures.scale.set(scale);
 	gestures.normScale.set(normScale);
-	gestures.focalX.set(event.focalX);
-	gestures.focalY.set(event.focalY);
 	gestures.raw.scale.set(rawScale);
 	gestures.raw.normScale.set(rawNormScale);
-	gestures.active.set(
-		normScale < 0 ? "pinch-in" : normScale > 0 ? "pinch-out" : null,
-	);
+
+	if (gestures.active.get() === null) {
+		gestures.active.set(
+			normScale < 0 ? "pinch-in" : normScale > 0 ? "pinch-out" : null,
+		);
+	}
 
 	return {
 		scale,