react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.1

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

@@ -1,82 +0,0 @@
-import { useMemo } from "react";
-import { Gesture } from "react-native-gesture-handler";
-import { useSharedValue } from "react-native-reanimated";
-import { ScrollStore } from "../../../stores/scroll.store";
-import createProvider from "../../../utils/create-provider";
-import { useDescriptorsStore } from "../descriptors";
-import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
-import { useRegisterGestureOwnership } from "./ownership/use-register-gesture-ownership";
-import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
-import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
-import {
-	type GestureCompositionOwner,
-	type GestureContextType,
-	NO_GESTURE_OWNERS,
-	type ScreenGestureSource,
-} from "./types";
-
-interface ScreenGestureProviderProps {
-	children: React.ReactNode;
-}
-
-const createScreenGestureProvider = createProvider("ScreenGesture", {
-	global: true,
-})<ScreenGestureProviderProps, GestureContextType>;
-
-export const {
-	ScreenGestureProvider,
-	useOptionalScreenGestureStore,
-	useScreenGestureStore,
-}: ReturnType<typeof createScreenGestureProvider> = createScreenGestureProvider(
-	({ children }) => {
-		const currentScreenKey = useDescriptorsStore(
-			(store) => store.derivations.currentScreenKey,
-		);
-		const gestureConfig = useScreenGestureConfig();
-		const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
-		const gestureOwners = useSharedValue({ ...NO_GESTURE_OWNERS });
-		const gestureCompositionOwner =
-			useSharedValue<GestureCompositionOwner>(null);
-		const panGesture = useBuildPanGesture({
-			scrollState,
-			gestureConfig,
-			gestureOwners,
-			gestureCompositionOwner,
-		});
-		const pinchGesture = useBuildPinchGesture({
-			gestureConfig,
-			gestureCompositionOwner,
-		});
-		const detectorGesture = useMemo(
-			() => Gesture.Simultaneous(panGesture, pinchGesture),
-			[panGesture, pinchGesture],
-		);
-		const source = useMemo<ScreenGestureSource>(
-			() => ({
-				routeKey: currentScreenKey,
-				detectorGesture,
-				panGesture,
-				pinchGesture,
-				scrollState,
-			}),
-			[
-				currentScreenKey,
-				detectorGesture,
-				panGesture,
-				pinchGesture,
-				scrollState,
-			],
-		);
-		useRegisterGestureOwnership({
-			claimedDirections: gestureConfig.participation.claimedDirections,
-			owners: gestureOwners,
-			source,
-		});
-
-		return {
-			key: currentScreenKey,
-			value: source,
-			children,
-		};
-	},
-);

package/src/providers/screen/gestures/hooks/use-gesture-sensitivity.ts

@@ -1,132 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { useSharedValue } from "react-native-reanimated";
-import type { ScreenOptionsContextValue } from "../../options";
-import {
-	applyGestureSensitivity,
-	normalizePinchScale,
-} from "../shared/physics";
-import type { PanGestureEvent, PinchGestureEvent } from "../types";
-
-export interface GestureSensitivityRawChangeState {
-	previousRawValue: SharedValue<number>;
-	adjustedValue: SharedValue<number>;
-}
-
-export const applyGestureSensitivityToRawChange = (
-	rawValue: number,
-	sensitivity: number,
-	state: GestureSensitivityRawChangeState,
-) => {
-	"worklet";
-	const rawChange = rawValue - state.previousRawValue.get();
-
-	// gestureSensitivity can change mid-gesture, so apply it to the latest
-	// raw movement only instead of rescaling the recognizer's cumulative value.
-	const adjustedValue =
-		state.adjustedValue.get() + applyGestureSensitivity(rawChange, sensitivity);
-
-	state.previousRawValue.set(rawValue);
-	state.adjustedValue.set(adjustedValue);
-
-	return adjustedValue;
-};
-
-const resetChangeState = (state: GestureSensitivityRawChangeState) => {
-	"worklet";
-	state.previousRawValue.set(0);
-	state.adjustedValue.set(0);
-};
-
-const useBuildSensitivityChangeState = () => {
-	const previousRawValue = useSharedValue(0);
-	const adjustedValue = useSharedValue(0);
-
-	return useMemo<GestureSensitivityRawChangeState>(
-		() => ({
-			previousRawValue,
-			adjustedValue,
-		}),
-		[previousRawValue, adjustedValue],
-	);
-};
-
-export const usePanGestureSensitivity = (
-	screenOptions: ScreenOptionsContextValue,
-) => {
-	const xSensitivityState = useBuildSensitivityChangeState();
-	const ySensitivityState = useBuildSensitivityChangeState();
-
-	const resetSensitivity = useCallback(() => {
-		"worklet";
-		resetChangeState(xSensitivityState);
-		resetChangeState(ySensitivityState);
-	}, [xSensitivityState, ySensitivityState]);
-
-	const withSensitivity = useCallback(
-		(event: PanGestureEvent): PanGestureEvent => {
-			"worklet";
-			const sensitivity = screenOptions.get().gestureSensitivity;
-
-			return {
-				...event,
-				translationX: applyGestureSensitivityToRawChange(
-					event.translationX,
-					sensitivity,
-					xSensitivityState,
-				),
-				translationY: applyGestureSensitivityToRawChange(
-					event.translationY,
-					sensitivity,
-					ySensitivityState,
-				),
-			};
-		},
-		[screenOptions, xSensitivityState, ySensitivityState],
-	);
-
-	return useMemo(
-		() => ({
-			withSensitivity,
-			resetSensitivity,
-		}),
-		[withSensitivity, resetSensitivity],
-	);
-};
-
-export const usePinchGestureSensitivity = (
-	screenOptions: ScreenOptionsContextValue,
-) => {
-	const scaleSensitivityState = useBuildSensitivityChangeState();
-
-	const resetSensitivity = useCallback(() => {
-		"worklet";
-		resetChangeState(scaleSensitivityState);
-	}, [scaleSensitivityState]);
-
-	const withSensitivity = useCallback(
-		(event: PinchGestureEvent): PinchGestureEvent => {
-			"worklet";
-			const sensitivity = screenOptions.get().gestureSensitivity;
-			const normScale = applyGestureSensitivityToRawChange(
-				normalizePinchScale(event.scale),
-				sensitivity,
-				scaleSensitivityState,
-			);
-
-			return {
-				...event,
-				scale: 1 + normScale,
-			};
-		},
-		[screenOptions, scaleSensitivityState],
-	);
-
-	return useMemo(
-		() => ({
-			withSensitivity,
-			resetSensitivity,
-		}),
-		[withSensitivity, resetSensitivity],
-	);
-};

package/src/providers/screen/gestures/hooks/use-screen-gesture-config.ts

@@ -1,19 +0,0 @@
-import { useMemo } from "react";
-import { useDescriptorsStore } from "../../descriptors";
-import { resolveScreenGestureConfig } from "../shared/policy";
-import type { ScreenGestureConfig } from "../types";
-
-export function useScreenGestureConfig(): ScreenGestureConfig {
-	const options = useDescriptorsStore((store) => store.options);
-	const isFirstKey = useDescriptorsStore(
-		(store) => store.derivations.isFirstKey,
-	);
-	return useMemo(
-		() =>
-			resolveScreenGestureConfig({
-				options,
-				isFirstKey,
-			}),
-		[isFirstKey, options],
-	);
-}

package/src/providers/screen/gestures/hooks/use-screen-gesture.ts

@@ -1,32 +0,0 @@
-import { useResolvedTransitionKey } from "../../topology";
-import { useOptionalScreenGestureStore } from "../gestures.provider";
-
-export type ScreenGestureTarget = { depth: number };
-
-/**
- * Returns a screen navigation pan gesture.
- * Use this to coordinate child gestures with the navigation gesture.
- *
- * @example
- * ```tsx
- * const screenGesture = useScreenGesture();
- *
- * const myPanGesture = Gesture.Pan()
- *   .requireExternalGestureToFail(screenGesture)
- *   .onUpdate((...) => {});
- * ```
- */
-export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const localGesture = useOptionalScreenGestureStore();
-	const usesLocalStore = target === undefined || target.depth === 0;
-	const screenKey = useResolvedTransitionKey(
-		localGesture?.routeKey ?? null,
-		target,
-	);
-	const keyedGesture = useOptionalScreenGestureStore(
-		usesLocalStore ? null : screenKey,
-		(store) => store.panGesture,
-	);
-
-	return usesLocalStore ? (localGesture?.panGesture ?? null) : keyedGesture;
-};

package/src/providers/screen/gestures/hooks/use-stable-runtime-config.ts

@@ -1,44 +0,0 @@
-import { useLayoutEffect, useMemo } from "react";
-import { type SharedValue, useSharedValue } from "react-native-reanimated";
-import { AnimationStore } from "../../../../stores/animation.store";
-import { GestureStore } from "../../../../stores/gesture.store";
-import { SystemStore } from "../../../../stores/system.store";
-import { useDescriptorsStore } from "../../descriptors";
-import type { GesturePolicy, GestureRuntime } from "../types";
-
-type RuntimeConfigInput<TPolicy extends GesturePolicy> = Omit<
-	GestureRuntime<TPolicy>,
-	"stores"
->;
-
-export function useStableRuntimeConfig<TPolicy extends GesturePolicy>(
-	runtimeConfigInput: RuntimeConfigInput<TPolicy>,
-): SharedValue<GestureRuntime<TPolicy>> {
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const { participation, policy } = runtimeConfigInput;
-
-	const stores = useMemo(() => {
-		return {
-			gestures: GestureStore.getBag(currentScreenKey),
-			animations: AnimationStore.getBag(currentScreenKey),
-			system: SystemStore.getBag(currentScreenKey),
-		};
-	}, [currentScreenKey]);
-
-	const runtimeConfig = useMemo<GestureRuntime<TPolicy>>(() => {
-		return {
-			participation,
-			policy,
-			stores,
-		};
-	}, [participation, policy, stores]);
-	const stableRuntimeConfig = useSharedValue(runtimeConfig);
-
-	useLayoutEffect(() => {
-		stableRuntimeConfig.set(runtimeConfig);
-	}, [stableRuntimeConfig, runtimeConfig]);
-
-	return stableRuntimeConfig;
-}

package/src/providers/screen/gestures/index.tsx

@@ -1,11 +0,0 @@
-export {
-	ScreenGestureProvider,
-	useOptionalScreenGestureStore,
-	useScreenGestureStore,
-} from "./gestures.provider";
-export type {
-	GestureContextType,
-	ScrollGestureAxis,
-	ScrollGestureAxisState,
-	ScrollGestureState,
-} from "./types";

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

@@ -1,98 +0,0 @@
-import { DEFAULT_GESTURE_DIRECTION } from "../../../../constants";
-import type {
-	GestureDirectionOption,
-	PanGestureDirection,
-} from "../../../../types/gesture.types";
-import {
-	type ClaimedDirections,
-	type Direction,
-	NO_CLAIMS,
-} from "../../../../types/ownership.types";
-import { getPanGestureDirections } from "../shared/directions";
-
-const createClaimSet = (): ClaimedDirections => ({
-	vertical: false,
-	"vertical-inverted": false,
-	horizontal: false,
-	"horizontal-inverted": false,
-});
-
-const normalizePanGestureDirections = (
-	gestureDirection: GestureDirectionOption | undefined,
-) => {
-	const direction = gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
-	return getPanGestureDirections(direction);
-};
-
-const claimPanDirection = (
-	claims: ClaimedDirections,
-	direction: PanGestureDirection,
-) => {
-	if (direction === "bidirectional") {
-		claims.vertical = true;
-		claims["vertical-inverted"] = true;
-		claims.horizontal = true;
-		claims["horizontal-inverted"] = true;
-		return;
-	}
-
-	claims[direction as Direction] = true;
-};
-
-const expandSnapPointAxisClaims = (claims: ClaimedDirections) => {
-	const hasVerticalAxis = claims.vertical || claims["vertical-inverted"];
-	const hasHorizontalAxis = claims.horizontal || claims["horizontal-inverted"];
-
-	if (hasVerticalAxis) {
-		claims.vertical = true;
-		claims["vertical-inverted"] = true;
-	}
-
-	if (hasHorizontalAxis) {
-		claims.horizontal = true;
-		claims["horizontal-inverted"] = true;
-	}
-};
-
-/**
- * Computes which directions a screen claims ownership of.
- *
- * A screen claims a direction when:
- * 1. direction claiming is enabled AND
- * 2. gestureDirection includes that direction
- *
- * For snap points, both directions on each configured pan axis are claimed.
- * The first direction on an axis collapses; its inverse expands.
- *
- * @param canClaimDirections - Whether this screen can own gesture directions
- * @param gestureDirection - The gesture direction(s) configured for this screen
- * @param hasSnapPoints - Whether this screen has snap points configured
- * @returns The claimed directions for this screen
- */
-export function computeClaimedDirections(
-	canClaimDirections: boolean,
-	gestureDirection: GestureDirectionOption | undefined,
-	hasSnapPoints: boolean,
-): ClaimedDirections {
-	if (!canClaimDirections) {
-		return NO_CLAIMS;
-	}
-
-	const directions = normalizePanGestureDirections(gestureDirection);
-
-	if (directions.length === 0) {
-		return NO_CLAIMS;
-	}
-
-	const claims = createClaimSet();
-
-	for (const dir of directions) {
-		claimPanDirection(claims, dir);
-	}
-
-	if (hasSnapPoints) {
-		expandSnapPointAxisClaims(claims);
-	}
-
-	return claims;
-}

package/src/providers/screen/gestures/ownership/gesture-ownership-coordinator.ts

@@ -1,252 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type {
-	ClaimedDirections,
-	Direction,
-} from "../../../../types/ownership.types";
-import { DIRECTIONS } from "../../../../types/ownership.types";
-import { screenTopology } from "../../topology";
-import type { ScreenTopology } from "../../topology/types";
-import type {
-	GestureOwnerMap,
-	PanGesture,
-	PinchGesture,
-	ScreenGestureSource,
-	ScrollGestureAxis,
-	ScrollGestureState,
-} from "../types";
-
-export type GestureOwnershipRegistration = {
-	screenKey: string;
-	source: ScreenGestureSource;
-	claimedDirections: ClaimedDirections;
-	effectiveClaimedDirections: ClaimedDirections;
-	owners: SharedValue<GestureOwnerMap>;
-};
-
-export type ScrollGestureCoordination = {
-	panGestures: PanGesture[];
-	pinchGestures: PinchGesture[];
-	scrollStates: SharedValue<ScrollGestureState | null>[];
-	ownerRouteKeys: string[];
-};
-
-export type GestureOwnershipCoordinator = {
-	register(registration: GestureOwnershipRegistration): void;
-	unregister(screenKey: string): void;
-	getScrollCoordination(
-		screenKey: string,
-		axis: ScrollGestureAxis,
-	): ScrollGestureCoordination;
-	subscribe(screenKey: string, listener: () => void): () => void;
-};
-
-const EMPTY_SCROLL_COORDINATION: ScrollGestureCoordination = {
-	panGestures: [],
-	pinchGestures: [],
-	scrollStates: [],
-	ownerRouteKeys: [],
-};
-
-const createEmptyOwners = (): GestureOwnerMap => ({
-	vertical: null,
-	"vertical-inverted": null,
-	horizontal: null,
-	"horizontal-inverted": null,
-});
-
-const areOwnersEqual = (left: GestureOwnerMap, right: GestureOwnerMap) =>
-	DIRECTIONS.every((direction) => left[direction] === right[direction]);
-
-const areArraysEqual = <T>(left: readonly T[], right: readonly T[]) =>
-	left.length === right.length &&
-	left.every((value, index) => value === right[index]);
-
-const areScrollCoordinationsEqual = (
-	left: ScrollGestureCoordination,
-	right: ScrollGestureCoordination,
-) =>
-	areArraysEqual(left.panGestures, right.panGestures) &&
-	areArraysEqual(left.pinchGestures, right.pinchGestures) &&
-	areArraysEqual(left.scrollStates, right.scrollStates) &&
-	areArraysEqual(left.ownerRouteKeys, right.ownerRouteKeys);
-
-const getAxisDirections = (
-	axis: ScrollGestureAxis,
-): readonly [Direction, Direction] =>
-	axis === "vertical"
-		? ["vertical", "vertical-inverted"]
-		: ["horizontal", "horizontal-inverted"];
-
-export const createGestureOwnershipCoordinator = (
-	topology: ScreenTopology,
-): GestureOwnershipCoordinator => {
-	const registrations = new Map<string, GestureOwnershipRegistration>();
-	const scrollCache = new Map<
-		string,
-		Record<ScrollGestureAxis, ScrollGestureCoordination>
-	>();
-	const listenersByScreenKey = new Map<string, Set<() => void>>();
-
-	const getNearestAncestorOwner = (screenKey: string, direction: Direction) => {
-		const visited = new Set<string>();
-		let candidate: string | null = screenKey;
-
-		while (candidate && !visited.has(candidate)) {
-			visited.add(candidate);
-			if (registrations.get(candidate)?.claimedDirections[direction]) {
-				return candidate;
-			}
-			candidate = topology.getRelationships(candidate).parentScreenKey;
-		}
-
-		return null;
-	};
-
-	const getDeepestActiveOwner = (screenKey: string, direction: Direction) => {
-		const visited = new Set<string>();
-		let candidate: string | null = screenKey;
-		let owner: string | null = null;
-		let isOrigin = true;
-
-		while (candidate && !visited.has(candidate)) {
-			visited.add(candidate);
-			const registration = registrations.get(candidate);
-			const claims = isOrigin
-				? registration?.claimedDirections
-				: registration?.effectiveClaimedDirections;
-			if (claims?.[direction]) owner = candidate;
-
-			candidate = topology.getRelationships(candidate).activeChildScreenKey;
-			isOrigin = false;
-		}
-
-		return owner;
-	};
-
-	const resolveOwners = (screenKey: string): GestureOwnerMap => {
-		const owners = createEmptyOwners();
-		for (const direction of DIRECTIONS) {
-			owners[direction] =
-				getDeepestActiveOwner(screenKey, direction) ??
-				getNearestAncestorOwner(screenKey, direction);
-		}
-		return owners;
-	};
-
-	const resolveScrollCoordination = (
-		screenKey: string,
-		axis: ScrollGestureAxis,
-	): ScrollGestureCoordination => {
-		const ownerKeys: string[] = [];
-		for (const direction of getAxisDirections(axis)) {
-			const ownerKey = getNearestAncestorOwner(screenKey, direction);
-			if (ownerKey && !ownerKeys.includes(ownerKey)) ownerKeys.push(ownerKey);
-		}
-
-		const panGestures: PanGesture[] = [];
-		const scrollStates: SharedValue<ScrollGestureState | null>[] = [];
-		for (const ownerKey of ownerKeys) {
-			const source = registrations.get(ownerKey)?.source;
-			if (!source) continue;
-			panGestures.push(source.panGesture);
-			scrollStates.push(source.scrollState);
-		}
-
-		const pinchGestures: PinchGesture[] = [];
-		const visited = new Set<string>();
-		let candidate: string | null = screenKey;
-		while (candidate && !visited.has(candidate)) {
-			visited.add(candidate);
-			const pinchGesture = registrations.get(candidate)?.source.pinchGesture;
-			if (pinchGesture && !pinchGestures.includes(pinchGesture)) {
-				pinchGestures.push(pinchGesture);
-			}
-			candidate = topology.getRelationships(candidate).parentScreenKey;
-		}
-
-		return {
-			panGestures,
-			pinchGestures,
-			scrollStates,
-			ownerRouteKeys: ownerKeys,
-		};
-	};
-
-	const notify = (screenKey: string) => {
-		for (const listener of listenersByScreenKey.get(screenKey) ?? []) {
-			listener();
-		}
-	};
-
-	const recompute = () => {
-		for (const [screenKey, registration] of registrations) {
-			const nextOwners = resolveOwners(screenKey);
-			if (!areOwnersEqual(registration.owners.get(), nextOwners)) {
-				registration.owners.set(nextOwners);
-			}
-
-			const previousScroll = scrollCache.get(screenKey);
-			const nextScroll = {
-				vertical: resolveScrollCoordination(screenKey, "vertical"),
-				horizontal: resolveScrollCoordination(screenKey, "horizontal"),
-			};
-			const vertical =
-				previousScroll &&
-				areScrollCoordinationsEqual(
-					previousScroll.vertical,
-					nextScroll.vertical,
-				)
-					? previousScroll.vertical
-					: nextScroll.vertical;
-			const horizontal =
-				previousScroll &&
-				areScrollCoordinationsEqual(
-					previousScroll.horizontal,
-					nextScroll.horizontal,
-				)
-					? previousScroll.horizontal
-					: nextScroll.horizontal;
-			if (
-				!previousScroll ||
-				vertical !== previousScroll.vertical ||
-				horizontal !== previousScroll.horizontal
-			) {
-				scrollCache.set(screenKey, { vertical, horizontal });
-				notify(screenKey);
-			}
-		}
-	};
-
-	topology.subscribeResolution(recompute);
-
-	return {
-		register: (registration) => {
-			registrations.set(registration.screenKey, registration);
-			recompute();
-		},
-		unregister: (screenKey) => {
-			if (!registrations.has(screenKey)) return;
-
-			registrations.delete(screenKey);
-			scrollCache.delete(screenKey);
-			recompute();
-			notify(screenKey);
-		},
-		getScrollCoordination: (screenKey, axis) =>
-			scrollCache.get(screenKey)?.[axis] ?? EMPTY_SCROLL_COORDINATION,
-		subscribe: (screenKey, listener) => {
-			const listeners =
-				listenersByScreenKey.get(screenKey) ?? new Set<() => void>();
-			listeners.add(listener);
-			listenersByScreenKey.set(screenKey, listeners);
-
-			return () => {
-				listeners.delete(listener);
-				if (listeners.size === 0) listenersByScreenKey.delete(screenKey);
-			};
-		},
-	};
-};
-
-export const gestureOwnershipCoordinator =
-	createGestureOwnershipCoordinator(screenTopology);

package/src/providers/screen/gestures/ownership/shadowing-claims.ts

@@ -1,17 +0,0 @@
-import type { ClaimedDirections } from "../../../../types/ownership.types";
-
-export const resolveShadowingClaimDirections = ({
-	isCurrentScreenClosing,
-	currentClaimedDirections,
-	previousClaimedDirections,
-}: {
-	isCurrentScreenClosing: boolean;
-	currentClaimedDirections: ClaimedDirections;
-	previousClaimedDirections: ClaimedDirections;
-}): ClaimedDirections => {
-	if (isCurrentScreenClosing) {
-		return previousClaimedDirections;
-	}
-
-	return currentClaimedDirections;
-};