react-native-screen-transitions 2.0.2 → 2.0.3

package/src/hooks/animation/use-screen-animation.tsx

@@ -0,0 +1,142 @@
+import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import { useWindowDimensions } from "react-native";
+import { type SharedValue, useDerivedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useKeys } from "../../providers/keys";
+import { Animations } from "../../stores/animations";
+import { Bounds } from "../../stores/bounds";
+import { type GestureMap, Gestures } from "../../stores/gestures";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionState,
+} from "../../types/animation";
+import type { BoundEntry } from "../../types/bounds";
+import type { NativeStackDescriptor } from "../../types/navigator";
+import { buildBoundsAccessor } from "../../utils/bounds";
+
+type BuiltState = {
+	progress: SharedValue<number>;
+	closing: SharedValue<number>;
+	animating: SharedValue<number>;
+	gesture: GestureMap;
+	route: RouteProp<ParamListBase>;
+};
+
+const FALLBACK = Object.freeze({
+	progress: 0,
+	closing: 0,
+	animating: 0,
+	gesture: {
+		x: 0,
+		y: 0,
+		normalizedX: 0,
+		normalizedY: 0,
+		isDismissing: 0,
+		isDragging: 0,
+	},
+	bounds: {} as Record<string, BoundEntry>,
+	route: {} as RouteProp<ParamListBase>,
+});
+
+const useBuildScreenTransitionState = (
+	descriptor: NativeStackDescriptor | undefined,
+): BuiltState | undefined => {
+	const key = descriptor?.route.key;
+	if (!key) return undefined;
+	const progress = Animations.getAnimation(key, "progress");
+	const closing = Animations.getAnimation(key, "closing");
+	const animating = Animations.getAnimation(key, "animating");
+	const gesture = Gestures.getRouteGestures(key);
+	const route = descriptor?.route;
+
+	return { progress, closing, animating, gesture, route };
+};
+
+const unwrap = (
+	s: BuiltState | undefined,
+	key: string | undefined,
+): ScreenTransitionState | undefined => {
+	"worklet";
+	return s && key
+		? {
+				progress: s.progress.value ?? 0,
+				closing: s.closing.value ?? 0,
+				animating: s.animating.value ?? 0,
+				gesture: {
+					x: s.gesture.x.value ?? 0,
+					y: s.gesture.y.value ?? 0,
+					normalizedX: s.gesture.normalizedX.value ?? 0,
+					normalizedY: s.gesture.normalizedY.value ?? 0,
+					isDismissing: s.gesture.isDismissing.value ?? 0,
+					isDragging: s.gesture.isDragging.value ?? 0,
+				},
+				bounds: Bounds.getBounds(key) ?? {},
+				route: s.route,
+			}
+		: undefined;
+};
+
+export function _useScreenAnimation() {
+	const {
+		current: currentDescriptor,
+		next: nextDescriptor,
+		previous: previousDescriptor,
+	} = useKeys();
+
+	const dimensions = useWindowDimensions();
+
+	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
+
+	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
+	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
+
+	const insets = useSafeAreaInsets();
+
+	const screenInterpolatorProps = useDerivedValue<ScreenInterpolationProps>(
+		() => {
+			"worklet";
+
+			const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
+			const next = unwrap(nextAnimation, nextDescriptor?.route.key);
+			const current =
+				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
+
+			const progress = current.progress + (next?.progress ?? 0);
+
+			const focused = !next;
+			const activeBoundId = Bounds.getActiveBoundId() || "";
+
+			const bounds = buildBoundsAccessor({
+				activeBoundId,
+				current,
+				previous,
+				next,
+				progress,
+				dimensions,
+			});
+
+			return {
+				layouts: { screen: dimensions },
+				insets,
+				previous,
+				current,
+				next,
+				focused,
+				activeBoundId,
+				progress,
+				bounds,
+			} satisfies ScreenInterpolationProps;
+		},
+	);
+
+	const screenStyleInterpolator =
+		nextDescriptor?.options.screenStyleInterpolator ||
+		currentDescriptor?.options.screenStyleInterpolator;
+
+	return { screenInterpolatorProps, screenStyleInterpolator };
+}
+export function useScreenAnimation() {
+	const { screenInterpolatorProps } = _useScreenAnimation();
+
+	return useDerivedValue(() => screenInterpolatorProps.value);
+}

package/src/hooks/bounds/use-bound-measurer.tsx

@@ -0,0 +1,71 @@
+import { useCallback } from "react";
+import type { View } from "react-native";
+import {
+	type AnimatedRef,
+	measure,
+	type StyleProps,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useKeys } from "../../providers/keys";
+import { Bounds } from "../../stores/bounds";
+import { flattenStyle } from "../../utils/bounds/flatten-styles";
+import { useScreenAnimation } from "../animation/use-screen-animation";
+
+interface BoundMeasurerHookProps {
+	sharedBoundTag: string;
+	animatedRef: AnimatedRef<View>;
+	current: { route: { key: string } };
+	style: StyleProps;
+}
+
+export const useBoundMeasurer = ({
+	sharedBoundTag,
+	animatedRef,
+	current,
+	style,
+}: BoundMeasurerHookProps) => {
+	const { previous } = useKeys();
+	const interpolatorProps = useScreenAnimation();
+	const hasAlreadyMeasured = useSharedValue(false);
+
+	const measureAndSet = useCallback(() => {
+		"worklet";
+		if (!sharedBoundTag) return;
+		const measured = measure(animatedRef);
+		if (measured) {
+			Bounds.setBounds(
+				current.route.key,
+				sharedBoundTag,
+				measured,
+				flattenStyle(style),
+			);
+		}
+	}, [sharedBoundTag, animatedRef, current.route.key, style]);
+
+	const measureOnLayout = useCallback(() => {
+		"worklet";
+		if (!sharedBoundTag || hasAlreadyMeasured.value) return;
+
+		const previousRouteKey = previous?.route.key;
+		if (!previousRouteKey) return;
+
+		const previousBounds = Bounds.getBounds(previousRouteKey);
+		const hasPreviousBoundForTag = previousBounds[sharedBoundTag];
+
+		if (interpolatorProps.value.current.animating && hasPreviousBoundForTag) {
+			measureAndSet();
+			hasAlreadyMeasured.value = true;
+		}
+	}, [
+		measureAndSet,
+		interpolatorProps,
+		sharedBoundTag,
+		previous?.route.key,
+		hasAlreadyMeasured,
+	]);
+
+	return {
+		measureAndSet,
+		measureOnLayout,
+	};
+};

package/src/hooks/gestures/use-build-gestures.tsx

@@ -0,0 +1,369 @@
+import { useCallback, useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import {
+	Gesture,
+	type GestureStateChangeEvent,
+	type GestureTouchEvent,
+	type GestureUpdateEvent,
+	type PanGestureHandlerEventPayload,
+} from "react-native-gesture-handler";
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import {
+	interpolate,
+	runOnJS,
+	type SharedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import type { ScrollProgress } from "../../providers/gestures";
+import { useKeys } from "../../providers/keys";
+import { Animations } from "../../stores/animations";
+import { Gestures } from "../../stores/gestures";
+import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
+import { animate } from "../../utils/animation/animate";
+import { runTransition } from "../../utils/animation/run-transition";
+import { applyGestureActivationCriteria } from "../../utils/gesture/apply-gesture-activation-criteria";
+import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
+
+const GESTURE_VELOCITY_IMPACT = 0.3;
+const DEFAULT_GESTURE_RESPONSE_DISTANCE = 50;
+const DEFAULT_GESTURE_DIRECTION = "horizontal";
+const DEFAULT_GESTURE_ENABLED = false;
+const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
+
+interface BuildGesturesHookProps {
+	scrollProgress: SharedValue<ScrollProgress>;
+}
+
+export const useBuildGestures = ({
+	scrollProgress,
+}: BuildGesturesHookProps) => {
+	const dimensions = useWindowDimensions();
+	const { current } = useKeys();
+
+	const initialTouch = useSharedValue({
+		x: 0,
+		y: 0,
+	});
+
+	const gestures = Gestures.getRouteGestures(current.route.key);
+
+	const animations = Animations.getAll(current.route.key);
+
+	const {
+		gestureDirection = DEFAULT_GESTURE_DIRECTION,
+		gestureEnabled = DEFAULT_GESTURE_ENABLED,
+		transitionSpec,
+		gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+		gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE,
+		gestureDrivesProgress = DEFAULT_GESTURE_DRIVES_PROGRESS,
+	} = current.options;
+
+	const directions = Array.isArray(gestureDirection)
+		? gestureDirection
+		: [gestureDirection];
+
+	const allowed = useMemo(
+		() => ({
+			bidirectional: directions.includes("bidirectional"),
+			vertical: directions.includes("vertical"),
+			verticalInverted: directions.includes("vertical-inverted"),
+			horizontal: directions.includes("horizontal"),
+			horizontalInverted: directions.includes("horizontal-inverted"),
+		}),
+		[directions],
+	);
+
+	const nativeGesture = useMemo(() => Gesture.Native(), []);
+
+	const onTouchesDown = useCallback(
+		(e: GestureTouchEvent) => {
+			"worklet";
+			const firstTouch = e.changedTouches[0];
+			initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
+		},
+		[initialTouch],
+	);
+
+	const onTouchesMove = useCallback(
+		(e: GestureTouchEvent, manager: GestureStateManagerType) => {
+			"worklet";
+
+			const touch = e.changedTouches[0];
+			const deltaX = touch.x - initialTouch.value.x;
+			const deltaY = touch.y - initialTouch.value.y;
+
+			const isVerticalSwipe = Math.abs(deltaY) > Math.abs(deltaX);
+			const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
+
+			const isSwipingDown = isVerticalSwipe && deltaY > 0;
+			const isSwipingUp = isVerticalSwipe && deltaY < 0;
+			const isSwipingRight = isHorizontalSwipe && deltaX > 0;
+			const isSwipingLeft = isHorizontalSwipe && deltaX < 0;
+
+			const minMovement = 5;
+			const hasEnoughMovement =
+				Math.abs(deltaX) > minMovement || Math.abs(deltaY) > minMovement;
+
+			if (!hasEnoughMovement) return;
+
+			if (gestures.isDragging?.value) {
+				manager.activate();
+				return;
+			}
+
+			let shouldActivate = false;
+
+			if (allowed.vertical && isSwipingDown) {
+				shouldActivate = scrollProgress.value.y <= 0;
+			}
+			if (allowed.verticalInverted && isSwipingUp) {
+				const maxScrollableY =
+					scrollProgress.value.contentHeight -
+					scrollProgress.value.layoutHeight;
+
+				shouldActivate = scrollProgress.value.y >= maxScrollableY;
+			}
+			if (allowed.horizontal && isSwipingRight) {
+				shouldActivate = scrollProgress.value.x <= 0;
+			}
+			if (allowed.horizontalInverted && isSwipingLeft) {
+				const maxProgress =
+					scrollProgress.value.contentWidth - scrollProgress.value.layoutWidth;
+				shouldActivate = scrollProgress.value.x >= maxProgress;
+			}
+			if (allowed.bidirectional) {
+				if (isSwipingDown) {
+					shouldActivate = scrollProgress.value.y >= 0;
+				} else if (isSwipingUp) {
+					shouldActivate = scrollProgress.value.y <= 0;
+				} else if (isSwipingRight || isSwipingLeft) {
+					shouldActivate = true;
+				}
+			}
+
+			if (
+				(shouldActivate || gestures.isDragging?.value) &&
+				!gestures.isDismissing?.value
+			) {
+				manager.activate();
+			} else {
+				manager.fail();
+			}
+		},
+		[initialTouch, scrollProgress, gestures, allowed],
+	);
+
+	const onStart = useCallback(() => {
+		"worklet";
+		gestures.isDragging.value = 1;
+		gestures.isDismissing.value = 0;
+	}, [gestures]);
+
+	const onUpdate = useCallback(
+		(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+			"worklet";
+
+			let gestureProgress = 0;
+
+			gestures.x.value = event.translationX;
+			gestures.y.value = event.translationY;
+
+			gestures.normalizedX.value = interpolate(
+				event.translationX,
+				[-dimensions.width, dimensions.width],
+				[-1, 1],
+				"clamp",
+			);
+			gestures.normalizedY.value = interpolate(
+				event.translationY,
+				[-dimensions.height, dimensions.height],
+				[-1, 1],
+				"clamp",
+			);
+
+			if (allowed.bidirectional) {
+				const distance = Math.sqrt(
+					event.translationX ** 2 + event.translationY ** 2,
+				);
+				gestureProgress = mapGestureToProgress(distance, dimensions.width);
+			} else {
+				let maxProgress = 0;
+
+				const allowedDown = allowed.vertical;
+				const allowedUp = allowed.verticalInverted;
+				const allowedRight = allowed.horizontal;
+				const allowedLeft = allowed.horizontalInverted;
+
+				if (allowedRight && event.translationX > 0) {
+					const currentProgress = mapGestureToProgress(
+						event.translationX,
+						dimensions.width,
+					);
+					maxProgress = Math.max(maxProgress, currentProgress);
+				}
+
+				if (allowedLeft && event.translationX < 0) {
+					const currentProgress = mapGestureToProgress(
+						-event.translationX,
+						dimensions.width,
+					);
+					maxProgress = Math.max(maxProgress, currentProgress);
+				}
+
+				if (allowedDown && event.translationY > 0) {
+					const currentProgress = mapGestureToProgress(
+						event.translationY,
+						dimensions.height,
+					);
+					maxProgress = Math.max(maxProgress, currentProgress);
+				}
+
+				if (allowedUp && event.translationY < 0) {
+					const currentProgress = mapGestureToProgress(
+						-event.translationY,
+						dimensions.height,
+					);
+					maxProgress = Math.max(maxProgress, currentProgress);
+				}
+
+				gestureProgress = maxProgress;
+			}
+
+			if (gestureDrivesProgress) {
+				animations.progress.value = 1 - gestureProgress;
+			}
+		},
+		[dimensions, gestures, animations, gestureDrivesProgress, allowed],
+	);
+
+	const setNavigatorDismissal = useCallback(() => {
+		const key = current.navigation.getState().key;
+
+		NavigatorDismissState.set(key, true);
+	}, [current]);
+
+	const handleDismiss = useCallback(() => {
+		const key = current.navigation.getState().key;
+		current.navigation.goBack();
+		NavigatorDismissState.remove(key);
+	}, [current]);
+
+	const onEnd = useCallback(
+		(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+			"worklet";
+
+			const { translationX, translationY, velocityX, velocityY } = event;
+
+			// reminder: we should make this into an option
+			const dismissThreshold = 0.5;
+
+			const finalX = translationX + velocityX * gestureVelocityImpact;
+			const finalY = translationY + velocityY * gestureVelocityImpact;
+
+			const diagonal = Math.sqrt(
+				dimensions.width * dimensions.width +
+					dimensions.height * dimensions.height,
+			);
+
+			let shouldDismiss = false;
+
+			const horizontalDistance = Math.abs(finalX);
+			const verticalDistance = Math.abs(finalY);
+			const crossAxisThreshold = diagonal * dismissThreshold * 0.7;
+
+			if (allowed.bidirectional) {
+				// For bidirectional, use the original distance-based logic
+				const finalDistance = Math.sqrt(finalX * finalX + finalY * finalY);
+				shouldDismiss = finalDistance > diagonal * dismissThreshold;
+			} else {
+				// Check primary direction dismissal
+				if (allowed.vertical && finalY > 0) {
+					shouldDismiss = verticalDistance > diagonal * dismissThreshold;
+				} else if (allowed.verticalInverted && finalY < 0) {
+					shouldDismiss = verticalDistance > diagonal * dismissThreshold;
+				} else if (allowed.horizontal && finalX > 0) {
+					shouldDismiss = horizontalDistance > diagonal * dismissThreshold;
+				} else if (allowed.horizontalInverted && finalX < 0) {
+					shouldDismiss = horizontalDistance > diagonal * dismissThreshold;
+				}
+
+				// Allow dismissal on perpendicular axis if movement is significant
+				if (!shouldDismiss) {
+					if (
+						(allowed.vertical || allowed.verticalInverted) &&
+						horizontalDistance > crossAxisThreshold
+					) {
+						shouldDismiss = true;
+					} else if (
+						(allowed.horizontal || allowed.horizontalInverted) &&
+						verticalDistance > crossAxisThreshold
+					) {
+						shouldDismiss = true;
+					}
+				}
+			}
+
+			gestures.isDismissing.value = Number(shouldDismiss);
+
+			if (gestures.isDismissing.value) {
+				runOnJS(setNavigatorDismissal)();
+			}
+
+			runTransition({
+				target: gestures.isDismissing.value ? "close" : "open",
+				spec: transitionSpec,
+				onFinish: gestures.isDismissing.value ? handleDismiss : undefined,
+				animations,
+			});
+
+			const spec = gestures.isDismissing.value
+				? transitionSpec?.close
+				: transitionSpec?.open;
+
+			gestures.x.value = animate(0, spec);
+			gestures.y.value = animate(0, spec);
+			gestures.normalizedX.value = animate(0, spec);
+			gestures.normalizedY.value = animate(0, spec);
+			gestures.isDragging.value = 0;
+		},
+		[
+			dimensions,
+			animations,
+			transitionSpec,
+			gestureVelocityImpact,
+			setNavigatorDismissal,
+			handleDismiss,
+			gestures,
+			allowed,
+		],
+	);
+
+	const panGesture = useMemo(
+		() =>
+			Gesture.Pan()
+				.enabled(gestureEnabled)
+				.manualActivation(true)
+				.onTouchesDown(onTouchesDown)
+				.onTouchesMove(onTouchesMove)
+				.onStart(onStart)
+				.onUpdate(onUpdate)
+				.onEnd(onEnd)
+				.blocksExternalGesture(nativeGesture),
+		[
+			gestureEnabled,
+			nativeGesture,
+			onTouchesDown,
+			onTouchesMove,
+			onStart,
+			onUpdate,
+			onEnd,
+		],
+	);
+
+	applyGestureActivationCriteria({
+		gestureDirection,
+		gestureResponseDistance,
+		panGesture,
+	});
+	return { panGesture, nativeGesture };
+};

package/src/hooks/gestures/use-scroll-progress.tsx

@@ -0,0 +1,60 @@
+import { useCallback } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { useAnimatedScrollHandler } from "react-native-reanimated";
+import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";
+import { useGestureContext } from "../../providers/gestures";
+
+interface ScrollProgressHookProps {
+	onScroll?: (event: ReanimatedScrollEvent) => void;
+	onContentSizeChange?: (width: number, height: number) => void;
+	onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const useScrollProgress = (props: ScrollProgressHookProps) => {
+	const { scrollProgress } = useGestureContext();
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			props.onScroll?.(event);
+			scrollProgress.modify((v) => {
+				"worklet";
+				v.x = event.contentOffset.x;
+				v.y = event.contentOffset.y;
+				return v;
+			});
+		},
+	});
+
+	const onContentSizeChange = useCallback(
+		(width: number, height: number) => {
+			props.onContentSizeChange?.(width, height);
+
+			scrollProgress.modify((v) => {
+				"worklet";
+				v.contentWidth = width;
+				v.contentHeight = height;
+				return v;
+			});
+		},
+		[scrollProgress, props.onContentSizeChange],
+	);
+
+	const onLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			props.onLayout?.(event);
+			const { width, height } = event.nativeEvent.layout;
+			scrollProgress.modify((v) => {
+				"worklet";
+				v.layoutHeight = height;
+				v.layoutWidth = width;
+				return v;
+			});
+		},
+		[scrollProgress, props.onLayout],
+	);
+
+	return {
+		scrollHandler,
+		onContentSizeChange,
+		onLayout,
+	};
+};

package/src/hooks/use-stable-callback.tsx

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export default function useStableCallback<C extends (...args: any[]) => any>(
+	callback: C,
+) {
+	const callbackRef = useRef(callback);
+
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+
+	return useCallback((...args: Parameters<C>) => {
+		callbackRef.current(...args);
+	}, []);
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import { FlatList, Pressable, ScrollView, View } from "react-native";
+import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
+import { presets, specs } from "./configs";
+
+export default {
+	View: createTransitionAwareComponent(View),
+	Pressable: createTransitionAwareComponent(Pressable),
+	ScrollView: createTransitionAwareComponent(ScrollView, {
+		isScrollable: true,
+	}),
+	FlatList: createTransitionAwareComponent(FlatList, {
+		isScrollable: true,
+	}),
+	presets,
+	specs,
+	createTransitionAwareComponent,
+};
+
+export { useScreenAnimation } from "./hooks/animation/use-screen-animation";
+export { createNativeStackNavigator } from "./integrations/native-stack/navigators/createNativeStackNavigator";
+
+export type {
+	NativeStackHeaderLeftProps,
+	NativeStackHeaderProps,
+	NativeStackHeaderRightProps,
+	NativeStackNavigationEventMap,
+	NativeStackNavigationOptions,
+	NativeStackNavigationProp,
+	NativeStackNavigatorProps,
+	NativeStackOptionsArgs,
+	NativeStackScreenProps,
+} from "./types/navigator";