react-native-screen-transitions 2.4.2 → 3.0.0-beta.1

package/src/__tests__/gesture.velocity.test.ts

@@ -1,138 +0,0 @@
-import { describe, expect, it, mock } from "bun:test";
-
-mock.module("react-native", () => ({}));
-mock.module("react-native-gesture-handler", () => ({}));
-mock.module("react-native-reanimated", () => ({
-	clamp: (value: number, lower: number, upper: number) =>
-		Math.min(Math.max(value, lower), upper),
-}));
-
-const { velocity } = await import("../utils/gesture/velocity");
-
-type Directions = {
-	horizontal: boolean;
-	horizontalInverted: boolean;
-	vertical: boolean;
-	verticalInverted: boolean;
-};
-
-type GestureEventInit = {
-	translationX?: number;
-	translationY?: number;
-	velocityX?: number;
-	velocityY?: number;
-};
-
-const createAnimations = (progress: number) =>
-	({
-		progress: { value: progress },
-		closing: { value: 0 },
-		animating: { value: 0 },
-	}) as const;
-
-const createEvent = ({
-	translationX = 0,
-	translationY = 0,
-	velocityX = 0,
-	velocityY = 0,
-}: GestureEventInit) =>
-	({ translationX, translationY, velocityX, velocityY }) as any;
-
-const createDirections = (overrides: Partial<Directions> = {}) => ({
-	horizontal: false,
-	horizontalInverted: false,
-	vertical: false,
-	verticalInverted: false,
-	...overrides,
-});
-
-describe("velocity.normalize", () => {
-	it("clamps values to the configured range", () => {
-		expect(velocity.normalize(6400, 320)).toBeCloseTo(3.2, 5);
-		expect(velocity.normalize(-6400, 320)).toBeCloseTo(-3.2, 5);
-	});
-});
-
-describe("velocity.calculateProgressVelocity", () => {
-	const dimensions = { width: 320, height: 640 };
-
-	it("returns positive magnitude when progressing toward open target", () => {
-		const animations = createAnimations(0.25);
-		const event = createEvent({
-			translationX: 48,
-			translationY: 6,
-			velocityX: 800,
-		});
-
-		const result = velocity.calculateProgressVelocity({
-			animations: animations as any,
-			shouldDismiss: false,
-			event,
-			dimensions,
-			directions: createDirections({ horizontal: true }),
-		});
-
-		expect(result).toBeCloseTo(2.5, 5);
-	});
-
-	it("prefers the axis with greater normalized translation", () => {
-		const animations = createAnimations(0.8);
-		const event = createEvent({
-			translationX: 24,
-			translationY: -140,
-			velocityX: 120,
-			velocityY: -900,
-		});
-
-		const result = velocity.calculateProgressVelocity({
-			animations: animations as any,
-			shouldDismiss: true,
-			event,
-			dimensions,
-			directions: createDirections({ horizontal: true, verticalInverted: true }),
-		});
-
-		expect(result).toBeLessThan(0);
-		expect(Math.abs(result)).toBeCloseTo(1.406, 3);
-	});
-
-	it("caps the returned magnitude using clamp", () => {
-		const animations = createAnimations(0.5);
-		const event = createEvent({
-			translationX: 10,
-			velocityX: 5000,
-		});
-
-		const result = velocity.calculateProgressVelocity({
-			animations: animations as any,
-			shouldDismiss: false,
-			event,
-			dimensions,
-			directions: createDirections({ horizontal: true }),
-		});
-
-		expect(result).toBeCloseTo(3.2, 5);
-	});
-});
-
-describe("velocity.shouldPassDismissalThreshold", () => {
-	const width = 320;
-
-	it("returns true once translation alone crosses half the screen", () => {
-		expect(
-			velocity.shouldPassDismissalThreshold(170, 0, width, 0.3),
-		).toBe(true);
-	});
-
-	it("combines translation with weighted velocity", () => {
-		expect(
-			velocity.shouldPassDismissalThreshold(40, 2500, width, 0.5),
-		).toBe(true);
-	});
-
-	it("returns false when movement is negligible", () => {
-		expect(
-			velocity.shouldPassDismissalThreshold(0, 0, width, 0.3),
-		).toBe(false);
-	});
-});

package/src/components/controllers/screen-lifecycle.tsx

@@ -1,78 +0,0 @@
-import { useEffect, useLayoutEffect } from "react";
-import { useParentGestureRegistry } from "../../hooks/gestures/use-parent-gesture-registry";
-import useStableCallback from "../../hooks/use-stable-callback";
-import { useKeys } from "../../providers/keys";
-import { Animations } from "../../stores/animations";
-import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
-import { resetStoresForScreen } from "../../stores/utils/reset-stores-for-screen";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
-
-interface ScreenLifecycleProps {
-	children: React.ReactNode;
-}
-
-export const ScreenLifecycleController = ({
-	children,
-}: ScreenLifecycleProps) => {
-	const { current } = useKeys();
-
-	const animations = Animations.getAll(current.route.key);
-
-	const handleBeforeRemove = useStableCallback((e: any) => {
-		const key = current.navigation.getParent()?.getState().key;
-		const requestedDismissOnNavigator = NavigatorDismissState.get(key);
-
-		const isEnabled = current.options.enableTransitions;
-		const isRequestedDismissOnNavigator = requestedDismissOnNavigator;
-		const isFirstScreen = current.navigation.getState().index === 0;
-
-		// If transitions are disabled, or the dismissal was on the local root, or this is the first screen of the stack, reset the stores
-		if (!isEnabled || isRequestedDismissOnNavigator || isFirstScreen) {
-			resetStoresForScreen(current);
-			return;
-		}
-
-		e.preventDefault();
-		const onAnimationFinish = (finished: boolean) => {
-			if (finished) {
-				current.navigation.dispatch(e.data.action);
-
-				// we'll ensure the dispatch is complete before resetting stores
-				requestAnimationFrame(() => {
-					resetStoresForScreen(current);
-				});
-			}
-		};
-
-		startScreenTransition({
-			target: "close",
-			spec: current.options.transitionSpec,
-			onAnimationFinish,
-			animations,
-		});
-	});
-
-	const handleInitialize = useStableCallback(() => {
-		startScreenTransition({
-			target: "open",
-			spec: current.options.transitionSpec,
-			animations,
-		});
-	});
-
-	useEffect(() => {
-		const unsubscribe = current.navigation.addListener(
-			"beforeRemove",
-			handleBeforeRemove,
-		);
-
-		return unsubscribe;
-	}, [current.navigation, handleBeforeRemove]);
-
-	useLayoutEffect(handleInitialize, []);
-
-	// important for t.a scrollviews inside nested navigators.
-	useParentGestureRegistry();
-
-	return children;
-};

package/src/constants.ts

@@ -1,108 +0,0 @@
-import type { ParamListBase, RouteProp } from "@react-navigation/native";
-import type { MeasuredDimensions } from "react-native-reanimated";
-import type { ScreenTransitionState } from "./types/animation";
-import type { BoundEntry } from "./types/bounds";
-import type { ActivationArea } from "./types/gesture";
-import type { Layout } from "./types/navigator";
-import type { Complete } from "./types/utils";
-import type { BoundsBuilderOptions } from "./utils/bounds/_types/builder";
-
-/**
- * Masked view integration
- */
-export const MASK_STYLE_ID = "_ROOT_MASKED";
-export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
-
-/**
- * Styles
- */
-export const NO_STYLES = Object.freeze({});
-
-/**
- * Default screen transition state
- */
-export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
-	Object.freeze({
-		progress: 0,
-		closing: 0,
-		animating: 0,
-		gesture: {
-			x: 0,
-			y: 0,
-			normalizedX: 0,
-			normalizedY: 0,
-			isDismissing: 0,
-			isDragging: 0,
-			direction: null,
-		},
-		bounds: {} as Record<string, BoundEntry>,
-		route: {} as RouteProp<ParamListBase>,
-	});
-
-/**
- * Bounds API Defaults
- */
-export const NO_BOUNDS_MAP: Record<string, BoundEntry> = Object.freeze({});
-export const EMPTY_BOUND_HELPER_RESULT = Object.freeze({});
-export const EMPTY_BOUND_HELPER_RESULT_RAW = Object.freeze({
-	scaleX: 1,
-	scaleY: 1,
-	scale: 1,
-	translateX: 0,
-	translateY: 0,
-	width: 0,
-	height: 0,
-});
-export const ENTER_RANGE = [0, 1] as const;
-export const EXIT_RANGE = [1, 2] as const;
-
-export const FULLSCREEN_DIMENSIONS = (
-	dimensions: Layout,
-): MeasuredDimensions => {
-	"worklet";
-	return {
-		x: 0,
-		y: 0,
-		pageX: 0,
-		pageY: 0,
-		width: dimensions.width,
-		height: dimensions.height,
-	};
-};
-
-export const DEFAULT_BUILDER_OPTIONS: Complete<
-	Omit<BoundsBuilderOptions, "id">
-> = Object.freeze({
-	gestures: { x: 0, y: 0 },
-	toFullscreen: false,
-	absolute: false,
-	relative: true,
-	method: "transform",
-	contentScaleMode: "auto",
-	//
-	space: "relative",
-	target: "bound",
-	scaleMode: "match",
-	anchor: "center",
-	raw: false,
-} as const);
-
-/**
- * Default gesture config
- */
-export const GESTURE_VELOCITY_IMPACT = 0.3;
-export const DEFAULT_GESTURE_DIRECTION = "horizontal";
-export const DEFAULT_GESTURE_ENABLED = false;
-export const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
-export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
-
-/**
- * Default gesture offset
- */
-export const GESTURE_ACTIVATION_THRESHOLD_X = 10;
-export const GESTURE_ACTIVATION_THRESHOLD_Y = 10;
-export const GESTURE_FAIL_TOLERANCE_X = 15;
-export const GESTURE_FAIL_TOLERANCE_Y = 20;
-export const DEFAULT_EDGE_DISTANCE_HORIZONTAL = 50;
-export const DEFAULT_EDGE_DISTANCE_VERTICAL = 135;
-export const DEFAULT_ACTIVATION_AREA = "screen" as const;

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

@@ -1,151 +0,0 @@
-import type { ParamListBase, RouteProp } from "@react-navigation/native";
-import { useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import { type SharedValue, useDerivedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-	DEFAULT_SCREEN_TRANSITION_STATE,
-	NO_BOUNDS_MAP,
-} from "../../constants";
-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 { NativeStackDescriptor } from "../../types/navigator";
-import { derivations } from "../../utils/animation/derivations";
-import { createBounds } from "../../utils/bounds";
-
-type BuiltState = {
-	progress: SharedValue<number>;
-	closing: SharedValue<number>;
-	animating: SharedValue<number>;
-	gesture: GestureMap;
-	route: RouteProp<ParamListBase>;
-};
-
-const unwrap = (
-	s: BuiltState | undefined,
-	key: string | undefined,
-): ScreenTransitionState | undefined => {
-	"worklet";
-	if (!s || !key) return undefined;
-
-	return {
-		progress: s.progress.value,
-		closing: s.closing.value,
-		animating: s.animating.value,
-		gesture: {
-			x: s.gesture.x.value,
-			y: s.gesture.y.value,
-			normalizedX: s.gesture.normalizedX.value,
-			normalizedY: s.gesture.normalizedY.value,
-			isDismissing: s.gesture.isDismissing.value,
-			isDragging: s.gesture.isDragging.value,
-			direction: s.gesture.direction.value,
-		},
-		bounds: Bounds.getBounds(key) || NO_BOUNDS_MAP,
-		route: s.route,
-	};
-};
-
-const useBuildScreenTransitionState = (
-	descriptor: NativeStackDescriptor | undefined,
-): BuiltState | undefined => {
-	const key = descriptor?.route.key;
-
-	return useMemo(() => {
-		if (!key) return undefined;
-
-		return {
-			progress: Animations.getAnimation(key, "progress"),
-			closing: Animations.getAnimation(key, "closing"),
-			animating: Animations.getAnimation(key, "animating"),
-			gesture: Gestures.getRouteGestures(key),
-			route: descriptor.route,
-		};
-	}, [key, descriptor?.route]);
-};
-
-export function _useScreenAnimation() {
-	const dimensions = useWindowDimensions();
-	const insets = useSafeAreaInsets();
-
-	const {
-		current: currentDescriptor,
-		next: nextDescriptor,
-		previous: previousDescriptor,
-	} = useKeys();
-
-	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
-	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
-	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
-
-	const screenInterpolatorProps = useDerivedValue<
-		Omit<ScreenInterpolationProps, "bounds">
-	>(() => {
-		"worklet";
-
-		const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
-
-		const next = nextDescriptor?.options?.enableTransitions
-			? unwrap(nextAnimation, nextDescriptor?.route.key)
-			: undefined;
-
-		const current =
-			unwrap(currentAnimation, currentDescriptor?.route.key) ??
-			DEFAULT_SCREEN_TRANSITION_STATE;
-
-		const {
-			progress,
-			focused,
-			activeBoundId,
-			active,
-			isActiveTransitioning,
-			isDismissing,
-		} = derivations({
-			current,
-			next,
-			previous,
-		});
-
-		return {
-			layouts: { screen: dimensions },
-			insets,
-			previous,
-			current,
-			next,
-			focused,
-			activeBoundId,
-			progress,
-
-			active,
-			isActiveTransitioning,
-			isDismissing,
-		};
-	});
-
-	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
-	const currentInterpolator =
-		currentDescriptor?.options.screenStyleInterpolator;
-
-	const screenStyleInterpolator = nextInterpolator ?? currentInterpolator;
-
-	return { screenInterpolatorProps, screenStyleInterpolator };
-}
-
-export function useScreenAnimation() {
-	const { screenInterpolatorProps } = _useScreenAnimation();
-
-	return useDerivedValue<ScreenInterpolationProps>(() => {
-		const props = screenInterpolatorProps.value;
-		return {
-			...props,
-			bounds: createBounds(props),
-		};
-	});
-}

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

@@ -1,159 +0,0 @@
-import {
-	createContext,
-	Fragment,
-	useCallback,
-	useContext,
-	useMemo,
-} from "react";
-import type { View } from "react-native";
-import {
-	type AnimatedRef,
-	measure,
-	runOnJS,
-	runOnUI,
-	type StyleProps,
-	useAnimatedReaction,
-	useSharedValue,
-} from "react-native-reanimated";
-import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
-import { useKeys } from "../../providers/keys";
-import { Bounds } from "../../stores/bounds";
-import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
-import { prepareStyleForBounds } from "../../utils/bounds/_utils/styles";
-import useStableCallback from "../use-stable-callback";
-import useStableCallbackValue from "../use-stable-callback-value";
-
-interface BoundMeasurerHookProps {
-	sharedBoundTag?: string;
-	animatedRef: AnimatedRef<View>;
-	style: StyleProps;
-	onPress?: ((...args: unknown[]) => void) | undefined;
-}
-
-interface MaybeMeasureAndStoreParams {
-	onPress?: ((...args: unknown[]) => void) | undefined;
-	skipMarkingActive?: boolean;
-}
-
-interface MeasurementUpdateContextType {
-	updateSignal: SharedValue<number>;
-}
-
-const MeasurementUpdateContext =
-	createContext<MeasurementUpdateContextType | null>(null);
-
-export const useBoundsRegistry = ({
-	sharedBoundTag,
-	animatedRef,
-	style,
-	onPress,
-}: BoundMeasurerHookProps) => {
-	const { previous, current, next } = useKeys();
-	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-	const ROOT_MEASUREMENT_SIGNAL = useContext(MeasurementUpdateContext);
-	const ROOT_SIGNAL = useSharedValue(0);
-	const IS_ROOT = !ROOT_MEASUREMENT_SIGNAL;
-
-	const emitUpdate = useStableCallbackValue(() => {
-		"worklet";
-		if (IS_ROOT) ROOT_SIGNAL.value = ROOT_SIGNAL.value + 1;
-	});
-
-	const maybeMeasureAndStore = useStableCallbackValue(
-		({ onPress, skipMarkingActive }: MaybeMeasureAndStoreParams) => {
-			"worklet";
-			// Currently, there's no necessity to measure when the current route is blurred ( could potentially change in the future )
-			if (!sharedBoundTag || next) return;
-
-			const measured = measure(animatedRef);
-
-			if (!measured) {
-				console.warn(
-					`[react-native-screen-transitions] measure() returned null for sharedBoundTag="${sharedBoundTag}"`,
-				);
-				return;
-			}
-
-			const key = current.route.key;
-
-			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
-				emitUpdate();
-				if (!skipMarkingActive) {
-					Bounds.setRouteActive(key, sharedBoundTag);
-				}
-				if (onPress) runOnJS(onPress)();
-				return;
-			}
-
-			emitUpdate();
-
-			Bounds.setBounds(key, sharedBoundTag, measured, preparedStyles);
-			if (!skipMarkingActive) {
-				Bounds.setRouteActive(key, sharedBoundTag);
-			}
-
-			if (onPress) runOnJS(onPress)();
-		},
-	);
-
-	const hasMeasuredOnLayout = useSharedValue(false);
-	const handleInitialLayout = useStableCallbackValue(() => {
-		"worklet";
-
-		const prevKey = previous?.route.key;
-		if (!sharedBoundTag || hasMeasuredOnLayout.value || !prevKey) {
-			return;
-		}
-
-		const prevBounds = Bounds.getBounds(prevKey)?.[sharedBoundTag];
-
-		if (prevBounds) {
-			// Should skip mark active if we are in a transition
-			maybeMeasureAndStore({ skipMarkingActive: true });
-			// Should not measure again while in transition
-			hasMeasuredOnLayout.value = true;
-		}
-	});
-
-	const captureActiveOnPress = useStableCallback(() => {
-		if (!sharedBoundTag) {
-			if (onPress) onPress();
-			return;
-		}
-
-		// In this case, we DO want to mark active
-		runOnUI(maybeMeasureAndStore)({ onPress });
-	});
-
-	const MeasurementSyncProvider = useMemo(() => {
-		if (!IS_ROOT || !sharedBoundTag) {
-			return Fragment;
-		}
-
-		return ({ children }: { children: React.ReactNode }) => (
-			<MeasurementUpdateContext.Provider value={{ updateSignal: ROOT_SIGNAL }}>
-				{children}
-			</MeasurementUpdateContext.Provider>
-		);
-	}, [IS_ROOT, sharedBoundTag, ROOT_SIGNAL]);
-
-	useAnimatedReaction(
-		() => ROOT_MEASUREMENT_SIGNAL?.updateSignal.value,
-		(current) => {
-			"worklet";
-
-			// We don't want to run on the initial amount)
-			if (current === 0 || current === undefined) return;
-
-			// Children should not have the ability to mark active
-			maybeMeasureAndStore({ skipMarkingActive: true });
-		},
-	);
-
-	return {
-		handleInitialLayout,
-		captureActiveOnPress,
-		MeasurementSyncProvider,
-	};
-};