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

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

@@ -12,7 +12,9 @@ import type {
 	Layout,
 	ScreenTransitionState,
 } from "../../../../types";
+import type { ScreenTransitionOptions } from "../../../../types/animation.types";
 import type { BaseDescriptor } from "../../descriptors";
+import { buildScreenTransitionOptions } from "./build-screen-transition-options";
 import { toPlainRoute, toPlainValue } from "./worklet";
 
 type BuiltState = {
@@ -26,9 +28,12 @@ type BuiltState = {
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
+	options: ScreenTransitionOptions;
+	navigationMaskEnabled: boolean;
 	targetProgress: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
+	contentLayoutSlot: Layout;
 	hasAutoSnapPoint: boolean;
 	sortedNumericSnapPoints: number[];
 	unwrapped: ScreenTransitionState;
@@ -36,20 +41,13 @@ type BuiltState = {
 
 export const useBuildTransitionState = (
 	descriptor: BaseDescriptor | undefined,
-	slot: "current" | "next" | "previous",
 ): BuiltState | undefined => {
 	const key = descriptor?.route?.key;
 	const meta = descriptor?.options?.meta;
 	const route = descriptor?.route;
-	const gestureEnabled = descriptor?.options?.gestureEnabled;
 	const navigationMaskEnabled = !!descriptor?.options?.navigationMaskEnabled;
 	const snapPoints = descriptor?.options?.snapPoints;
 
-	const shouldUseNeutralNextGestures =
-		slot === "next" &&
-		gestureEnabled === false &&
-		(!snapPoints || snapPoints.length === 0);
-
 	return useMemo(() => {
 		if (!key || !route) return undefined;
 
@@ -62,6 +60,8 @@ export const useBuildTransitionState = (
 			.filter((p): p is number => typeof p === "number")
 			.sort((a, b) => a - b);
 
+		const transitionOptions = buildScreenTransitionOptions(descriptor.options);
+
 		return {
 			progress: AnimationStore.getValue(key, "progress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
@@ -73,25 +73,27 @@ export const useBuildTransitionState = (
 			targetProgress: SystemStore.getValue(key, "targetProgress"),
 			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
 			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
+			contentLayoutSlot: { width: 0, height: 0 },
 			hasAutoSnapPoint: snapPoints?.includes("auto") ?? false,
 			sortedNumericSnapPoints,
-			gesture: shouldUseNeutralNextGestures
-				? (GestureStore.peekBag(key) ?? GestureStore.getCachedBag())
-				: GestureStore.getBag(key),
+			gesture: GestureStore.getBag(key),
 			route: plainRoute,
 			meta: plainMeta,
+			options: transitionOptions,
+			navigationMaskEnabled,
 			unwrapped: createScreenTransitionState(
 				plainRoute,
 				plainMeta,
 				navigationMaskEnabled,
+				transitionOptions,
 			),
 		};
 	}, [
 		key,
 		meta,
 		route,
-		shouldUseNeutralNextGestures,
 		snapPoints,
 		navigationMaskEnabled,
+		descriptor?.options,
 	]);
 };

package/src/shared/providers/screen/animation/types.ts

@@ -1,14 +1,14 @@
 import type { SharedValue } from "react-native-reanimated";
 import type { BoundsAccessor } from "../../../types/bounds.types";
+import type { ChainTarget } from "../../../utils/resolve-chain-target";
 import type { ScreenInterpolatorFrame } from "./helpers/pipeline";
 
-export type ScreenAnimationTarget =
-	| "self"
-	| "parent"
-	| "root"
-	| { ancestor: number };
+export type ScreenInterpolatorFrameUpdater = Pick<SharedValue<number>, "get">;
+
+export type ScreenAnimationTarget = ChainTarget;
 
 export type ScreenAnimationSource = {
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
+	screenInterpolatorFrameUpdater: ScreenInterpolatorFrameUpdater;
 	boundsAccessor: BoundsAccessor;
 };

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,
+		};
+	},
+};