react-native-screen-transitions 3.5.2 → 3.6.0-alpha.0

package/src/shared/providers/screen/animation/use-screen-animation.tsx

@@ -1,37 +1,56 @@
 import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import { resolveChainTarget } from "../../../utils/resolve-chain-target";
 import { useScreenAnimationContext } from "./animation.provider";
-import { resolveScreenAnimationTarget } from "./helpers/resolve-screen-animation-target";
 import type { ScreenAnimationSource, ScreenAnimationTarget } from "./types";
 
 export type { ScreenAnimationTarget } from "./types";
 
+export function useScreenAnimation(): DerivedValue<ScreenInterpolationProps>;
+export function useScreenAnimation(
+	target: "self",
+): DerivedValue<ScreenInterpolationProps>;
+export function useScreenAnimation(
+	target: Exclude<ScreenAnimationTarget, "self">,
+): DerivedValue<ScreenInterpolationProps> | null;
 export function useScreenAnimation(
 	target?: ScreenAnimationTarget,
-): DerivedValue<ScreenInterpolationProps> {
+): DerivedValue<ScreenInterpolationProps> | null {
 	const {
 		screenInterpolatorProps,
+		screenInterpolatorFrameUpdater,
 		boundsAccessor,
 		ancestorScreenAnimationSources,
 	} = useScreenAnimationContext();
 
-	const source = resolveScreenAnimationTarget<ScreenAnimationSource>({
+	const selfSource: ScreenAnimationSource = {
+		screenInterpolatorProps,
+		screenInterpolatorFrameUpdater,
+		boundsAccessor,
+	};
+
+	const source = resolveChainTarget<ScreenAnimationSource>({
 		target,
-		self: {
-			screenInterpolatorProps,
-			boundsAccessor,
-		},
+		self: selfSource,
 		ancestors: ancestorScreenAnimationSources,
 	});
+	const resolvedSource = source ?? selfSource;
 
-	return useDerivedValue<ScreenInterpolationProps>(() => {
+	const animation = useDerivedValue<ScreenInterpolationProps>(() => {
 		"worklet";
 
-		const props = source.screenInterpolatorProps.get();
+		resolvedSource.screenInterpolatorFrameUpdater.get();
+		const props = resolvedSource.screenInterpolatorProps.get();
 
 		return {
 			...props,
-			bounds: source.boundsAccessor,
+			bounds: resolvedSource.boundsAccessor,
 		};
 	});
+
+	if (target && target !== "self" && !source) {
+		return null;
+	}
+
+	return animation;
 }

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

@@ -0,0 +1,244 @@
+import { useCallback, useMemo } from "react";
+import type {
+	GestureStateManager,
+	GestureTouchEvent,
+} from "react-native-gesture-handler";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import { EPSILON } from "../../../../constants";
+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 {
+	applyOffsetRules,
+	checkScrollBoundary,
+} from "../helpers/gesture-activation";
+import { getPanSnapAxisConfigForDirection } from "../helpers/gesture-directions";
+import { resolveRuntimeSnapPoints } from "../helpers/gesture-snap-points";
+import { resolvePanRuntime } from "../helpers/runtime-options";
+import { shouldDeferToChildClaim } from "../ownership/should-defer-to-child-claim";
+import type {
+	DirectionClaimMap,
+	GestureDimensions,
+	PanGestureRuntime,
+	ScrollGestureState,
+} from "../types";
+
+interface UsePanActivationProps {
+	scrollState: SharedValue<ScrollGestureState | null>;
+	childDirectionClaims: SharedValue<DirectionClaimMap>;
+	runtime: SharedValue<PanGestureRuntime>;
+	screenOptions: ScreenOptionsContextValue;
+	dimensions: GestureDimensions;
+}
+
+export const usePanActivation = ({
+	scrollState,
+	childDirectionClaims,
+	runtime,
+	screenOptions,
+	dimensions,
+}: UsePanActivationProps) => {
+	const { currentScreenKey, parentScreenKey } = useDescriptorDerivations();
+
+	const ancestorDismissing = useMemo(() => {
+		if (!parentScreenKey) return null;
+		return GestureStore.peekBag(parentScreenKey)?.dismissing ?? null;
+	}, [parentScreenKey]);
+
+	const initialTouch = useSharedValue({ x: 0, y: 0 });
+
+	const gestureActivationState = useSharedValue<GestureActivationState>(
+		GestureActivationState.PENDING,
+	);
+
+	const onTouchesDown = useCallback(
+		(
+			event: GestureTouchEvent,
+			stateManager: GestureStateManager | undefined,
+		) => {
+			"worklet";
+			const { participation, policy } = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+
+			if (
+				!participation.canTrackGesture ||
+				!policy.enabled ||
+				event.numberOfTouches !== 1
+			) {
+				gestureActivationState.set(GestureActivationState.FAILED);
+				stateManager?.fail();
+				return;
+			}
+
+			const firstTouch = event.changedTouches[0];
+			initialTouch.set({ x: firstTouch.x, y: firstTouch.y });
+			gestureActivationState.set(GestureActivationState.PENDING);
+		},
+		[gestureActivationState, initialTouch, runtime, screenOptions],
+	);
+
+	const onTouchesMove = useCallback(
+		(event: GestureTouchEvent, stateManager: GestureStateManager) => {
+			"worklet";
+
+			if (event.numberOfTouches !== 1) {
+				gestureActivationState.set(GestureActivationState.FAILED);
+				stateManager.fail();
+				return;
+			}
+
+			if (ancestorDismissing?.get()) {
+				gestureActivationState.set(GestureActivationState.FAILED);
+				stateManager.fail();
+				return;
+			}
+
+			const {
+				participation,
+				policy,
+				stores: { animations, gestures, system },
+			} = resolvePanRuntime(runtime.get(), screenOptions.get());
+			const {
+				hasSnapPoints,
+				hasAutoSnapPoint,
+				snapPoints,
+				minSnapPoint,
+				maxSnapPoint,
+			} = participation.effectiveSnapPoints;
+
+			if (!participation.canTrackGesture || !policy.enabled) {
+				gestureActivationState.set(GestureActivationState.FAILED);
+				stateManager.fail();
+				return;
+			}
+
+			const touch = event.changedTouches[0];
+
+			const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
+				applyOffsetRules({
+					touch,
+					directions: policy.panActivationDirections,
+					dimensions,
+					gestureActivationState,
+					initialTouch: initialTouch.get(),
+					activationArea: policy.gestureActivationArea,
+					responseDistance: policy.gestureResponseDistance,
+				});
+
+			if (gestureActivationState.get() === GestureActivationState.FAILED) {
+				stateManager.fail();
+				return;
+			}
+
+			if (gestures.dragging.get()) {
+				stateManager.activate();
+				return;
+			}
+
+			let swipeDirection: Direction | null = null;
+			if (isSwipingDown) swipeDirection = "vertical";
+			else if (isSwipingUp) swipeDirection = "vertical-inverted";
+			else if (isSwipingRight) swipeDirection = "horizontal";
+			else if (isSwipingLeft) swipeDirection = "horizontal-inverted";
+
+			if (!swipeDirection) {
+				return;
+			}
+
+			if (participation.ownershipStatus[swipeDirection] !== "self") {
+				stateManager.fail();
+				return;
+			}
+
+			// A nested screen shadowing this direction gets priority while it is active.
+			const childClaim = childDirectionClaims.get()[swipeDirection];
+			if (shouldDeferToChildClaim(childClaim, currentScreenKey)) {
+				stateManager.fail();
+				return;
+			}
+
+			if (gestureActivationState.get() !== GestureActivationState.PASSED) {
+				return;
+			}
+
+			const activeSnapAxis = hasSnapPoints
+				? getPanSnapAxisConfigForDirection(
+						policy.snapAxisDirections,
+						swipeDirection,
+					)
+				: null;
+			const isExpandGesture = activeSnapAxis?.config.expand === swipeDirection;
+
+			if (hasSnapPoints && policy.gestureSnapLocked && isExpandGesture) {
+				stateManager.fail();
+				return;
+			}
+
+			if (!hasSnapPoints && gestures.dismissing.get()) {
+				return;
+			}
+
+			const currentScrollState = scrollState.get();
+			const isTouchingScrollView = currentScrollState?.isTouched ?? false;
+
+			if (isTouchingScrollView) {
+				const atBoundary = checkScrollBoundary(
+					currentScrollState,
+					swipeDirection,
+					activeSnapAxis?.config.inverted,
+				);
+
+				if (!atBoundary) {
+					stateManager.fail();
+					return;
+				}
+
+				if (hasSnapPoints && isExpandGesture) {
+					if (policy.sheetScrollGestureBehavior === "collapse-only") {
+						stateManager.fail();
+						return;
+					}
+
+					const { resolvedMaxSnapPoint } = resolveRuntimeSnapPoints({
+						snapPoints,
+						hasAutoSnapPoint,
+						resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+						minSnapPoint,
+						maxSnapPoint,
+						canDismiss: participation.canDismiss,
+					});
+
+					const canExpandMore =
+						animations.progress.get() < resolvedMaxSnapPoint - EPSILON &&
+						system.targetProgress.get() < resolvedMaxSnapPoint - EPSILON;
+
+					if (!canExpandMore) {
+						stateManager.fail();
+						return;
+					}
+				}
+			}
+
+			gestures.active.set(swipeDirection);
+			gestures.direction.set(swipeDirection);
+			stateManager.activate();
+		},
+		[
+			ancestorDismissing,
+			childDirectionClaims,
+			currentScreenKey,
+			dimensions,
+			gestureActivationState,
+			initialTouch,
+			runtime,
+			screenOptions,
+			scrollState,
+		],
+	);
+
+	return { onTouchesDown, onTouchesMove };
+};

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

@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import type {
+	GestureStateManager,
+	GestureTouchEvent,
+} from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+import type { ScreenOptionsContextValue } from "../../options";
+import { resolvePinchRuntime } from "../helpers/runtime-options";
+import type { PinchGestureRuntime } from "../types";
+
+interface UsePinchActivationProps {
+	runtime: SharedValue<PinchGestureRuntime>;
+	screenOptions: ScreenOptionsContextValue;
+}
+
+export const usePinchActivation = ({
+	runtime,
+	screenOptions,
+}: UsePinchActivationProps) => {
+	const onTouchesDown = useCallback(
+		(
+			event: GestureTouchEvent,
+			stateManager: GestureStateManager | undefined,
+		) => {
+			"worklet";
+			const { participation, policy } = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+
+			if (!participation.canTrackGesture || !policy.enabled) {
+				stateManager?.fail();
+				return;
+			}
+
+			if (event.numberOfTouches === 2) {
+				stateManager?.activate();
+				return;
+			}
+
+			if (event.numberOfTouches > 2) {
+				stateManager?.fail();
+			}
+		},
+		[runtime, screenOptions],
+	);
+
+	const onTouchesMove = useCallback(
+		(event: GestureTouchEvent, stateManager: GestureStateManager) => {
+			"worklet";
+			const { participation, policy } = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+
+			if (!participation.canTrackGesture || !policy.enabled) {
+				stateManager.fail();
+				return;
+			}
+
+			if (event.numberOfTouches === 2) {
+				stateManager.activate();
+				return;
+			}
+
+			stateManager.fail();
+		},
+		[runtime, screenOptions],
+	);
+
+	return { onTouchesDown, onTouchesMove };
+};

package/src/shared/providers/screen/gestures/behaviors/strategies/pan-snap.strategy.ts

@@ -0,0 +1,195 @@
+import { resolveSnapTransitionSpec } from "../../../../../utils/animation/resolve-snap-transition-spec";
+import {
+	getPanSnapAxisConfigForDirection,
+	isResolvedPanGestureDirection,
+} from "../../helpers/gesture-directions";
+import { getPanReleaseHandoffVelocity } from "../../helpers/gesture-physics";
+import {
+	findNearestSnapPoint,
+	resolveRuntimeSnapPoints,
+} from "../../helpers/gesture-snap-points";
+import { determineSnapTarget } from "../../helpers/gesture-targets";
+import type { PanBehaviorStrategy } from "../../types";
+
+export const SnapPanStrategy: PanBehaviorStrategy = {
+	primeStart(runtime) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { animations, system },
+			lockedSnapPoint,
+		} = runtime;
+		const { hasAutoSnapPoint, snapPoints, minSnapPoint, maxSnapPoint } =
+			participation.effectiveSnapPoints;
+
+		const { resolvedSnapPoints, resolvedMaxSnapPoint } =
+			resolveRuntimeSnapPoints({
+				snapPoints,
+				hasAutoSnapPoint,
+				resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+				minSnapPoint,
+				maxSnapPoint,
+				canDismiss: participation.canDismiss,
+			});
+
+		if (policy.gestureSnapLocked) {
+			lockedSnapPoint.set(
+				findNearestSnapPoint(animations.progress.get(), resolvedSnapPoints),
+			);
+			return;
+		}
+
+		lockedSnapPoint.set(resolvedMaxSnapPoint);
+	},
+
+	resolveProgress(runtime, dimensions, track) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { system },
+			gestureProgressBaseline,
+			lockedSnapPoint,
+		} = runtime;
+		const activeGesture = runtime.stores.gestures.active.get();
+		const activeAxis = isResolvedPanGestureDirection(activeGesture)
+			? getPanSnapAxisConfigForDirection(
+					policy.snapAxisDirections,
+					activeGesture,
+				)
+			: null;
+
+		if (!activeAxis) {
+			return gestureProgressBaseline.get();
+		}
+
+		const { hasAutoSnapPoint, snapPoints, minSnapPoint, maxSnapPoint } =
+			participation.effectiveSnapPoints;
+		const { x, y } = track;
+
+		const isHorizontal = activeAxis.axis === "horizontal";
+		const translation = isHorizontal ? x : y;
+		const dimension = isHorizontal ? dimensions.width : dimensions.height;
+		const progressDelta =
+			(activeAxis.config.progressSign * translation) / dimension;
+
+		const { resolvedMinSnapPoint, resolvedMaxSnapPoint } =
+			resolveRuntimeSnapPoints({
+				snapPoints,
+				hasAutoSnapPoint,
+				resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+				minSnapPoint,
+				maxSnapPoint,
+				canDismiss: participation.canDismiss,
+			});
+
+		const maxProgressForGesture = policy.gestureSnapLocked
+			? lockedSnapPoint.get()
+			: resolvedMaxSnapPoint;
+		const minProgressForGesture = policy.gestureSnapLocked
+			? participation.canDismiss
+				? 0
+				: lockedSnapPoint.get()
+			: resolvedMinSnapPoint;
+
+		return Math.max(
+			minProgressForGesture,
+			Math.min(
+				maxProgressForGesture,
+				gestureProgressBaseline.get() + progressDelta,
+			),
+		);
+	},
+
+	resolveRelease(event, runtime, dimensions) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { animations, system },
+			lockedSnapPoint,
+		} = runtime;
+		const { hasAutoSnapPoint, snapPoints, minSnapPoint, maxSnapPoint } =
+			participation.effectiveSnapPoints;
+		const activeGesture = runtime.stores.gestures.active.get();
+		const activeAxis = isResolvedPanGestureDirection(activeGesture)
+			? getPanSnapAxisConfigForDirection(
+					policy.snapAxisDirections,
+					activeGesture,
+				)
+			: null;
+
+		if (!activeAxis) {
+			return {
+				target: animations.progress.get(),
+				shouldDismiss: false,
+				initialVelocity: 0,
+				transitionSpec: policy.transitionSpec,
+				resetSpec: policy.transitionSpec?.open,
+			};
+		}
+
+		const isHorizontal = activeAxis.axis === "horizontal";
+		const axisVelocity = isHorizontal ? event.velocityX : event.velocityY;
+		const axisDimension = isHorizontal ? dimensions.width : dimensions.height;
+		const snapVelocity = activeAxis.config.inverted
+			? -axisVelocity
+			: axisVelocity;
+
+		const { resolvedSnapPoints } = resolveRuntimeSnapPoints({
+			snapPoints,
+			hasAutoSnapPoint,
+			resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+			minSnapPoint,
+			maxSnapPoint,
+			canDismiss: participation.canDismiss,
+		});
+
+		const result = determineSnapTarget({
+			currentProgress: animations.progress.get(),
+			snapPoints: policy.gestureSnapLocked
+				? [lockedSnapPoint.get()]
+				: resolvedSnapPoints,
+			velocity: snapVelocity,
+			dimension: axisDimension,
+			velocityFactor: policy.gestureSnapVelocityImpact,
+			canDismiss: participation.canDismiss,
+		});
+
+		const shouldDismiss = participation.canDismiss && result.shouldDismiss;
+		const target = shouldDismiss ? 0 : result.targetProgress;
+		const isSnapping = !shouldDismiss;
+		const currentProgress = animations.progress.get();
+		const transitionSpec = isSnapping
+			? resolveSnapTransitionSpec(
+					policy.transitionSpec,
+					target < currentProgress ? "collapse" : "expand",
+				)
+			: policy.transitionSpec;
+
+		const snapDirection = Math.sign(target - currentProgress);
+		const initialVelocity =
+			snapDirection === 0
+				? 0
+				: snapDirection *
+					Math.abs(
+						getPanReleaseHandoffVelocity(
+							axisVelocity,
+							axisDimension,
+							policy.gestureReleaseVelocityScale,
+							policy.gestureReleaseVelocityMax,
+						),
+					);
+
+		return {
+			target,
+			shouldDismiss,
+			initialVelocity,
+			transitionSpec,
+			resetSpec: shouldDismiss
+				? policy.transitionSpec?.close
+				: policy.transitionSpec?.open,
+		};
+	},
+};

package/src/shared/providers/screen/gestures/behaviors/strategies/pan.strategy.ts

@@ -0,0 +1,76 @@
+import { clamp } from "react-native-reanimated";
+import {
+	getPanReleaseProgressVelocity,
+	mapGestureToProgress,
+} from "../../helpers/gesture-physics";
+import { determineDismissal } from "../../helpers/gesture-targets";
+import type { PanBehaviorStrategy } from "../../types";
+
+export const PanStrategy: PanBehaviorStrategy = {
+	primeStart(_runtime) {
+		"worklet";
+	},
+
+	resolveProgress(runtime, dimensions, track) {
+		"worklet";
+		const { policy, gestureProgressBaseline } = runtime;
+		const { x, y } = track;
+		const { width, height } = dimensions;
+
+		let maxProgress = 0;
+
+		if (policy.panActivationDirections.horizontal && x > 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(x, width));
+		}
+
+		if (policy.panActivationDirections.horizontalInverted && x < 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(-x, width));
+		}
+
+		if (policy.panActivationDirections.vertical && y > 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(y, height));
+		}
+
+		if (policy.panActivationDirections.verticalInverted && y < 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(-y, height));
+		}
+
+		return clamp(gestureProgressBaseline.get() - maxProgress, 0, 1);
+	},
+
+	resolveRelease(event, runtime, dimensions) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { animations },
+		} = runtime;
+
+		const result = determineDismissal({
+			event,
+			directions: policy.panActivationDirections,
+			dimensions,
+			gestureVelocityImpact: policy.gestureVelocityImpact,
+		});
+
+		const shouldDismiss = participation.canDismiss && result.shouldDismiss;
+
+		return {
+			target: shouldDismiss ? 0 : 1,
+			shouldDismiss,
+			initialVelocity: getPanReleaseProgressVelocity({
+				animations,
+				shouldDismiss,
+				event,
+				dimensions,
+				directions: policy.panActivationDirections,
+				gestureReleaseVelocityScale: policy.gestureReleaseVelocityScale,
+				gestureReleaseVelocityMax: policy.gestureReleaseVelocityMax,
+			}),
+			transitionSpec: policy.transitionSpec,
+			resetSpec: shouldDismiss
+				? policy.transitionSpec?.close
+				: policy.transitionSpec?.open,
+		};
+	},
+};