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

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

@@ -1,14 +1,15 @@
 import { useCallback, useMemo } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import { useNavigationHelpers } from "../../../../hooks/navigation/use-navigation-helpers";
-import type { ScreenOptionsContextValue } from "../../options";
-import { usePinchGestureSensitivity } from "../hooks/use-gesture-sensitivity";
-import { resolvePinchRuntime } from "../shared/runtime";
+import { useNavigationHelpers } from "../../../../../hooks/navigation/use-navigation-helpers";
+import type { ScreenOptionsContextValue } from "../../../options";
+import { usePinchGestureSensitivity } from "../../hooks/use-gesture-sensitivity";
+import { resolvePinchRuntime } from "../../shared/runtime";
 import type {
+	GestureCompositionActivation,
 	PinchBehavior,
 	PinchGestureEvent,
 	PinchGestureRuntime,
-} from "../types";
+} from "../../types";
 import {
 	finalizePinchRelease,
 	startPinchBase,
@@ -23,6 +24,7 @@ import {
 export const usePinchBehavior = (
 	runtime: SharedValue<PinchGestureRuntime>,
 	screenOptions: ScreenOptionsContextValue,
+	gestureCompositionActivation: SharedValue<GestureCompositionActivation>,
 ): PinchBehavior => {
 	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
@@ -75,8 +77,16 @@ export const usePinchBehavior = (
 				dismissScreen,
 				requestDismiss,
 			);
+			gestureCompositionActivation.set(null);
 		},
-		[runtime, screenOptions, dismissScreen, requestDismiss, withSensitivity],
+		[
+			runtime,
+			screenOptions,
+			dismissScreen,
+			requestDismiss,
+			withSensitivity,
+			gestureCompositionActivation,
+		],
 	);
 
 	return useMemo(

package/src/shared/providers/screen/gestures/pinch/{build-pinch-gesture.ts → use-build-pinch-gesture.ts}

@@ -1,19 +1,26 @@
 import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
 import { useScreenOptionsContext } from "../../options";
 import { useGestureBuilderState } from "../hooks/use-gesture-builder-state";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
-import type { PinchGesture, ScreenGestureConfig } from "../types";
-import { usePinchActivation } from "./pinch-activation";
-import { usePinchBehavior } from "./use-pinch-behavior";
+import type {
+	GestureCompositionActivation,
+	PinchGesture,
+	ScreenGestureConfig,
+} from "../types";
+import { usePinchActivation } from "./activation/use-pinch-activation";
+import { usePinchBehavior } from "./behavior/use-pinch-behavior";
 
-interface BuildPinchGestureHookProps {
+interface UseBuildPinchGestureProps {
 	gestureConfig: ScreenGestureConfig;
+	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
 }
 
 export const useBuildPinchGesture = ({
 	gestureConfig,
-}: BuildPinchGestureHookProps): PinchGesture => {
+	gestureCompositionActivation,
+}: UseBuildPinchGestureProps): PinchGesture => {
 	const { participation, pinch: policy } = gestureConfig;
 	const screenOptions = useScreenOptionsContext();
 	const { gestureProgressBaseline, lockedSnapPoint } =
@@ -29,9 +36,14 @@ export const useBuildPinchGesture = ({
 	const activation = usePinchActivation({
 		runtime,
 		screenOptions,
+		gestureCompositionActivation,
 	});
 
-	const behavior = usePinchBehavior(runtime, screenOptions);
+	const behavior = usePinchBehavior(
+		runtime,
+		screenOptions,
+		gestureCompositionActivation,
+	);
 
 	const pinchGesture = useMemo(() => {
 		return Gesture.Pinch()

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

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } 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 "../../shared/runtime";
+import type {
+	GestureCompositionActivation,
+	RotationGestureRuntime,
+} from "../../types";
+
+interface UseRotationActivationProps {
+	runtime: SharedValue<RotationGestureRuntime>;
+	screenOptions: ScreenOptionsContextValue;
+	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
+}
+
+export const useRotationActivation = ({
+	runtime,
+	screenOptions,
+	gestureCompositionActivation,
+}: UseRotationActivationProps) => {
+	const onTouchesDown = useCallback(
+		(
+			event: GestureTouchEvent,
+			stateManager: GestureStateManager | undefined,
+		) => {
+			"worklet";
+			const { participation, policy } = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+
+			if (gestureCompositionActivation.get() === "pan") {
+				stateManager?.fail();
+				return;
+			}
+
+			if (!participation.canTrackGesture || !policy.enabled) {
+				stateManager?.fail();
+				return;
+			}
+
+			if (event.numberOfTouches === 2) {
+				gestureCompositionActivation.set("pinch");
+				stateManager?.activate();
+				return;
+			}
+
+			if (event.numberOfTouches > 2) {
+				stateManager?.fail();
+			}
+		},
+		[runtime, screenOptions, gestureCompositionActivation],
+	);
+
+	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) {
+				gestureCompositionActivation.set("pinch");
+				stateManager.activate();
+				return;
+			}
+
+			stateManager.fail();
+		},
+		[runtime, screenOptions, gestureCompositionActivation],
+	);
+
+	return useMemo(
+		() => ({ onTouchesDown, onTouchesMove }),
+		[onTouchesDown, onTouchesMove],
+	);
+};

package/src/shared/providers/screen/gestures/rotation/behavior/rotation-lifecycle.ts

@@ -0,0 +1,19 @@
+import type { RotationGestureEvent, RotationGestureRuntime } from "../../types";
+
+export const startRotationGesture = (
+	gestures: RotationGestureRuntime["stores"]["gestures"],
+) => {
+	"worklet";
+	gestures.rotation.set(0);
+	gestures.raw.rotation.set(0);
+};
+
+export const trackRotationGesture = (
+	event: RotationGestureEvent,
+	rawEvent: RotationGestureEvent,
+	gestures: RotationGestureRuntime["stores"]["gestures"],
+) => {
+	"worklet";
+	gestures.rotation.set(event.rotation);
+	gestures.raw.rotation.set(rawEvent.rotation);
+};

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

@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { ScreenOptionsContextValue } from "../../../options";
+import { resolvePinchRuntime } from "../../shared/runtime";
+import type {
+	RotationBehavior,
+	RotationGestureEvent,
+	RotationGestureRuntime,
+} from "../../types";
+import {
+	startRotationGesture,
+	trackRotationGesture,
+} from "./rotation-lifecycle";
+
+export const useRotationBehavior = (
+	runtime: SharedValue<RotationGestureRuntime>,
+	screenOptions: ScreenOptionsContextValue,
+): RotationBehavior => {
+	const onStart = useCallback(() => {
+		"worklet";
+		const latestRuntime = resolvePinchRuntime(
+			runtime.get(),
+			screenOptions.get(),
+		);
+		startRotationGesture(latestRuntime.stores.gestures);
+	}, [runtime, screenOptions]);
+
+	const onUpdate = useCallback(
+		(rawEvent: RotationGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			trackRotationGesture(rawEvent, rawEvent, latestRuntime.stores.gestures);
+		},
+		[runtime, screenOptions],
+	);
+
+	return useMemo(
+		() => ({
+			onStart,
+			onUpdate,
+		}),
+		[onStart, onUpdate],
+	);
+};

package/src/shared/providers/screen/gestures/rotation/use-build-rotation-gesture.ts

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+import { useScreenOptionsContext } from "../../options";
+import { useGestureBuilderState } from "../hooks/use-gesture-builder-state";
+import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
+import type {
+	GestureCompositionActivation,
+	RotationGesture,
+	ScreenGestureConfig,
+} from "../types";
+import { useRotationActivation } from "./activation/use-rotation-activation";
+import { useRotationBehavior } from "./behavior/use-rotation-behavior";
+
+interface UseBuildRotationGestureProps {
+	gestureConfig: ScreenGestureConfig;
+	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
+}
+
+export const useBuildRotationGesture = ({
+	gestureConfig,
+	gestureCompositionActivation,
+}: UseBuildRotationGestureProps): RotationGesture => {
+	const { participation, pinch: policy } = gestureConfig;
+	const screenOptions = useScreenOptionsContext();
+	const { gestureProgressBaseline, lockedSnapPoint } =
+		useGestureBuilderState(participation);
+
+	const runtime = useStableRuntimeConfig({
+		participation,
+		policy,
+		gestureProgressBaseline,
+		lockedSnapPoint,
+	});
+
+	const activation = useRotationActivation({
+		runtime,
+		screenOptions,
+		gestureCompositionActivation,
+	});
+
+	const behavior = useRotationBehavior(runtime, screenOptions);
+
+	const rotationGesture = useMemo(() => {
+		return Gesture.Rotation()
+			.enabled(true)
+			.manualActivation(true)
+			.onTouchesDown(activation.onTouchesDown)
+			.onTouchesMove(activation.onTouchesMove)
+			.onStart(behavior.onStart)
+			.onUpdate(behavior.onUpdate);
+	}, [activation, behavior]);
+
+	return rotationGesture;
+};

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

@@ -1,6 +1,8 @@
 import type {
 	ActiveGesture,
 	GestureDirection,
+	GestureDirectionEntry,
+	GestureDirectionOption,
 	GestureDirections,
 	PanGestureDirection,
 	PinchGestureDirection,
@@ -13,7 +15,7 @@ import type {
 import type { Direction } from "../../../../types/ownership.types";
 
 interface GetPanActivationDirectionsProps {
-	gestureDirection: GestureDirection | GestureDirection[];
+	gestureDirection: GestureDirectionOption;
 	hasSnapPoints: boolean;
 }
 
@@ -43,16 +45,30 @@ export const isResolvedPanGestureDirection = (
 	);
 };
 
-export const getPanGestureDirections = (
-	gestureDirection: GestureDirection | GestureDirection[],
-): PanGestureDirection[] => {
+export const getGestureDirectionEntryGesture = (
+	entry: GestureDirectionEntry,
+): GestureDirection => {
+	"worklet";
+	return typeof entry === "string" ? entry : entry.gesture;
+};
+
+export const getGestureDirectionEntries = (
+	gestureDirection: GestureDirectionOption,
+): GestureDirectionEntry[] => {
 	"worklet";
-	const directions = Array.isArray(gestureDirection)
+	return Array.isArray(gestureDirection)
 		? gestureDirection
 		: [gestureDirection];
+};
+
+export const getPanGestureDirections = (
+	gestureDirection: GestureDirectionOption,
+): PanGestureDirection[] => {
+	"worklet";
 	const panDirections: PanGestureDirection[] = [];
 
-	for (const direction of directions) {
+	for (const entry of getGestureDirectionEntries(gestureDirection)) {
+		const direction = getGestureDirectionEntryGesture(entry);
 		if (isPanGestureDirection(direction)) {
 			panDirections.push(direction);
 		}
@@ -62,15 +78,13 @@ export const getPanGestureDirections = (
 };
 
 export const getPinchGestureDirections = (
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 ): PinchGestureDirection[] => {
 	"worklet";
-	const directions = Array.isArray(gestureDirection)
-		? gestureDirection
-		: [gestureDirection];
 	const pinchDirections: PinchGestureDirection[] = [];
 
-	for (const direction of directions) {
+	for (const entry of getGestureDirectionEntries(gestureDirection)) {
+		const direction = getGestureDirectionEntryGesture(entry);
 		if (isPinchGestureDirection(direction)) {
 			pinchDirections.push(direction);
 		}
@@ -126,7 +140,7 @@ const setSnapPanAxisConfig = (
 };
 
 export const getPanSnapAxisDirections = (
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 ): SnapPanDirectionConfig => {
 	"worklet";
 	const config: SnapPanDirectionConfig = {
@@ -148,7 +162,7 @@ export const getPanSnapAxisDirections = (
 };
 
 export const getSnapPinchDirectionConfig = (
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 ): SnapPinchDirectionConfig => {
 	"worklet";
 	const pinchDirection = getPinchGestureDirections(gestureDirection)[0];

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

@@ -12,8 +12,11 @@ import {
 } from "../../../../constants";
 import type {
 	GestureActivationArea,
-	GestureDirection,
+	GestureDirectionActivationArea,
+	GestureDirectionEntry,
+	GestureDirectionOption,
 	GestureProgressMode,
+	ResolvedGestureActivationArea,
 } from "../../../../types/gesture.types";
 import type {
 	GestureTracking,
@@ -32,6 +35,8 @@ import type {
 	ScreenGestureParticipation,
 } from "../types";
 import {
+	getGestureDirectionEntries,
+	getGestureDirectionEntryGesture,
 	getPanActivationDirections,
 	getPanGestureDirections,
 	getPanSnapAxisDirections,
@@ -43,7 +48,7 @@ import { validateSnapPoints } from "./snap-points";
 export type GesturePolicyOptions = {
 	expandViaScrollView?: boolean;
 	gestureActivationArea?: GestureActivationArea;
-	gestureDirection?: GestureDirection | GestureDirection[];
+	gestureDirection?: GestureDirectionOption;
 	gestureDrivesProgress?: boolean;
 	gestureEnabled?: boolean;
 	gestureProgressMode?: GestureProgressMode;
@@ -64,6 +69,92 @@ const resolveGestureDirection = (options: GesturePolicyOptions) => {
 	return options.gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
 };
 
+const isStructuredGestureDirection = (entry: GestureDirectionEntry) => {
+	"worklet";
+	return typeof entry !== "string";
+};
+
+const getGestureDirectionActivationArea = (
+	entry: GestureDirectionEntry,
+): GestureDirectionActivationArea => {
+	"worklet";
+	return isStructuredGestureDirection(entry)
+		? (entry.area ?? DEFAULT_GESTURE_ACTIVATION_AREA)
+		: DEFAULT_GESTURE_ACTIVATION_AREA;
+};
+
+const resolveConfiguredGestureActivationArea = (
+	gestureDirection: GestureDirectionOption,
+	hasSnapPoints: boolean,
+): ResolvedGestureActivationArea | undefined => {
+	"worklet";
+	const entries = getGestureDirectionEntries(gestureDirection);
+	let hasStructuredEntry = false;
+
+	for (const entry of entries) {
+		if (isStructuredGestureDirection(entry)) {
+			hasStructuredEntry = true;
+			break;
+		}
+	}
+
+	if (!hasStructuredEntry) {
+		return undefined;
+	}
+
+	const sides = {
+		left: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+		right: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+		top: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+		bottom: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+	};
+
+	for (const entry of entries) {
+		const gesture = getGestureDirectionEntryGesture(entry);
+		const area = getGestureDirectionActivationArea(entry);
+
+		switch (gesture) {
+			case "horizontal":
+				sides.left = area;
+				if (hasSnapPoints) sides.right = area;
+				break;
+			case "horizontal-inverted":
+				sides.right = area;
+				if (hasSnapPoints) sides.left = area;
+				break;
+			case "vertical":
+				sides.top = area;
+				if (hasSnapPoints) sides.bottom = area;
+				break;
+			case "vertical-inverted":
+				sides.bottom = area;
+				if (hasSnapPoints) sides.top = area;
+				break;
+			case "bidirectional":
+				sides.left = area;
+				sides.right = area;
+				sides.top = area;
+				sides.bottom = area;
+				break;
+		}
+	}
+
+	return sides;
+};
+
+const resolveGestureActivationArea = (
+	options: GesturePolicyOptions,
+	gestureDirection: GestureDirectionOption,
+	hasSnapPoints: boolean,
+): ResolvedGestureActivationArea => {
+	"worklet";
+	return (
+		resolveConfiguredGestureActivationArea(gestureDirection, hasSnapPoints) ??
+		options.gestureActivationArea ??
+		DEFAULT_GESTURE_ACTIVATION_AREA
+	);
+};
+
 function resolveGestureProgressModePolicy(options: GesturePolicyOptions) {
 	"worklet";
 	return resolveGestureProgressMode({
@@ -196,8 +287,11 @@ export const resolvePanPolicy = (
 		...resolveCommonGesturePolicy(options),
 		gestureVelocityImpact:
 			options.gestureVelocityImpact ?? DEFAULT_GESTURE_VELOCITY_IMPACT,
-		gestureActivationArea:
-			options.gestureActivationArea ?? DEFAULT_GESTURE_ACTIVATION_AREA,
+		gestureActivationArea: resolveGestureActivationArea(
+			options,
+			gestureDirection,
+			hasSnapPoints,
+		),
 		sheetScrollGestureBehavior:
 			resolvePolicySheetScrollGestureBehavior(options),
 		gestureResponseDistance: options.gestureResponseDistance,
@@ -248,7 +342,7 @@ const resolveGestureParticipation = ({
 	});
 	const claimedDirections = computeClaimedDirections(
 		canTrackGesture,
-		options.gestureDirection,
+		resolveGestureDirection(options),
 		effectiveSnapPoints.hasSnapPoints,
 	);
 

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

@@ -2,25 +2,17 @@ import type { SharedValue } from "react-native-reanimated";
 import { FALSE } from "../../../../constants";
 import type { GestureStoreMap } from "../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../types/animation.types";
-import { animate } from "../../../../utils/animation/animate";
+import {
+	animate,
+	isSpringAnimationConfig,
+	type SpringAnimationConfig,
+} from "../../../../utils/animation/animate";
 
-type ResetSpringSpec = AnimationConfig & { velocity?: number };
+type ResetSpringSpec = SpringAnimationConfig & { velocity?: number };
 
 const isResetSpringSpec = (spec?: AnimationConfig): spec is ResetSpringSpec => {
 	"worklet";
-	if (typeof spec !== "object") {
-		return false;
-	}
-
-	if ("duration" in spec) {
-		return false;
-	}
-
-	if ("easing" in spec) {
-		return false;
-	}
-
-	return true;
+	return isSpringAnimationConfig(spec);
 };
 
 export const getGestureResetSpec = (
@@ -50,9 +42,9 @@ export const animateResetValue = (
 ) => {
 	"worklet";
 	value.set(
-		animate(toValue, config, (finished) => {
+		animate(toValue, config, (state) => {
 			"worklet";
-			if (finished) {
+			if (state.finished) {
 				onFinished();
 			}
 		}),

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

@@ -14,18 +14,6 @@ import {
 	resolveRuntimeGestureParticipation,
 } from "./policy";
 
-const resolveRuntimeOptions = (
-	policy: GesturePolicy,
-	screenOptions: ScreenOptionsSnapshot,
-): GesturePolicyOptions => {
-	"worklet";
-
-	return {
-		...screenOptions,
-		transitionSpec: policy.transitionSpec,
-	};
-};
-
 type RuntimePolicyResolver<TPolicy extends GesturePolicy> = (
 	options: GesturePolicyOptions,
 	hasSnapPoints: boolean,
@@ -41,13 +29,12 @@ const resolveRuntime = <TPolicy extends GesturePolicy>(
 		participation: runtime.participation,
 		options: screenOptions,
 	});
-	const options = resolveRuntimeOptions(runtime.policy, screenOptions);
 	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
 
 	return {
 		...runtime,
 		participation,
-		policy: resolvePolicy(options, hasSnapPoints),
+		policy: resolvePolicy(screenOptions, hasSnapPoints),
 	};
 };
 

package/src/shared/providers/screen/gestures/shared/snap-points.ts

@@ -144,7 +144,7 @@ export const validateSnapPoints = ({
 		return createEmptySnapPoints();
 	}
 
-	const sortedSnaps = normalizedSnaps.slice().sort((a, b) => a - b);
+	const sortedSnaps = normalizedSnaps.sort((a, b) => a - b);
 
 	return {
 		hasSnapPoints: true,