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

package/src/shared/configs/specs.ts

@@ -1,4 +1,5 @@
 import type { WithSpringConfig } from "react-native-reanimated";
+import type { TransitionSpec } from "../types/animation.types";
 
 export const DefaultSpec: WithSpringConfig = {
 	stiffness: 1000,
@@ -22,3 +23,25 @@ export const FlingSpec: WithSpringConfig = {
 	overshootClamping: false,
 	energyThreshold: 6e-9,
 };
+
+/**
+ * Paired spring configuration tuned for navigation zoom transitions.
+ */
+export const Zoom = {
+	open: {
+		stiffness: 1000,
+		damping: 500,
+		mass: 3,
+		overshootClamping: false,
+		// @ts-expect-error Reanimated v3 spring config support.
+		restSpeedThreshold: 0.02,
+	},
+	close: {
+		stiffness: 1100,
+		damping: 98,
+		mass: 3,
+		overshootClamping: false,
+		// @ts-expect-error Reanimated v3 spring config support.
+		restSpeedThreshold: 0.02,
+	},
+} satisfies TransitionSpec;

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,

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

@@ -30,21 +30,18 @@ export const usePinchBehavior = (
 	const { withSensitivity, resetSensitivity } =
 		usePinchGestureSensitivity(screenOptions);
 
-	const onStart = useCallback(
-		(event: PinchGestureEvent) => {
-			"worklet";
-			const latestRuntime = resolvePinchRuntime(
-				runtime.get(),
-				screenOptions.get(),
-			);
-			if (latestRuntime.participation.effectiveSnapPoints.hasSnapPoints) {
-				primeSnapPinchRelease(latestRuntime);
-			}
-			startPinchBase(latestRuntime, event);
-			resetSensitivity();
-		},
-		[runtime, screenOptions, resetSensitivity],
-	);
+	const onStart = useCallback(() => {
+		"worklet";
+		const latestRuntime = resolvePinchRuntime(
+			runtime.get(),
+			screenOptions.get(),
+		);
+		if (latestRuntime.participation.effectiveSnapPoints.hasSnapPoints) {
+			primeSnapPinchRelease(latestRuntime);
+		}
+		startPinchBase(latestRuntime);
+		resetSensitivity();
+	}, [runtime, screenOptions, resetSensitivity]);
 
 	const onUpdate = useCallback(
 		(rawEvent: PinchGestureEvent) => {

package/src/shared/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -214,7 +214,12 @@ export const useScrollGestureCoordination = (
 		}
 
 		for (const pinchGesture of pinchGestures) {
-			gesture = gesture.requireExternalGestureToFail({
+			// A pinch must remain possible after the first finger lands. Making
+			// native scrolling wait for it to fail therefore stalls ordinary
+			// one-finger scrolling until touch-up. Let both recognizers run:
+			// the ScrollView can begin immediately, while a second finger can
+			// still promote the screen gesture to a pinch.
+			gesture = gesture.simultaneousWithExternalGesture({
 				current: pinchGesture as unknown as GestureType,
 			});
 		}

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

@@ -20,6 +20,8 @@ export const snapshotGestureHandoff = (
 	snapshot.normScale.set(gestures.normScale.get());
 	snapshot.focalX.set(gestures.focalX.get());
 	snapshot.focalY.set(gestures.focalY.get());
+	snapshot.pinchOriginX.set(gestures.pinchOriginX.get());
+	snapshot.pinchOriginY.set(gestures.pinchOriginY.get());
 	snapshot.rotation.set(gestures.rotation.get());
 	snapshot.raw.x.set(gestures.raw.x.get());
 	snapshot.raw.y.set(gestures.raw.y.get());

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

@@ -34,6 +34,8 @@ export const clearFocalPoint = (gestures: GestureStoreMap) => {
 	"worklet";
 	gestures.focalX.set(0);
 	gestures.focalY.set(0);
+	gestures.pinchOriginX.set(0);
+	gestures.pinchOriginY.set(0);
 };
 
 export const clearRawTransformValues = (gestures: GestureStoreMap) => {

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

@@ -14,7 +14,7 @@ import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const { height } = useWindowDimensions();
 	const { currentScreenKey } = useDescriptorDerivations();
-	const { entering, transitionProgress } =
+	const { closing, entering, progressAnimating, transitionProgress } =
 		AnimationStore.getBag(currentScreenKey);
 	const { pendingLifecycleStartBlockCount, pendingLifecycleRequestKind } =
 		SystemStore.getBag(currentScreenKey);
@@ -49,6 +49,19 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const animatedStyle = useAnimatedStyle(() => {
 		"worklet";
 		const offset = getVisibilityBlockOffset(height);
+		// Keep opacity out of normal rendering so effects such as Liquid Glass
+		// retain native compositing. Once closing has fully finished, hiding the
+		// outgoing screen lets the handoff settle before React removes its host.
+		const shouldHideClosedScreen =
+			closing.get() === 1 &&
+			transitionProgress.get() <= 0 &&
+			progressAnimating.get() === 0;
+
+		if (shouldHideClosedScreen) {
+			return {
+				opacity: 0,
+			};
+		}
 
 		return {
 			transform: [

package/src/shared/stores/gesture.store.ts

@@ -29,6 +29,8 @@ type GestureSnapshotStoreMap = {
 	normScale: SharedValue<number>;
 	focalX: SharedValue<number>;
 	focalY: SharedValue<number>;
+	pinchOriginX: SharedValue<number>;
+	pinchOriginY: SharedValue<number>;
 	rotation: SharedValue<number>;
 	raw: GestureRawStoreMap;
 	active: SharedValue<ActiveGesture | null>;
@@ -53,6 +55,8 @@ export type GestureStoreMap = {
 	normScale: SharedValue<number>;
 	focalX: SharedValue<number>;
 	focalY: SharedValue<number>;
+	pinchOriginX: SharedValue<number>;
+	pinchOriginY: SharedValue<number>;
 	rotation: SharedValue<number>;
 	raw: GestureRawStoreMap;
 	internal: GestureInternalStoreMap;
@@ -105,6 +109,8 @@ function createGestureBag(): GestureStoreMap {
 		normScale,
 		focalX: makeMutable(0),
 		focalY: makeMutable(0),
+		pinchOriginX: makeMutable(0),
+		pinchOriginY: makeMutable(0),
 		rotation: makeMutable(0),
 		raw: {
 			x: makeMutable(0),
@@ -130,6 +136,8 @@ function createGestureBag(): GestureStoreMap {
 				normScale: makeMutable(0),
 				focalX: makeMutable(0),
 				focalY: makeMutable(0),
+				pinchOriginX: makeMutable(0),
+				pinchOriginY: makeMutable(0),
 				rotation: makeMutable(0),
 				raw: {
 					x: makeMutable(0),
@@ -177,6 +185,8 @@ export const GestureStore = createStore<GestureStoreMap>({
 		cancelAnimation(bag.normScale);
 		cancelAnimation(bag.focalX);
 		cancelAnimation(bag.focalY);
+		cancelAnimation(bag.pinchOriginX);
+		cancelAnimation(bag.pinchOriginY);
 		cancelAnimation(bag.rotation);
 		cancelAnimation(bag.raw.x);
 		cancelAnimation(bag.raw.y);
@@ -198,6 +208,8 @@ export const GestureStore = createStore<GestureStoreMap>({
 		cancelAnimation(bag.internal.snapshot.normScale);
 		cancelAnimation(bag.internal.snapshot.focalX);
 		cancelAnimation(bag.internal.snapshot.focalY);
+		cancelAnimation(bag.internal.snapshot.pinchOriginX);
+		cancelAnimation(bag.internal.snapshot.pinchOriginY);
 		cancelAnimation(bag.internal.snapshot.rotation);
 		cancelAnimation(bag.internal.snapshot.raw.x);
 		cancelAnimation(bag.internal.snapshot.raw.y);