react-native-screen-transitions 3.7.0 → 3.8.0-alpha.0

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

@@ -6,7 +6,7 @@ import {
 } from "../../../../../constants";
 import type { ScreenTransitionOptions } from "../../../../../types/animation.types";
 import type {
-	GestureDirection,
+	GestureDirectionOption,
 	GestureValues,
 } from "../../../../../types/gesture.types";
 import { resolveGestureProgressModeFromOptions } from "../../../../../utils/gesture-progress-mode";
@@ -23,7 +23,7 @@ import type { SnapBounds } from "./types";
 const resolvePanGestureDrivenProgress = (
 	baseProgress: number,
 	gesture: GestureValues,
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
 ) => {
@@ -77,7 +77,7 @@ const resolvePanGestureDrivenProgress = (
 const resolvePinchGestureDrivenProgress = (
 	baseProgress: number,
 	gesture: GestureValues,
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
 ) => {

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

@@ -1,19 +1,10 @@
-import {
-	EPSILON,
-	LOGICAL_SETTLE_PROGRESS_THRESHOLD,
-	LOGICAL_SETTLE_REQUIRED_FRAMES,
-} from "../../../../../constants";
+import { EPSILON } from "../../../../../constants";
 import type {
 	ScreenTransitionOptions,
 	TransitionInterpolatorOptions,
 } from "../../../../../types/animation.types";
 import type { Layout } from "../../../../../types/screen.types";
 import { resolveGestureDrivenProgress } from "./gesture-progress";
-import {
-	computeLogicallySettled,
-	computeNextLogicalSettleFrameCount,
-	computeSettled,
-} from "./settle";
 import {
 	computeAnimatedSnapIndex,
 	computeTargetSnapIndex,
@@ -21,9 +12,6 @@ import {
 } from "./snap-points";
 import type { BuiltState } from "./types";
 
-const LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD =
-	LOGICAL_SETTLE_PROGRESS_THRESHOLD * 10;
-
 const mergeTransitionOptions = (
 	base: ScreenTransitionOptions,
 	effective: TransitionInterpolatorOptions | undefined,
@@ -89,12 +77,14 @@ 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.rotation = s.gesture.rotation.get();
 	out.gesture.raw.x = s.gesture.raw.x.get();
 	out.gesture.raw.y = s.gesture.raw.y.get();
 	out.gesture.raw.normX = s.gesture.raw.normX.get();
 	out.gesture.raw.normY = s.gesture.raw.normY.get();
 	out.gesture.raw.scale = s.gesture.raw.scale.get();
 	out.gesture.raw.normScale = s.gesture.raw.normScale.get();
+	out.gesture.raw.rotation = s.gesture.raw.rotation.get();
 	out.gesture.dismissing = s.gesture.dismissing.get();
 	out.gesture.dragging = s.gesture.dragging.get();
 	out.gesture.settling = s.gesture.settling.get();
@@ -121,7 +111,8 @@ export const hydrateTransitionState = (
 	const hasResidualGestureValues =
 		Math.abs(out.gesture.normX) > EPSILON ||
 		Math.abs(out.gesture.normY) > EPSILON ||
-		Math.abs(out.gesture.normScale) > EPSILON;
+		Math.abs(out.gesture.normScale) > EPSILON ||
+		Math.abs(out.gesture.rotation) > EPSILON;
 
 	const isGestureActive =
 		out.gesture.dragging ||
@@ -139,43 +130,8 @@ export const hydrateTransitionState = (
 	out.gesture.isDismissing = out.gesture.dismissing;
 	out.gesture.isDragging = out.gesture.dragging;
 
-	out.settled = computeSettled(
-		out.animating,
-		out.gesture.dismissing,
-		out.closing,
-	);
-	const targetProgress = s.targetProgress.get();
-	const logicalSettleFrameCount = s.logicalSettleFrameCount.get();
-	const nextLogicalSettleFrameCount = computeNextLogicalSettleFrameCount({
-		progress: out.progress,
-		targetProgress,
-		frameCount: logicalSettleFrameCount,
-	});
-
-	if (nextLogicalSettleFrameCount !== logicalSettleFrameCount) {
-		s.logicalSettleFrameCount.set(nextLogicalSettleFrameCount);
-	}
-
-	const progressDistanceFromTarget = Math.abs(out.progress - targetProgress);
-	const computedLogicallySettled =
-		computeLogicallySettled({
-			progress: out.progress,
-			targetProgress,
-			frameCount: nextLogicalSettleFrameCount,
-		}) && !isGestureActive;
-
-	const wasLogicallySettled =
-		out.logicallySettled &&
-		logicalSettleFrameCount >= LOGICAL_SETTLE_REQUIRED_FRAMES;
-
-	const shouldPreserveLogicalSettle =
-		wasLogicallySettled &&
-		!isProgressAnimating &&
-		!isGestureActive &&
-		progressDistanceFromTarget <= LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD;
-
-	out.logicallySettled =
-		computedLogicallySettled || shouldPreserveLogicalSettle ? 1 : 0;
+	out.settled = s.progressSettled.get() && !isGestureActive ? 1 : 0;
+	out.logicallySettled = out.settled;
 
 	out.meta = s.meta;
 	out.options = options;
@@ -203,6 +159,8 @@ export const hydrateTransitionState = (
 		resolvedAutoSnap,
 	);
 
+	const targetProgress = s.targetProgress.get();
+
 	out.snapIndex = computeTargetSnapIndex(
 		targetProgress,
 		s.sortedNumericSnapPoints,

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

@@ -13,6 +13,7 @@ export type BuiltState = {
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
+	progressSettled: SharedValue<number>;
 	entering: SharedValue<number>;
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
@@ -20,7 +21,6 @@ export type BuiltState = {
 	options: ScreenTransitionOptions;
 	optionsSlot: ScreenTransitionOptions;
 	targetProgress: SharedValue<number>;
-	logicalSettleFrameCount: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
 	contentLayoutSlot: Layout;
@@ -29,12 +29,6 @@ export type BuiltState = {
 	unwrapped: ScreenTransitionState;
 };
 
-export type ComputeLogicallySettledParams = {
-	progress: number;
-	targetProgress: number;
-	frameCount: number;
-};
-
 export type SnapBounds = {
 	min: number;
 	max: number;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -151,7 +151,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 				nextRouteKey,
 				frame.next?.progress,
 			);
-			frame.logicallySettled = frame.active.logicallySettled;
+			frame.logicallySettled = frame.active.settled;
 
 			return frame;
 		}, false);

package/src/shared/providers/screen/animation/helpers/selected-interpolator-options.ts

@@ -1,5 +1,6 @@
 import type { SharedValue } from "react-native-reanimated";
 import type { TransitionInterpolatorOptions } from "../../../../types/animation.types";
+import type { GestureDirectionEntry } from "../../../../types/gesture.types";
 
 export type SelectedInterpolatorOwner = "current" | "next";
 
@@ -8,17 +9,39 @@ export type SelectedInterpolatorOptions = {
 	options?: TransitionInterpolatorOptions;
 };
 
+const areGestureDirectionEntriesEqual = (
+	left: GestureDirectionEntry,
+	right: GestureDirectionEntry,
+) => {
+	"worklet";
+	if (left === right) return true;
+
+	if (typeof left === "string" || typeof right === "string") {
+		return false;
+	}
+
+	return left.gesture === right.gesture && left.area === right.area;
+};
+
 const areGestureDirectionsEqual = (
 	left: TransitionInterpolatorOptions["gestureDirection"],
 	right: TransitionInterpolatorOptions["gestureDirection"],
 ) => {
 	"worklet";
 	if (left === right) return true;
+	if (!left || !right) return false;
+	if (
+		!Array.isArray(left) &&
+		!Array.isArray(right) &&
+		areGestureDirectionEntriesEqual(left, right)
+	) {
+		return true;
+	}
 	if (!Array.isArray(left) || !Array.isArray(right)) return false;
 	if (left.length !== right.length) return false;
 
 	for (let i = 0; i < left.length; i++) {
-		if (left[i] !== right[i]) {
+		if (!areGestureDirectionEntriesEqual(left[i], right[i])) {
 			return false;
 		}
 	}

package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -23,6 +23,7 @@ type BuiltState = {
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
+	progressSettled: SharedValue<number>;
 	entering: SharedValue<number>;
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
@@ -30,7 +31,6 @@ type BuiltState = {
 	options: ScreenTransitionOptions;
 	optionsSlot: ScreenTransitionOptions;
 	targetProgress: SharedValue<number>;
-	logicalSettleFrameCount: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
 	contentLayoutSlot: Layout;
@@ -68,11 +68,8 @@ export const useBuildTransitionState = (
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),
 			progressAnimating: AnimationStore.getValue(key, "progressAnimating"),
+			progressSettled: AnimationStore.getValue(key, "progressSettled"),
 			targetProgress: SystemStore.getValue(key, "targetProgress"),
-			logicalSettleFrameCount: SystemStore.getValue(
-				key,
-				"logicalSettleFrameCount",
-			),
 			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
 			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
 			contentLayoutSlot: { width: 0, height: 0 },

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

@@ -6,10 +6,12 @@ import createProvider from "../../../utils/create-provider";
 import { useDescriptorDerivations } from "../descriptors";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
 import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
-import { useBuildPanGesture } from "./pan/build-pan-gesture";
-import { useBuildPinchGesture } from "./pinch/build-pinch-gesture";
+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 GestureCompositionActivation,
 	type GestureContextType,
 	NO_DIRECTION_CLAIMS,
 } from "./types";
@@ -36,19 +38,32 @@ export const {
 	const childDirectionClaims =
 		useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
 
+	// Pinch gestures should be simultaneous with pan gestures, but pan gestures should not be simultaneous with pinch gestures.
+	// Since we're using manual gestures, if pinch tries to become activated while pan is already active,
+	// the pinch gesture will be cancelled and the pan gesture will continue to be active.
+	const gestureCompositionActivation =
+		useSharedValue<GestureCompositionActivation>(null);
+
 	const panGesture = useBuildPanGesture({
 		scrollState,
 		gestureConfig,
 		childDirectionClaims,
+		gestureCompositionActivation,
 	});
 
 	const pinchGesture = useBuildPinchGesture({
 		gestureConfig,
+		gestureCompositionActivation,
+	});
+
+	const rotationGesture = useBuildRotationGesture({
+		gestureConfig,
+		gestureCompositionActivation,
 	});
 
 	const detectorGesture = useMemo(
-		() => Gesture.Race(panGesture, pinchGesture),
-		[panGesture, pinchGesture],
+		() => Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
+		[panGesture, pinchGesture, rotationGesture],
 	);
 
 	const value = useMemo<GestureContextType>(
@@ -57,6 +72,7 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
+			rotationGesture,
 			scrollState,
 			gestureContext,
 			claimedDirections: gestureConfig.participation.claimedDirections,
@@ -67,6 +83,7 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
+			rotationGesture,
 			scrollState,
 			gestureContext,
 			gestureConfig.participation.claimedDirections,

package/src/shared/providers/screen/gestures/ownership/compute-claimed-directions.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_GESTURE_DIRECTION } from "../../../../constants";
 import type {
-	GestureDirection,
+	GestureDirectionOption,
 	PanGestureDirection,
 } from "../../../../types/gesture.types";
 import {
@@ -8,6 +8,7 @@ import {
 	type Direction,
 	NO_CLAIMS,
 } from "../../../../types/ownership.types";
+import { getPanGestureDirections } from "../shared/directions";
 
 const createClaimSet = (): ClaimedDirections => ({
 	vertical: false,
@@ -17,14 +18,10 @@ const createClaimSet = (): ClaimedDirections => ({
 });
 
 const normalizePanGestureDirections = (
-	gestureDirection: GestureDirection | GestureDirection[] | undefined,
-): PanGestureDirection[] => {
+	gestureDirection: GestureDirectionOption | undefined,
+) => {
 	const direction = gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
-
-	return (Array.isArray(direction) ? direction : [direction]).filter(
-		(dir): dir is PanGestureDirection =>
-			dir !== "pinch-in" && dir !== "pinch-out",
-	);
+	return getPanGestureDirections(direction);
 };
 
 const claimPanDirection = (
@@ -74,7 +71,7 @@ const expandSnapPointAxisClaims = (claims: ClaimedDirections) => {
  */
 export function computeClaimedDirections(
 	canClaimDirections: boolean,
-	gestureDirection: GestureDirection | GestureDirection[] | undefined,
+	gestureDirection: GestureDirectionOption | undefined,
 	hasSnapPoints: boolean,
 ): ClaimedDirections {
 	if (!canClaimDirections) {

package/src/shared/providers/screen/gestures/pan/{pan-activation-decision.ts → activation/pan-activation-decision.ts}

@@ -1,18 +1,18 @@
 import type { GestureTouchEvent } from "react-native-gesture-handler";
-import { EPSILON } from "../../../../constants";
+import { EPSILON } from "../../../../../constants";
 import {
 	GestureActivationState,
 	type ScrollGestureState,
-} from "../../../../types/gesture.types";
-import type { Direction } from "../../../../types/ownership.types";
-import { shouldDeferToChildClaim } from "../ownership/resolve-ownership";
-import { getPanSnapAxisConfigForDirection } from "../shared/directions";
-import { resolveRuntimeSnapPoints } from "../shared/snap-points";
+} from "../../../../../types/gesture.types";
+import type { Direction } from "../../../../../types/ownership.types";
+import { shouldDeferToChildClaim } from "../../ownership/resolve-ownership";
+import { getPanSnapAxisConfigForDirection } from "../../shared/directions";
+import { resolveRuntimeSnapPoints } from "../../shared/snap-points";
 import type {
 	DirectionClaimMap,
 	GestureDimensions,
 	PanGestureRuntime,
-} from "../types";
+} from "../../types";
 import {
 	checkScrollBoundary,
 	resolveOffsetRules,

package/src/shared/providers/screen/gestures/pan/{pan-activation-rules.ts → activation/pan-activation-rules.ts}

@@ -1,29 +1,28 @@
-import type { GestureDirections } from "../../../../types/gesture.types";
+import type { GestureDirections } from "../../../../../types/gesture.types";
 import {
-	type ActivationArea,
-	type GestureActivationArea,
 	GestureActivationState,
-	type SideActivation,
-} from "../../../../types/gesture.types";
-import type { Direction } from "../../../../types/ownership.types";
-import type { Layout } from "../../../../types/screen.types";
-import type { ScrollGestureState } from "../types";
+	type GestureDirectionActivationArea,
+	type ResolvedGestureActivationArea,
+} from "../../../../../types/gesture.types";
+import type { Direction } from "../../../../../types/ownership.types";
+import type { Layout } from "../../../../../types/screen.types";
+import type { ScrollGestureState } from "../../types";
 
 interface ResolveOffsetRulesProps {
 	initialTouch: { x: number; y: number };
 	touch: { x: number; y: number };
 	directions: GestureDirections;
 	activationState: GestureActivationState;
-	activationArea?: GestureActivationArea;
+	activationArea?: ResolvedGestureActivationArea;
 	dimensions: Layout;
 	responseDistance?: number;
 }
 
 type NormalizedSides = {
-	left: ActivationArea;
-	right: ActivationArea;
-	top: ActivationArea;
-	bottom: ActivationArea;
+	left: GestureDirectionActivationArea;
+	right: GestureDirectionActivationArea;
+	top: GestureDirectionActivationArea;
+	bottom: GestureDirectionActivationArea;
 };
 
 interface ShouldActivateOrFailProps {
@@ -91,39 +90,47 @@ const DEFAULT_EDGE_DISTANCE_VERTICAL = 135;
 const DEFAULT_ACTIVATION_AREA = "screen" as const;
 const SCROLL_EPILSON = 1;
 
-export function normalizeSides(area?: GestureActivationArea): NormalizedSides {
+export function normalizeSides(
+	area?: ResolvedGestureActivationArea,
+): NormalizedSides {
 	"worklet";
-	if (!area || typeof area === "string") {
-		const mode: ActivationArea = area ?? DEFAULT_ACTIVATION_AREA;
+	if (!area || typeof area === "string" || typeof area === "number") {
+		const mode: GestureDirectionActivationArea =
+			area ?? DEFAULT_ACTIVATION_AREA;
 		return { left: mode, right: mode, top: mode, bottom: mode };
 	}
 
-	const s: SideActivation = area as SideActivation;
 	return {
-		left: s.left ?? DEFAULT_ACTIVATION_AREA,
-		right: s.right ?? DEFAULT_ACTIVATION_AREA,
-		top: s.top ?? DEFAULT_ACTIVATION_AREA,
-		bottom: s.bottom ?? DEFAULT_ACTIVATION_AREA,
+		left: area.left ?? DEFAULT_ACTIVATION_AREA,
+		right: area.right ?? DEFAULT_ACTIVATION_AREA,
+		top: area.top ?? DEFAULT_ACTIVATION_AREA,
+		bottom: area.bottom ?? DEFAULT_ACTIVATION_AREA,
 	};
 }
 
 const canActivateFromStartEdge = (
-	mode: ActivationArea,
+	mode: GestureDirectionActivationArea,
 	touchPosition: number,
 	distance: number,
 ) => {
 	"worklet";
-	return mode === "screen" || touchPosition <= distance;
+	if (mode === "screen") return true;
+
+	const edgeDistance = typeof mode === "number" ? mode : distance;
+	return touchPosition <= edgeDistance;
 };
 
 const canActivateFromEndEdge = (
-	mode: ActivationArea,
+	mode: GestureDirectionActivationArea,
 	touchPosition: number,
 	size: number,
 	distance: number,
 ) => {
 	"worklet";
-	return mode === "screen" || touchPosition >= size - distance;
+	if (mode === "screen") return true;
+
+	const edgeDistance = typeof mode === "number" ? mode : distance;
+	return touchPosition >= size - edgeDistance;
 };
 
 export function computeEdgeConstraints(

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

@@ -4,17 +4,18 @@ import type {
 	GestureTouchEvent,
 } from "react-native-gesture-handler";
 import { type SharedValue, useSharedValue } from "react-native-reanimated";
-import { GestureStore } from "../../../../stores/gesture.store";
-import { GestureActivationState } from "../../../../types/gesture.types";
-import { useDescriptorDerivations } from "../../descriptors";
-import type { ScreenOptionsContextValue } from "../../options";
-import { resolvePanRuntime } from "../shared/runtime";
+import { GestureStore } from "../../../../../stores/gesture.store";
+import { GestureActivationState } from "../../../../../types/gesture.types";
+import { useDescriptorDerivations } from "../../../descriptors";
+import type { ScreenOptionsContextValue } from "../../../options";
+import { resolvePanRuntime } from "../../shared/runtime";
 import type {
 	DirectionClaimMap,
+	GestureCompositionActivation,
 	GestureDimensions,
 	PanGestureRuntime,
 	ScrollGestureState,
-} from "../types";
+} from "../../types";
 import { resolvePanActivationMoveDecision } from "./pan-activation-decision";
 
 interface UsePanActivationProps {
@@ -23,6 +24,7 @@ interface UsePanActivationProps {
 	runtime: SharedValue<PanGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
 	dimensions: GestureDimensions;
+	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
 }
 
 export const usePanActivation = ({
@@ -31,6 +33,7 @@ export const usePanActivation = ({
 	runtime,
 	screenOptions,
 	dimensions,
+	gestureCompositionActivation,
 }: UsePanActivationProps) => {
 	const { currentScreenKey, parentScreenKey } = useDescriptorDerivations();
 
@@ -51,16 +54,12 @@ export const usePanActivation = ({
 			stateManager: GestureStateManager | undefined,
 		) => {
 			"worklet";
-			const { participation, policy } = resolvePanRuntime(
+			const { participation } = resolvePanRuntime(
 				runtime.get(),
 				screenOptions.get(),
 			);
 
-			if (
-				!participation.canTrackGesture ||
-				!policy.enabled ||
-				event.numberOfTouches !== 1
-			) {
+			if (!participation.canTrackGesture) {
 				gestureActivationState.set(GestureActivationState.FAILED);
 				stateManager?.fail();
 				return;
@@ -82,6 +81,16 @@ export const usePanActivation = ({
 				runtime.get(),
 				screenOptions.get(),
 			);
+
+			if (
+				gestureCompositionActivation.get() === "pinch" &&
+				resolvedRuntime.participation.canTrackGesture &&
+				event.numberOfTouches === 2
+			) {
+				stateManager.activate();
+				return;
+			}
+
 			const decision = resolvePanActivationMoveDecision({
 				event,
 				runtime: resolvedRuntime,
@@ -113,6 +122,7 @@ export const usePanActivation = ({
 				gestures.direction.set(decision.direction);
 			}
 
+			gestureCompositionActivation.set("pan");
 			stateManager.activate();
 		},
 		[
@@ -125,6 +135,7 @@ export const usePanActivation = ({
 			runtime,
 			screenOptions,
 			scrollState,
+			gestureCompositionActivation,
 		],
 	);