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

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

@@ -0,0 +1,346 @@
+import {
+	DEFAULT_GESTURE_ACTIVATION_AREA,
+	DEFAULT_GESTURE_DIRECTION,
+	DEFAULT_GESTURE_PROGRESS_MODE,
+	DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
+	DEFAULT_GESTURE_SENSITIVITY,
+	DEFAULT_GESTURE_SNAP_LOCKED,
+	DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
+	DEFAULT_GESTURE_VELOCITY_IMPACT,
+	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+} from "../../../../constants";
+import type {
+	GestureActivationArea,
+	GestureDirection,
+	GestureProgressMode,
+} from "../../../../types/gesture.types";
+import type {
+	ScreenTransitionConfig,
+	SheetScrollGestureBehavior,
+	SnapPoint,
+} from "../../../../types/screen.types";
+import { resolveGestureProgressMode } from "../../../../utils/gesture-progress-mode";
+import { computeClaimedDirections } from "../ownership/compute-claimed-directions";
+import { resolveOwnership } from "../ownership/resolve-ownership";
+import type {
+	GestureContextType,
+	PanGesturePolicy,
+	PinchGesturePolicy,
+	ScreenGestureConfig,
+	ScreenGestureParticipation,
+} from "../types";
+import {
+	getPanActivationDirections,
+	getPanGestureDirections,
+	getPanSnapAxisDirections,
+	getPinchGestureDirections,
+	getSnapPinchDirectionConfig,
+} from "./directions";
+import { validateSnapPoints } from "./snap-points";
+
+export type GesturePolicyOptions = {
+	experimental_allowDisabledGestureTracking?: boolean;
+	expandViaScrollView?: boolean;
+	gestureActivationArea?: GestureActivationArea;
+	gestureDirection?: GestureDirection | GestureDirection[];
+	gestureDrivesProgress?: boolean;
+	gestureEnabled?: boolean;
+	gestureProgressMode?: GestureProgressMode;
+	gestureReleaseVelocityScale?: number;
+	gestureResponseDistance?: number;
+	gestureSensitivity?: number;
+	gestureSnapLocked?: boolean;
+	gestureSnapVelocityImpact?: number;
+	gestureVelocityImpact?: number;
+	sheetScrollGestureBehavior?: SheetScrollGestureBehavior;
+	snapPoints?: SnapPoint[];
+	transitionSpec?: ScreenTransitionConfig["transitionSpec"];
+};
+
+const resolveGestureDirection = (options: GesturePolicyOptions) => {
+	"worklet";
+	return options.gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
+};
+
+export function resolveGestureProgressModePolicy(
+	options: GesturePolicyOptions,
+) {
+	"worklet";
+	return resolveGestureProgressMode({
+		gestureProgressMode: options.gestureProgressMode,
+		gestureDrivesProgress: options.gestureDrivesProgress,
+		fallback: DEFAULT_GESTURE_PROGRESS_MODE,
+	});
+}
+
+const resolveCommonGesturePolicy = (options: GesturePolicyOptions) => {
+	"worklet";
+	return {
+		gestureProgressMode: resolveGestureProgressModePolicy(options),
+		gestureSensitivity:
+			options.gestureSensitivity ?? DEFAULT_GESTURE_SENSITIVITY,
+		gestureSnapVelocityImpact:
+			options.gestureSnapVelocityImpact ?? DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
+		gestureSnapLocked: options.gestureSnapLocked ?? DEFAULT_GESTURE_SNAP_LOCKED,
+		gestureReleaseVelocityScale:
+			options.gestureReleaseVelocityScale ??
+			DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
+		transitionSpec: options.transitionSpec,
+	};
+};
+
+function resolvePolicySheetScrollGestureBehavior(
+	options: GesturePolicyOptions,
+): SheetScrollGestureBehavior {
+	"worklet";
+	const explicitBehavior = options.sheetScrollGestureBehavior;
+	if (explicitBehavior) {
+		return explicitBehavior;
+	}
+
+	const legacyBehavior = options.expandViaScrollView;
+	if (legacyBehavior !== undefined) {
+		return legacyBehavior ? "expand-and-collapse" : "collapse-only";
+	}
+
+	return DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR;
+}
+
+const resolvePinchDirections = (
+	gestureDirection: NonNullable<ScreenTransitionConfig["gestureDirection"]>,
+	hasSnapPoints: boolean,
+) => {
+	"worklet";
+	const pinchDirections = getPinchGestureDirections(gestureDirection);
+	const snapDirections = hasSnapPoints
+		? getSnapPinchDirectionConfig(gestureDirection)
+		: null;
+
+	if (snapDirections) {
+		return {
+			snapDirections,
+			pinchInEnabled: true,
+			pinchOutEnabled: true,
+		};
+	}
+
+	return {
+		snapDirections,
+		pinchInEnabled: pinchDirections.includes("pinch-in"),
+		pinchOutEnabled: pinchDirections.includes("pinch-out"),
+	};
+};
+
+export const resolveGestureCanDismiss = ({
+	isFirstKey,
+	gestureEnabled,
+}: {
+	isFirstKey: boolean;
+	gestureEnabled?: boolean;
+}) => {
+	"worklet";
+	return Boolean(isFirstKey ? false : gestureEnabled);
+};
+
+export const resolveGestureCanTrack = ({
+	isFirstKey,
+	canDismiss,
+	hasSnapPoints,
+	allowDisabledGestureTracking,
+}: {
+	isFirstKey: boolean;
+	canDismiss: boolean;
+	hasSnapPoints: boolean;
+	allowDisabledGestureTracking?: boolean;
+}) => {
+	"worklet";
+	if (isFirstKey) {
+		return false;
+	}
+
+	if (canDismiss) {
+		return true;
+	}
+
+	if (hasSnapPoints) {
+		return true;
+	}
+
+	return allowDisabledGestureTracking === true;
+};
+
+export const resolvePanPolicy = (
+	options: GesturePolicyOptions,
+	hasSnapPoints: boolean,
+): PanGesturePolicy => {
+	"worklet";
+	const gestureDirection = resolveGestureDirection(options);
+	const hasPanDirection = getPanGestureDirections(gestureDirection).length > 0;
+
+	return {
+		enabled: hasPanDirection,
+		gestureDirection,
+		panActivationDirections: getPanActivationDirections({
+			gestureDirection,
+			hasSnapPoints,
+		}),
+		snapAxisDirections: getPanSnapAxisDirections(gestureDirection),
+		...resolveCommonGesturePolicy(options),
+		gestureVelocityImpact:
+			options.gestureVelocityImpact ?? DEFAULT_GESTURE_VELOCITY_IMPACT,
+		gestureActivationArea:
+			options.gestureActivationArea ?? DEFAULT_GESTURE_ACTIVATION_AREA,
+		sheetScrollGestureBehavior:
+			resolvePolicySheetScrollGestureBehavior(options),
+		gestureResponseDistance: options.gestureResponseDistance,
+	};
+};
+
+export const resolvePinchPolicy = (
+	options: GesturePolicyOptions,
+	hasSnapPoints: boolean,
+): PinchGesturePolicy => {
+	"worklet";
+	const gestureDirection = resolveGestureDirection(options);
+	const pinchDirections = resolvePinchDirections(
+		gestureDirection,
+		hasSnapPoints,
+	);
+
+	return {
+		enabled: pinchDirections.pinchInEnabled || pinchDirections.pinchOutEnabled,
+		gestureDirection,
+		...pinchDirections,
+		...resolveCommonGesturePolicy(options),
+	};
+};
+
+export const resolveGestureParticipation = ({
+	options,
+	isFirstKey,
+	gestureContext,
+}: {
+	options: GesturePolicyOptions;
+	isFirstKey: boolean;
+	gestureContext: GestureContextType | null;
+}): ScreenGestureParticipation => {
+	const canDismiss = resolveGestureCanDismiss({
+		isFirstKey,
+		gestureEnabled: options.gestureEnabled,
+	});
+	const effectiveSnapPoints = validateSnapPoints({
+		snapPoints: options.snapPoints,
+		canDismiss,
+	});
+	const canTrackGesture = resolveGestureCanTrack({
+		isFirstKey,
+		canDismiss,
+		hasSnapPoints: effectiveSnapPoints.hasSnapPoints,
+		allowDisabledGestureTracking:
+			options.experimental_allowDisabledGestureTracking,
+	});
+	const claimedDirections = computeClaimedDirections(
+		canTrackGesture,
+		options.gestureDirection,
+		effectiveSnapPoints.hasSnapPoints,
+	);
+
+	return {
+		isFirstKey,
+		canDismiss,
+		canTrackGesture,
+		effectiveSnapPoints,
+		claimedDirections,
+		ownershipStatus: resolveOwnership(claimedDirections, gestureContext),
+	};
+};
+
+export const resolveScreenGestureConfig = ({
+	options,
+	isFirstKey,
+	gestureContext,
+}: {
+	options: ScreenTransitionConfig;
+	isFirstKey: boolean;
+	gestureContext: GestureContextType | null;
+}): ScreenGestureConfig => {
+	const participation = resolveGestureParticipation({
+		options,
+		isFirstKey,
+		gestureContext,
+	});
+	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
+
+	return {
+		participation,
+		pan: resolvePanPolicy(options, hasSnapPoints),
+		pinch: resolvePinchPolicy(options, hasSnapPoints),
+	};
+};
+
+function resolveRuntimeCanDismiss(
+	participation: Pick<ScreenGestureParticipation, "isFirstKey" | "canDismiss">,
+	options: GesturePolicyOptions,
+) {
+	"worklet";
+	if (participation.isFirstKey) {
+		return false;
+	}
+
+	const gestureEnabled = options.gestureEnabled;
+	if (gestureEnabled === false) {
+		return false;
+	}
+
+	if (gestureEnabled === true) {
+		return true;
+	}
+
+	return participation.canDismiss;
+}
+
+function resolveRuntimeCanTrackGesture(
+	participation: Pick<
+		ScreenGestureParticipation,
+		"isFirstKey" | "canTrackGesture" | "effectiveSnapPoints"
+	>,
+	options: GesturePolicyOptions,
+) {
+	"worklet";
+	if (participation.isFirstKey) {
+		return false;
+	}
+
+	if (options.experimental_allowDisabledGestureTracking === true) {
+		return true;
+	}
+
+	const gestureEnabled = options.gestureEnabled;
+	if (gestureEnabled === true) {
+		return true;
+	}
+
+	if (gestureEnabled === false) {
+		return participation.effectiveSnapPoints.hasSnapPoints;
+	}
+
+	return participation.canTrackGesture;
+}
+
+export const resolveRuntimeGestureParticipation = ({
+	participation,
+	options,
+}: {
+	participation: ScreenGestureParticipation;
+	options: GesturePolicyOptions;
+}): ScreenGestureParticipation => {
+	"worklet";
+	const canDismiss = resolveRuntimeCanDismiss(participation, options);
+	const canTrackGesture = resolveRuntimeCanTrackGesture(participation, options);
+
+	return {
+		...participation,
+		canDismiss,
+		canTrackGesture,
+	};
+};

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

@@ -0,0 +1,43 @@
+import type { TransitionSpec } from "../../../../types/animation.types";
+import { resolveSnapTransitionSpec } from "../../../../utils/animation/resolve-snap-transition-spec";
+
+export const getProgressVelocityTowardTarget = ({
+	handoffVelocity,
+	target,
+	currentProgress,
+}: {
+	handoffVelocity: number;
+	target: number;
+	currentProgress: number;
+}) => {
+	"worklet";
+	const progressDirection = Math.sign(target - currentProgress);
+
+	if (progressDirection === 0) {
+		return 0;
+	}
+
+	return progressDirection * Math.abs(handoffVelocity);
+};
+
+export const resolveGestureSnapTransitionSpec = ({
+	transitionSpec,
+	shouldDismiss,
+	target,
+	currentProgress,
+}: {
+	transitionSpec: TransitionSpec | undefined;
+	shouldDismiss: boolean;
+	target: number;
+	currentProgress: number;
+}) => {
+	"worklet";
+	if (shouldDismiss) {
+		return transitionSpec;
+	}
+
+	return resolveSnapTransitionSpec(
+		transitionSpec,
+		target < currentProgress ? "collapse" : "expand",
+	);
+};

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

@@ -0,0 +1,74 @@
+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";
+
+type ResetSpringSpec = AnimationConfig & { 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;
+};
+
+export const getGestureResetSpec = (
+	spec?: AnimationConfig,
+	velocity?: number,
+): AnimationConfig | undefined => {
+	"worklet";
+
+	if (!isResetSpringSpec(spec)) {
+		return spec;
+	}
+
+	const { velocity: _velocity, ...resetSpec } = spec;
+
+	if (typeof velocity !== "number") {
+		return resetSpec;
+	}
+
+	return { ...resetSpec, velocity };
+};
+
+export const animateResetValue = (
+	value: SharedValue<number>,
+	toValue: number,
+	config: AnimationConfig | undefined,
+	onFinished: () => void,
+) => {
+	"worklet";
+	value.set(
+		animate(toValue, config, (finished) => {
+			"worklet";
+			if (finished) {
+				onFinished();
+			}
+		}),
+	);
+};
+
+export const clearGestureSettlingIfResting = (
+	gestures: GestureStoreMap,
+	isResting: boolean,
+) => {
+	"worklet";
+	if (!isResting) {
+		return;
+	}
+
+	gestures.active.set(null);
+	gestures.direction.set(null);
+	gestures.settling.set(FALSE);
+};

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

@@ -0,0 +1,76 @@
+import type { ScreenOptionsSnapshot } from "../../options";
+import type {
+	GesturePolicy,
+	GestureRuntime,
+	PanGesturePolicy,
+	PanGestureRuntime,
+	PinchGesturePolicy,
+	PinchGestureRuntime,
+} from "../types";
+import type { GesturePolicyOptions } from "./policy";
+import {
+	resolvePanPolicy,
+	resolvePinchPolicy,
+	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,
+) => TPolicy;
+
+const resolveRuntime = <TPolicy extends GesturePolicy>(
+	runtime: GestureRuntime<TPolicy>,
+	screenOptions: ScreenOptionsSnapshot,
+	resolvePolicy: RuntimePolicyResolver<TPolicy>,
+): GestureRuntime<TPolicy> => {
+	"worklet";
+	const participation = resolveRuntimeGestureParticipation({
+		participation: runtime.participation,
+		options: screenOptions,
+	});
+	const options = resolveRuntimeOptions(runtime.policy, screenOptions);
+	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
+
+	return {
+		...runtime,
+		participation,
+		policy: resolvePolicy(options, hasSnapPoints),
+	};
+};
+
+export const resolvePanRuntime = (
+	runtime: PanGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+): PanGestureRuntime => {
+	"worklet";
+	return resolveRuntime<PanGesturePolicy>(
+		runtime,
+		screenOptions,
+		resolvePanPolicy,
+	);
+};
+
+export const resolvePinchRuntime = (
+	runtime: PinchGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+): PinchGestureRuntime => {
+	"worklet";
+	return resolveRuntime<PinchGesturePolicy>(
+		runtime,
+		screenOptions,
+		resolvePinchPolicy,
+	);
+};