react-native-screen-transitions 2.0.2 → 2.0.4

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";

package/src/integrations/native-stack/navigators/createNativeStackNavigator.tsx

@@ -0,0 +1,112 @@
+import {
+	createNavigatorFactory,
+	type EventArg,
+	type NavigatorTypeBagBase,
+	type ParamListBase,
+	type StackActionHelpers,
+	StackActions,
+	type StackNavigationState,
+	StackRouter,
+	type StackRouterOptions,
+	type StaticConfig,
+	type TypedNavigator,
+	useNavigationBuilder,
+} from "@react-navigation/native";
+import * as React from "react";
+
+import type {
+	NativeStackNavigationEventMap,
+	NativeStackNavigationOptions,
+	NativeStackNavigationProp,
+	NativeStackNavigatorProps,
+} from "../../../types/navigator";
+import { NativeStackView } from "../views/NativeStackView";
+
+function NativeStackNavigator({
+	id,
+	initialRouteName,
+	children,
+	layout,
+	screenListeners,
+	screenOptions,
+	screenLayout,
+	...rest
+}: NativeStackNavigatorProps) {
+	const { state, describe, descriptors, navigation, NavigationContent } =
+		useNavigationBuilder<
+			StackNavigationState<ParamListBase>,
+			StackRouterOptions,
+			StackActionHelpers<ParamListBase>,
+			NativeStackNavigationOptions,
+			NativeStackNavigationEventMap
+		>(StackRouter, {
+			id,
+			initialRouteName,
+			children,
+			layout,
+			screenListeners,
+			screenOptions,
+			screenLayout,
+		});
+
+	React.useEffect(
+		() =>
+			// @ts-expect-error: there may not be a tab navigator in parent
+			navigation?.addListener?.("tabPress", (e: any) => {
+				const isFocused = navigation.isFocused();
+
+				// Run the operation in the next frame so we're sure all listeners have been run
+				// This is necessary to know if preventDefault() has been called
+				requestAnimationFrame(() => {
+					if (
+						state.index > 0 &&
+						isFocused &&
+						!(e as EventArg<"tabPress", true>).defaultPrevented
+					) {
+						// When user taps on already focused tab and we're inside the tab,
+						// reset the stack to replicate native behaviour
+						navigation.dispatch({
+							...StackActions.popToTop(),
+							target: state.key,
+						});
+					}
+				});
+			}),
+		[navigation, state.index, state.key],
+	);
+
+	return (
+		<NavigationContent>
+			<NativeStackView
+				{...rest}
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			/>
+		</NavigationContent>
+	);
+}
+
+export function createNativeStackNavigator<
+	const ParamList extends ParamListBase,
+	const NavigatorID extends string | undefined = undefined,
+	const TypeBag extends NavigatorTypeBagBase = {
+		ParamList: ParamList;
+		NavigatorID: NavigatorID;
+		State: StackNavigationState<ParamList>;
+		ScreenOptions: NativeStackNavigationOptions;
+		EventMap: NativeStackNavigationEventMap;
+		NavigationList: {
+			[RouteName in keyof ParamList]: NativeStackNavigationProp<
+				ParamList,
+				RouteName,
+				NavigatorID
+			>;
+		};
+		Navigator: typeof NativeStackNavigator;
+	},
+	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+	return createNavigatorFactory(NativeStackNavigator)(config);
+}

package/src/integrations/native-stack/utils/debounce.tsx

@@ -0,0 +1,14 @@
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  duration: number
+): T {
+  let timeout: ReturnType<typeof setTimeout>;
+
+  return function (this: unknown, ...args) {
+    clearTimeout(timeout);
+
+    timeout = setTimeout(() => {
+      func.apply(this, args);
+    }, duration);
+  } as T;
+}

package/src/integrations/native-stack/utils/getModalRoutesKeys.ts

@@ -0,0 +1,21 @@
+import type { Route } from "@react-navigation/native";
+
+import type { NativeStackDescriptorMap } from "../../../types/navigator";
+
+export const getModalRouteKeys = (
+	routes: Route<string>[],
+	descriptors: NativeStackDescriptorMap,
+) =>
+	routes.reduce<string[]>((acc, route) => {
+		const { presentation } = descriptors[route.key]?.options ?? {};
+
+		if (
+			(acc.length && !presentation) ||
+			presentation === "modal" ||
+			presentation === "transparentModal"
+		) {
+			acc.push(route.key);
+		}
+
+		return acc;
+	}, []);

package/src/integrations/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { Animated } from 'react-native';
+
+export const AnimatedHeaderHeightContext = React.createContext<
+  Animated.AnimatedInterpolation<number> | undefined
+>(undefined);
+
+export function useAnimatedHeaderHeight() {
+  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+
+  if (animatedValue === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in a native stack navigator?"
+    );
+  }
+
+  return animatedValue;
+}

package/src/integrations/native-stack/utils/useDismissedRouteError.tsx

@@ -0,0 +1,30 @@
+import type {
+  ParamListBase,
+  StackNavigationState,
+} from '@react-navigation/native';
+import * as React from 'react';
+
+export function useDismissedRouteError(
+  state: StackNavigationState<ParamListBase>
+) {
+  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
+    null
+  );
+
+  const dismissedRouteName = nextDismissedKey
+    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
+    : null;
+
+  React.useEffect(() => {
+    if (dismissedRouteName) {
+      const message =
+        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
+        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
+        `Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.`;
+
+      console.error(message);
+    }
+  }, [dismissedRouteName]);
+
+  return { setNextDismissedKey };
+}