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

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);

package/src/shared/types/bounds.types.ts

@@ -1,4 +1,4 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
+import type { ColorValue } from "react-native";
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
@@ -31,78 +31,142 @@ export type { BoundsLink, BoundsLinkStatus } from "../stores/bounds/types";
  */
 export type BoundsMethod = "transform" | "size" | "content";
 
+/**
+ * Axis-specific response intensity used by {@linkcode BoundsNavigationZoomDragOptions}.
+ *
+ * `0` disables the response on an axis, `1` preserves the native zoom preset,
+ * and values above `1` exaggerate it.
+ */
+export type BoundsNavigationZoomAxisResponse = {
+	/** Horizontal gesture response multiplier. @default 1 */
+	horizontal?: number;
+	/** Vertical gesture response multiplier. @default 1 */
+	vertical?: number;
+};
+
+/**
+ * Adjusts the intensity of zoom's native drag behavior without replacing its
+ * built-in curves.
+ *
+ * @see {@linkcode BoundsNavigationZoomOptions.drag}
+ */
+export type BoundsNavigationZoomDragOptions = {
+	/**
+	 * Multiplies the native rendered translation.
+	 *
+	 * @default { horizontal: 1, vertical: 1 }
+	 */
+	translation?: BoundsNavigationZoomAxisResponse;
+	/**
+	 * Multiplies the native scale displacement from `1`.
+	 *
+	 * @default { horizontal: 1, vertical: 1 }
+	 */
+	scale?: BoundsNavigationZoomAxisResponse;
+};
+
+/**
+ * Legacy zoom opacity interpolation tuple.
+ *
+ * @deprecated Zoom opacity ownership now follows the native preset.
+ */
+export type BoundsNavigationZoomOpacityRange = readonly [
+	inputStart: number,
+	inputEnd: number,
+	outputStart?: number,
+	outputEnd?: number,
+];
+
+/**
+ * Legacy opening and closing zoom opacity ranges.
+ *
+ * @deprecated Zoom opacity ownership now follows the native preset.
+ */
+export type BoundsNavigationZoomOpacityRanges = {
+	open?: BoundsNavigationZoomOpacityRange;
+	close?: BoundsNavigationZoomOpacityRange;
+};
+
 export type BoundsNavigationZoomOptions = {
-	target?: "bound" | "fullscreen" | MeasuredDimensions;
-	debug?: boolean;
-	borderRadius?: number;
 	/**
-	 * Focused-screen element opacity curve.
+	 * Geometry that the zoomed content should resolve against.
 	 *
-	 * `open` is used while presenting the destination screen.
-	 * `close` is used while returning to the source screen.
+	 * `"bound"` uses the paired destination boundary. `"fullscreen"` uses the
+	 * screen, and measured dimensions provide an explicit target rectangle.
+	 * When omitted, zoom keeps its native full-width aspect-ratio target.
+	 */
+	target?: BoundsComputeOptions["target"];
+	/**
+	 * Keeps the focused screen content visible throughout the zoom.
+	 *
+	 * Enable this for handed-off or live content that should not use zoom's
+	 * built-in focused-content opacity fade.
 	 *
-	 * Tuple order:
-	 * - `inputStart`: transition progress start
-	 * - `inputEnd`: transition progress end
-	 * - `outputStart`: opacity at `inputStart` (defaults to built-in preset)
-	 * - `outputEnd`: opacity at `inputEnd` (defaults to built-in preset)
+	 * @default false
 	 */
-	focusedElementOpacity?: BoundsNavigationZoomOpacityRanges;
+	keepFocusedVisible?: boolean;
 	/**
-	 * Unfocused-screen matched element opacity curve.
+	 * Expanded transition clipping radius.
 	 *
-	 * `open` is used while the previous screen animates out during present.
-	 * `close` is used while the previous screen animates back in during dismiss.
+	 * Zoom interpolates from the measured source radius to this value while the
+	 * screen is animating. This controls the visible clipping result regardless
+	 * of whether a navigation mask is enabled.
 	 *
-	 * Tuple order:
-	 * - `inputStart`: transition progress start
-	 * - `inputEnd`: transition progress end
-	 * - `outputStart`: opacity at `inputStart` (defaults to built-in preset)
-	 * - `outputEnd`: opacity at `inputEnd` (defaults to built-in preset)
+	 * @default 64
 	 */
-	unfocusedElementOpacity?: BoundsNavigationZoomOpacityRanges;
+	borderRadius?: number;
 	/**
-	 * Scale applied to the unfocused background content while the focused bound
-	 * animates above it.
+	 * Scale applied to the unfocused screen while the zoom runs above it.
+	 *
+	 * @default 0.9375
 	 */
 	backgroundScale?: number;
 	/**
-	 * Maximum dynamic gesture sensitivity applied by zoom.
-	 *
-	 * Zoom lowers gesture sensitivity as the drag gets deeper so the content
-	 * handoff stays stable. This value controls the starting/highest sensitivity
-	 * in that curve.
+	 * Color rendered behind the focused zoom content.
 	 *
-	 * @default 0.8
+	 * @default "black"
 	 */
-	maxSensitivity?: number;
+	backdropColor?: ColorValue;
 	/**
-	 * Velocity-driven depth applied to the dismiss scale handoff.
+	 * Maximum opacity reached by the zoom backdrop.
 	 *
-	 * Higher values make fast releases orbit farther around the final scale. Set
-	 * to `0` to remove the velocity depth effect.
+	 * Values are clamped between `0` and `1`.
 	 *
-	 * @default 0.5
+	 * @default 0.45
+	 */
+	backdropOpacity?: number;
+	/**
+	 * Native drag-response intensity controls.
+	 */
+	drag?: BoundsNavigationZoomDragOptions;
+	/**
+	 * @deprecated Ignored. Zoom no longer exposes a transition-specific debug
+	 * overlay.
+	 */
+	debug?: boolean;
+	/**
+	 * @deprecated Ignored. Zoom opacity ownership now follows the native preset.
+	 */
+	focusedElementOpacity?: BoundsNavigationZoomOpacityRanges;
+	/**
+	 * @deprecated Ignored. Zoom opacity ownership now follows the native preset.
+	 */
+	unfocusedElementOpacity?: BoundsNavigationZoomOpacityRanges;
+	/**
+	 * @deprecated Ignored. Zoom now owns its gesture sensitivity curve.
+	 */
+	maxSensitivity?: number;
+	/**
+	 * @deprecated Ignored. Zoom now owns its velocity-depth behavior.
 	 */
 	velocityDepth?: number;
 	/**
-	 * Deprecated compatibility option.
-	 *
-	 * Gesture movement now always contributes to `progress`; use `transitionProgress`
-	 * when a recipe needs transition progress without live gesture contribution.
-	 * The zoom helper no longer reads this option.
-	 *
-	 * @deprecated Use `transitionProgress` from interpolation state instead.
+	 * @deprecated Ignored. Gesture movement always contributes to `progress`.
 	 */
 	gestureProgressMode?: GestureProgressMode;
 	/**
-	 * Horizontal gesture drag scaling curve, applied when the active dismiss
-	 * direction is horizontal.
-	 *
-	 * Tuple order:
-	 * - `shrinkMin`: minimum scale when dragging toward dismissal
-	 * - `growMax`: maximum scale when dragging opposite dismissal
-	 * - `exponent`: curve exponent controlling how quickly scaling ramps
+	 * @deprecated Ignored. Use `drag.scale.horizontal` to adjust response
+	 * intensity without replacing the native curve.
 	 */
 	horizontalDragScale?: readonly [
 		shrinkMin: number,
@@ -110,13 +174,8 @@ export type BoundsNavigationZoomOptions = {
 		exponent?: number,
 	];
 	/**
-	 * Vertical gesture drag scaling curve, applied when the active dismiss
-	 * direction is vertical.
-	 *
-	 * Tuple order:
-	 * - `shrinkMin`: minimum scale when dragging toward dismissal
-	 * - `growMax`: maximum scale when dragging opposite dismissal
-	 * - `exponent`: curve exponent controlling how quickly scaling ramps
+	 * @deprecated Ignored. Use `drag.scale.vertical` to adjust response intensity
+	 * without replacing the native curve.
 	 */
 	verticalDragScale?: readonly [
 		shrinkMin: number,
@@ -124,17 +183,8 @@ export type BoundsNavigationZoomOptions = {
 		exponent?: number,
 	];
 	/**
-	 * Horizontal gesture drag translation curve.
-	 *
-	 * Tuple order:
-	 * - `negativeMax`: multiplier when dragging left / negative
-	 * - `positiveMax`: multiplier when dragging right / positive
-	 * - `exponent`: curve exponent controlling how quickly translation ramps
-	 *
-	 * Examples:
-	 * - `[0, 0]` disables horizontal drag translation
-	 * - `[0.5, 0.5]` halves horizontal drag travel
-	 * - `[1.2, 1.2]` amplifies horizontal drag travel
+	 * @deprecated Ignored. Use `drag.translation.horizontal` to adjust response
+	 * intensity without replacing the native curve.
 	 */
 	horizontalDragTranslation?: readonly [
 		negativeMax: number,
@@ -142,17 +192,8 @@ export type BoundsNavigationZoomOptions = {
 		exponent?: number,
 	];
 	/**
-	 * Vertical gesture drag translation curve.
-	 *
-	 * Tuple order:
-	 * - `negativeMax`: multiplier when dragging up / negative
-	 * - `positiveMax`: multiplier when dragging down / positive
-	 * - `exponent`: curve exponent controlling how quickly translation ramps
-	 *
-	 * Examples:
-	 * - `[0, 0]` disables vertical drag translation
-	 * - `[0.5, 0.5]` halves vertical drag travel
-	 * - `[1.2, 1.2]` amplifies vertical drag travel
+	 * @deprecated Ignored. Use `drag.translation.vertical` to adjust response
+	 * intensity without replacing the native curve.
 	 */
 	verticalDragTranslation?: readonly [
 		negativeMax: number,
@@ -161,18 +202,6 @@ export type BoundsNavigationZoomOptions = {
 	];
 };
 
-export type BoundsNavigationZoomOpacityRange = readonly [
-	inputStart: number,
-	inputEnd: number,
-	outputStart?: number,
-	outputEnd?: number,
-];
-
-export type BoundsNavigationZoomOpacityRanges = {
-	open?: BoundsNavigationZoomOpacityRange;
-	close?: BoundsNavigationZoomOpacityRange;
-};
-
 export type BoundsNavigationZoomStyle = TransitionInterpolatedStyle & {
 	content?: TransitionSlotStyle;
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]?: TransitionSlotStyle;

package/src/shared/types/gesture.types.ts

@@ -150,6 +150,8 @@ export type GestureHandoffValues = {
 	normScale: number;
 	focalX: number;
 	focalY: number;
+	pinchOriginX: number;
+	pinchOriginY: number;
 	rotation: number;
 	raw: RawGestureValues;
 	/**
@@ -202,6 +204,14 @@ export type GestureValues = {
 	 * The live pinch focal point y-position in screen coordinates.
 	 */
 	focalY: number;
+	/**
+	 * The pinch focal point x-position captured when the gesture activated.
+	 */
+	pinchOriginX: number;
+	/**
+	 * The pinch focal point y-position captured when the gesture activated.
+	 */
+	pinchOriginY: number;
 	/**
 	 * The live two-finger rotation in radians.
 	 */

package/src/shared/types/index.ts

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

package/src/shared/utils/animation/animate-to-progress.ts

@@ -113,14 +113,30 @@ export const animateToProgress = ({
 					entering.set(FALSE);
 				}
 
-				if (onAnimationFinish) {
-					runOnJS(onAnimationFinish)(state.finished);
-				}
-
-				// Delay clearing progress animation by one frame to ensure final frame is painted
-				requestAnimationFrame(() => {
+				if (isClosing) {
 					progressAnimating.set(FALSE);
-				});
+
+					if (onAnimationFinish) {
+						// Paint the terminal UI-thread host/style state before React
+						// removes the closing route and its native portal host.
+						requestAnimationFrame(() => {
+							"worklet";
+							requestAnimationFrame(() => {
+								"worklet";
+								runOnJS(onAnimationFinish)(state.finished);
+							});
+						});
+					}
+				} else {
+					if (onAnimationFinish) {
+						runOnJS(onAnimationFinish)(state.finished);
+					}
+
+					// Delay clearing progress animation by one frame to ensure final frame is painted
+					requestAnimationFrame(() => {
+						progressAnimating.set(FALSE);
+					});
+				}
 			}),
 		);
 	};

package/src/shared/utils/bounds/navigation/reveal/math.ts

@@ -141,7 +141,8 @@ export function resolveDismissScaleHandoff({
 	"worklet";
 
 	const closeProgress = 1 - progress;
-	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
+	const easeIn = 1 - Math.cos((Math.PI / 2) * closeProgress);
+	const scaleProgress = easeIn ** 2;
 	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
 
 	const orbitDepth = velocityDepth * velocity;