react-native-screen-transitions 3.7.1 → 3.8.0-beta.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/scroll-coordination/index.ts

@@ -1 +1,2 @@
+export { ScrollMetadataOwnerProvider } from "./scroll-metadata-owner";
 export { useScrollGestureCoordination } from "./use-scroll-gesture-coordination";

package/src/shared/providers/screen/gestures/scroll-coordination/scroll-metadata-owner.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode, useMemo } from "react";
+import createProvider from "../../../../utils/create-provider";
+import type { ScrollGestureAxis } from "../types";
+
+type ScrollMetadataOwnerContextValue = Record<ScrollGestureAxis, boolean>;
+
+interface ScrollMetadataOwnerProviderProps {
+	children: ReactNode;
+	value: ScrollMetadataOwnerContextValue;
+}
+
+const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
+	vertical: false,
+	horizontal: false,
+};
+
+const {
+	ScrollMetadataOwnerProvider,
+	useScrollMetadataOwnerContext: useMaybeScrollMetadataOwnerContext,
+} = createProvider("ScrollMetadataOwner", { guarded: false })<
+	ScrollMetadataOwnerProviderProps,
+	ScrollMetadataOwnerContextValue
+>(({ children, value }) => ({ children, value }));
+
+export const useScrollMetadataOwnerContext = () =>
+	useMaybeScrollMetadataOwnerContext() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
+
+export const useScrollMetadataOwnerProviderValue = (
+	axis: ScrollGestureAxis,
+) => {
+	const parent = useScrollMetadataOwnerContext();
+
+	return useMemo(() => {
+		if (parent[axis]) return parent;
+
+		return {
+			...parent,
+			[axis]: true,
+		};
+	}, [axis, parent]);
+};
+
+export { ScrollMetadataOwnerProvider };

package/src/shared/providers/screen/gestures/scroll-coordination/update-scroll-gesture-state.ts

@@ -2,14 +2,27 @@ import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
 	ScrollGestureState,
+	ScrollMetadataState,
 } from "../types";
 
+function createScrollGestureAxisState(): ScrollGestureAxisState {
+	"worklet";
+	return { offset: 0, contentSize: 0, layoutSize: 0, isTouched: false };
+}
+
 const createScrollGestureState = (): ScrollGestureState => {
 	"worklet";
 	return {
-		vertical: { offset: 0, contentSize: 0, layoutSize: 0 },
-		horizontal: { offset: 0, contentSize: 0, layoutSize: 0 },
-		isTouched: false,
+		vertical: createScrollGestureAxisState(),
+		horizontal: createScrollGestureAxisState(),
+	};
+};
+
+const createScrollMetadataState = (): ScrollMetadataState => {
+	"worklet";
+	return {
+		vertical: null,
+		horizontal: null,
 	};
 };
 
@@ -37,8 +50,50 @@ export const updateScrollGestureAxisState = (
 	}
 
 	if (patch.isTouched !== undefined) {
-		nextState.isTouched = patch.isTouched;
+		axisState.isTouched = patch.isTouched;
+	}
+
+	return nextState;
+};
+
+export const updateScrollMetadataAxisState = (
+	state: ScrollMetadataState | null,
+	axis: ScrollGestureAxis,
+	patch: Partial<ScrollGestureAxisState> & { isTouched?: boolean },
+): ScrollMetadataState => {
+	"worklet";
+
+	const nextState = state ?? createScrollMetadataState();
+	const axisState = nextState[axis] ?? createScrollGestureAxisState();
+	nextState[axis] = axisState;
+
+	if (patch.offset !== undefined) {
+		axisState.offset = patch.offset;
+	}
+
+	if (patch.contentSize !== undefined) {
+		axisState.contentSize = patch.contentSize;
+	}
+
+	if (patch.layoutSize !== undefined) {
+		axisState.layoutSize = patch.layoutSize;
+	}
+
+	if (patch.isTouched !== undefined) {
+		axisState.isTouched = patch.isTouched;
 	}
 
 	return nextState;
 };
+
+export const clearScrollMetadataAxisState = (
+	state: ScrollMetadataState | null,
+	axis: ScrollGestureAxis,
+): ScrollMetadataState | null => {
+	"worklet";
+	if (!state) return null;
+
+	state[axis] = null;
+
+	return state.vertical || state.horizontal ? state : null;
+};

package/src/shared/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useLayoutEffect, useMemo, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { Gesture, type GestureType } from "react-native-gesture-handler";
 import {
@@ -9,13 +9,23 @@ import {
 import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-value-state";
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import { AnimationStore } from "../../../../stores/animation.store";
+import { ScrollStore } from "../../../../stores/scroll.store";
 import { useGestureContext } from "../gestures.provider";
 import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
 	ScrollGestureState,
+	ScrollMetadataState,
 } from "../types";
-import { updateScrollGestureAxisState } from "./update-scroll-gesture-state";
+import {
+	useScrollMetadataOwnerContext,
+	useScrollMetadataOwnerProviderValue,
+} from "./scroll-metadata-owner";
+import {
+	clearScrollMetadataAxisState,
+	updateScrollGestureAxisState,
+	updateScrollMetadataAxisState,
+} from "./update-scroll-gesture-state";
 import { walkUpScrollGestureCoordination } from "./walk-up-scroll-gesture-coordination";
 
 interface ScrollGestureCoordinationProps {
@@ -41,6 +51,31 @@ const modifyScrollGestureAxisState = (
 	});
 };
 
+const modifyScrollMetadataAxisState = (
+	scrollState: SharedValue<ScrollMetadataState | null>,
+	axis: ScrollGestureAxis,
+	patch: ScrollGesturePatch,
+) => {
+	"worklet";
+
+	scrollState.modify(<T extends ScrollMetadataState | null>(state: T): T => {
+		"worklet";
+		return updateScrollMetadataAxisState(state, axis, patch) as T;
+	});
+};
+
+const clearScrollMetadataAxis = (
+	scrollState: SharedValue<ScrollMetadataState | null>,
+	axis: ScrollGestureAxis,
+) => {
+	"worklet";
+
+	scrollState.modify(<T extends ScrollMetadataState | null>(state: T): T => {
+		"worklet";
+		return clearScrollMetadataAxisState(state, axis) as T;
+	});
+};
+
 /**
  * Returns scroll handlers and a native gesture for ScrollView coordination.
  *
@@ -56,11 +91,63 @@ export const useScrollGestureCoordination = (
 	const context = useGestureContext();
 	const scrollDirection = props.direction ?? "vertical";
 
+	const metadataOwnerContext = useScrollMetadataOwnerContext();
+	const metadataOwnerProviderValue =
+		useScrollMetadataOwnerProviderValue(scrollDirection);
+	const isFirstMetadataWriterInTree = !metadataOwnerContext[scrollDirection];
+	const [metadataWriterId] = useState(() =>
+		ScrollStore.createMetadataWriterId(),
+	);
+	const [writesMetadata, setWritesMetadata] = useState(false);
+
 	const { scrollStates, panGestures, pinchGestures, ownerRouteKeys } = useMemo(
 		() => walkUpScrollGestureCoordination(context, scrollDirection),
 		[context, scrollDirection],
 	);
 
+	const routeKey = context?.routeKey;
+	const metadataState = useMemo(
+		() => (routeKey ? ScrollStore.getValue(routeKey, "metadata") : null),
+		[routeKey],
+	);
+
+	useLayoutEffect(() => {
+		if (!routeKey || !isFirstMetadataWriterInTree) {
+			setWritesMetadata(false);
+			return;
+		}
+
+		const claimed = ScrollStore.claimMetadataWriter(
+			routeKey,
+			scrollDirection,
+			metadataWriterId,
+		);
+		setWritesMetadata(claimed);
+
+		return () => {
+			const released = ScrollStore.releaseMetadataWriter(
+				routeKey,
+				scrollDirection,
+				metadataWriterId,
+			);
+
+			if (!released || !metadataState) return;
+
+			if (!ScrollStore.hasMetadataWriters(routeKey)) {
+				metadataState.set(null);
+				return;
+			}
+
+			clearScrollMetadataAxis(metadataState, scrollDirection);
+		};
+	}, [
+		routeKey,
+		scrollDirection,
+		isFirstMetadataWriterInTree,
+		metadataState,
+		metadataWriterId,
+	]);
+
 	const ownerClosingValues = useMemo(
 		() =>
 			ownerRouteKeys.map((routeKey) =>
@@ -92,6 +179,12 @@ export const useScrollGestureCoordination = (
 					isTouched: true,
 				});
 			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					isTouched: true,
+				});
+			}
 		};
 
 		const clearIsTouched = () => {
@@ -101,6 +194,12 @@ export const useScrollGestureCoordination = (
 					isTouched: false,
 				});
 			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					isTouched: false,
+				});
+			}
 		};
 
 		let gesture = Gesture.Native()
@@ -121,12 +220,17 @@ export const useScrollGestureCoordination = (
 		}
 
 		return gesture;
-	}, [panGestures, pinchGestures, scrollStates, scrollDirection]);
+	}, [
+		panGestures,
+		pinchGestures,
+		scrollStates,
+		scrollDirection,
+		writesMetadata,
+		metadataState,
+	]);
 
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: (event) => {
-			if (scrollStates.length === 0) return;
-
 			const offset =
 				scrollDirection === "horizontal"
 					? event.contentOffset.x
@@ -135,7 +239,14 @@ export const useScrollGestureCoordination = (
 			for (const scrollState of scrollStates) {
 				modifyScrollGestureAxisState(scrollState, scrollDirection, {
 					offset,
-					isTouched: scrollState.get()?.isTouched ?? true,
+					isTouched: scrollState.get()?.[scrollDirection].isTouched ?? true,
+				});
+			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					offset,
+					isTouched: metadataState.get()?.[scrollDirection]?.isTouched ?? true,
 				});
 			}
 		},
@@ -144,7 +255,6 @@ export const useScrollGestureCoordination = (
 	const onContentSizeChange = useStableCallback(
 		(width: number, height: number) => {
 			props.onContentSizeChange?.(width, height);
-			if (scrollStates.length === 0) return;
 
 			const contentSize = scrollDirection === "horizontal" ? width : height;
 
@@ -153,12 +263,17 @@ export const useScrollGestureCoordination = (
 					contentSize,
 				});
 			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					contentSize,
+				});
+			}
 		},
 	);
 
 	const onLayout = useStableCallback((event: LayoutChangeEvent) => {
 		props.onLayout?.(event);
-		if (scrollStates.length === 0) return;
 
 		const { width, height } = event.nativeEvent.layout;
 		const layoutSize = scrollDirection === "horizontal" ? width : height;
@@ -168,6 +283,12 @@ export const useScrollGestureCoordination = (
 				layoutSize,
 			});
 		}
+
+		if (writesMetadata && metadataState) {
+			modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+				layoutSize,
+			});
+		}
 	});
 
 	return {
@@ -176,5 +297,6 @@ export const useScrollGestureCoordination = (
 		onContentSizeChange,
 		onLayout,
 		nativeGesture,
+		metadataOwnerProviderValue,
 	};
 };