react-native-screen-transitions 3.1.0 → 3.2.0-beta.0

package/src/shared/providers/keys.provider.tsx

@@ -1,57 +0,0 @@
-import type {
-	Descriptor,
-	NavigationProp,
-	ParamListBase,
-	RouteProp,
-} from "@react-navigation/native";
-import { createContext, useContext, useMemo } from "react";
-import type { ScreenTransitionConfig } from "../types/core.types";
-
-export type TransitionDescriptor = Descriptor<
-	ScreenTransitionConfig,
-	NavigationProp<ParamListBase>,
-	RouteProp<ParamListBase>
->;
-
-export interface KeysContextType<
-	TDescriptor extends TransitionDescriptor = TransitionDescriptor,
-> {
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-}
-
-const KeysContext = createContext<
-	KeysContextType<TransitionDescriptor> | undefined
->(undefined);
-
-interface KeysProviderProps<TDescriptor extends TransitionDescriptor> {
-	children: React.ReactNode;
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-}
-
-export function KeysProvider<TDescriptor extends TransitionDescriptor>({
-	children,
-	previous,
-	current,
-	next,
-}: KeysProviderProps<TDescriptor>) {
-	const value = useMemo<KeysContextType<TDescriptor>>(
-		() => ({ previous, current, next }),
-		[previous, current, next],
-	);
-
-	return <KeysContext.Provider value={value}>{children}</KeysContext.Provider>;
-}
-
-export function useKeys<
-	TDescriptor extends TransitionDescriptor = TransitionDescriptor,
->(): KeysContextType<TDescriptor> {
-	const context = useContext(KeysContext);
-	if (context === undefined) {
-		throw new Error("useKeys must be used within a KeysProvider");
-	}
-	return context as KeysContextType<TDescriptor>;
-}

package/src/shared/providers/routes.provider.tsx

@@ -1,54 +0,0 @@
-import { useMemo } from "react";
-import {
-	AnimationStore,
-	type AnimationStoreMap,
-} from "../stores/animation.store";
-import createProvider from "../utils/create-provider";
-
-interface RoutesProviderProps {
-	children: React.ReactNode;
-	routeKeys: string[];
-}
-
-interface RoutesContextValue {
-	/**
-	 * Array of route keys for all routes in the stack, in order.
-	 */
-	routeKeys: string[];
-}
-
-const { RoutesProvider, useRoutesContext } = createProvider("Routes", {
-	guarded: false,
-})<RoutesProviderProps, RoutesContextValue>(({ routeKeys }) => ({
-	value: { routeKeys },
-}));
-
-export { RoutesProvider, useRoutesContext };
-
-/**
- * Hook to get animation values for all screens from a given index onwards.
- * Useful for computing accumulated progress across multiple screens.
- */
-export function useStackAnimationValues(
-	currentRouteKey: string | undefined,
-): AnimationStoreMap[] {
-	const routesContext = useRoutesContext();
-
-	return useMemo(() => {
-		if (!currentRouteKey || !routesContext) {
-			return [];
-		}
-
-		const { routeKeys } = routesContext;
-		const currentIndex = routeKeys.indexOf(currentRouteKey);
-
-		if (currentIndex === -1) {
-			return [];
-		}
-
-		// Get animation values for all screens from current index onwards
-		return routeKeys
-			.slice(currentIndex)
-			.map((key) => AnimationStore.getAll(key));
-	}, [currentRouteKey, routesContext]);
-}

package/src/shared/providers/screen-transition.provider.tsx

@@ -1,41 +0,0 @@
-import type React from "react";
-import type { ComponentType } from "react";
-import { RootTransitionAware } from "../components/root-transition-aware";
-import type { Any } from "../types/utils.types";
-import { ScreenGestureProvider } from "./gestures.provider";
-import { KeysProvider, type TransitionDescriptor } from "./keys.provider";
-import { TransitionStylesProvider } from "./transition-styles.provider";
-
-type Props<TDescriptor extends TransitionDescriptor> = {
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-	children: React.ReactNode;
-	LifecycleController: ComponentType<Any>;
-};
-
-export function ScreenTransitionProvider<
-	TDescriptor extends TransitionDescriptor,
->({
-	previous,
-	current,
-	next,
-	children,
-	LifecycleController,
-}: Props<TDescriptor>) {
-	return (
-		<KeysProvider<TDescriptor>
-			previous={previous}
-			current={current}
-			next={next}
-		>
-			<ScreenGestureProvider>
-				<LifecycleController>
-					<TransitionStylesProvider>
-						<RootTransitionAware>{children}</RootTransitionAware>
-					</TransitionStylesProvider>
-				</LifecycleController>
-			</ScreenGestureProvider>
-		</KeysProvider>
-	);
-}

package/src/shared/types/utils.types.ts

@@ -1,4 +0,0 @@
-// biome-ignore lint/suspicious/noExplicitAny: <>
-export type Any = any;
-
-export type Complete<T> = { [K in keyof T]-?: Exclude<T[K], undefined> };

package/src/shared/utils/animation/compute-stack-progress.ts

@@ -1,16 +0,0 @@
-import type { AnimationStoreMap } from "../../stores/animation.store";
-
-export const computeStackProgress = (
-	stackAnimationValues: AnimationStoreMap[],
-	fallback: number = 0,
-) => {
-	"worklet";
-	let computedStackProgress: number | undefined;
-	if (stackAnimationValues.length > 0) {
-		computedStackProgress = 0;
-		for (let i = 0; i < stackAnimationValues.length; i += 1) {
-			computedStackProgress += stackAnimationValues[i].progress.value;
-		}
-	}
-	return computedStackProgress ?? fallback;
-};

package/src/shared/utils/bounds/constants.ts

@@ -1,40 +0,0 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Layout } from "../../types/core.types";
-import type { Complete } from "../../types/utils.types";
-import type { BoundsBuilderOptions } from "./types/builder";
-
-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",
-	/**
-	 * Controls how elements scale during transitions
-	 * - "match": Scale to match destination bounds (default for center anchor)
-	 * - "none": No scaling, maintain original size (default for non-center anchors)
-	 * - "uniform": Scale uniformly (maintain aspect ratio)
-	 */
-	scaleMode: "match",
-	anchor: "center",
-	raw: false,
-} as const);

package/src/shared/utils/bounds/helpers/is-bounds-equal.ts

@@ -1,24 +0,0 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
-import { BoundStore } from "../../../stores/bounds.store";
-
-export const isBoundsEqual = ({
-	measured,
-	key,
-	sharedBoundTag,
-}: {
-	measured: MeasuredDimensions;
-	key: string;
-	sharedBoundTag: string;
-}) => {
-	"worklet";
-	const existing = BoundStore.getSnapshot(sharedBoundTag, key)?.bounds;
-	return (
-		!!existing &&
-		existing.width === measured.width &&
-		existing.height === measured.height &&
-		existing.pageX === measured.pageX &&
-		existing.pageY === measured.pageY &&
-		existing.x === measured.x &&
-		existing.y === measured.y
-	);
-};

package/src/shared/utils/gesture/apply-offset-rules.ts

@@ -1,312 +0,0 @@
-import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
-import type { SharedValue } from "react-native-reanimated";
-import {
-	DEFAULT_ACTIVATION_AREA,
-	DEFAULT_EDGE_DISTANCE_HORIZONTAL,
-	DEFAULT_EDGE_DISTANCE_VERTICAL,
-	GESTURE_ACTIVATION_THRESHOLD_X,
-	GESTURE_ACTIVATION_THRESHOLD_Y,
-	GESTURE_FAIL_TOLERANCE_X,
-	GESTURE_FAIL_TOLERANCE_Y,
-} from "../../constants";
-import type { Layout } from "../../types/core.types";
-import {
-	type ActivationArea,
-	type GestureActivationArea,
-	GestureOffsetState,
-	type SideActivation,
-} from "../../types/gesture.types";
-
-type Directions = {
-	vertical: boolean;
-	verticalInverted: boolean;
-	horizontal: boolean;
-	horizontalInverted: boolean;
-};
-
-interface CheckGestureActivationProps {
-	initialTouch: { x: number; y: number };
-	touch: { x: number; y: number };
-	directions: Directions;
-	manager?: GestureStateManagerType;
-	gestureOffsetState: SharedValue<GestureOffsetState>;
-	activationArea?: GestureActivationArea;
-	dimensions: Layout;
-	responseDistance?: number;
-}
-
-type NormalizedSides = {
-	left: ActivationArea;
-	right: ActivationArea;
-	top: ActivationArea;
-	bottom: ActivationArea;
-};
-
-interface ShouldActivateOrFailProps {
-	deltaX: number;
-	deltaY: number;
-	hasHorizontal: boolean;
-	hasVertical: boolean;
-	isHorizontalSwipe: boolean;
-	isVerticalSwipe: boolean;
-	allowedRight: boolean;
-	allowedLeft: boolean;
-	allowedUp: boolean;
-	allowedDown: boolean;
-	horizontalGateRight: boolean;
-	horizontalGateLeft: boolean;
-	verticalGateUp: boolean;
-	verticalGateDown: boolean;
-	isSwipingRight: boolean;
-	isSwipingLeft: boolean;
-	isSwipingUp: boolean;
-	isSwipingDown: boolean;
-}
-
-interface ReturnValues {
-	isSwipingDown: boolean;
-	isSwipingUp: boolean;
-	isSwipingRight: boolean;
-	isSwipingLeft: boolean;
-}
-
-function normalizeSides(area?: GestureActivationArea): NormalizedSides {
-	"worklet";
-	if (!area || typeof area === "string") {
-		const mode: ActivationArea = area ?? DEFAULT_ACTIVATION_AREA;
-		return { left: mode, right: mode, top: mode, bottom: mode };
-	}
-
-	const s: SideActivation = area as SideActivation;
-	return {
-		left: s.left ?? DEFAULT_ACTIVATION_AREA,
-		right: s.right ?? DEFAULT_ACTIVATION_AREA,
-		top: s.top ?? DEFAULT_ACTIVATION_AREA,
-		bottom: s.bottom ?? DEFAULT_ACTIVATION_AREA,
-	};
-}
-
-function computeEdgeConstraints(
-	initialTouch: { x: number; y: number },
-	dimensions: Layout,
-	sides: NormalizedSides,
-	responseDistance?: number,
-) {
-	"worklet";
-	const xDist = responseDistance ?? DEFAULT_EDGE_DISTANCE_HORIZONTAL;
-	const yDist = responseDistance ?? DEFAULT_EDGE_DISTANCE_VERTICAL;
-
-	const horizontalRight = sides.left === "screen" || initialTouch.x <= xDist; // right swipe checks left edge
-	const horizontalLeft =
-		sides.right === "screen" || initialTouch.x >= dimensions.width - xDist; // left swipe checks right edge
-	const verticalDown = sides.top === "screen" || initialTouch.y <= yDist; // down swipe checks top edge
-	const verticalUp =
-		sides.bottom === "screen" || initialTouch.y >= dimensions.height - yDist; // up swipe checks bottom edge
-
-	return { horizontalRight, horizontalLeft, verticalDown, verticalUp } as const;
-}
-
-function calculateSwipeDirs(deltaX: number, deltaY: number) {
-	"worklet";
-
-	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;
-
-	return {
-		isSwipingDown,
-		isSwipingUp,
-		isSwipingRight,
-		isSwipingLeft,
-		isVerticalSwipe,
-		isHorizontalSwipe,
-	};
-}
-
-function shouldActivateOrFail(params: ShouldActivateOrFailProps) {
-	"worklet";
-
-	const {
-		deltaX,
-		deltaY,
-		hasHorizontal,
-		hasVertical,
-		isHorizontalSwipe,
-		isVerticalSwipe,
-		allowedRight,
-		allowedLeft,
-		allowedUp,
-		allowedDown,
-		horizontalGateRight,
-		horizontalGateLeft,
-		verticalGateUp,
-		verticalGateDown,
-		isSwipingRight,
-		isSwipingLeft,
-		isSwipingUp,
-		isSwipingDown,
-	} = params;
-
-	let shouldActivate = false;
-	let shouldFail = false;
-
-	if (hasHorizontal && isHorizontalSwipe) {
-		const hasEnoughHorizontalMovement =
-			Math.abs(deltaX) >= GESTURE_ACTIVATION_THRESHOLD_X;
-
-		const hasAcceptableVerticalDeviation =
-			Math.abs(deltaY) <= GESTURE_FAIL_TOLERANCE_X;
-
-		if (hasEnoughHorizontalMovement && hasAcceptableVerticalDeviation) {
-			const rightOk = isSwipingRight && allowedRight && horizontalGateRight;
-			const leftOk = isSwipingLeft && allowedLeft && horizontalGateLeft;
-			if (rightOk || leftOk) {
-				shouldActivate = true;
-			}
-		} else if (!hasAcceptableVerticalDeviation) {
-			shouldFail = true;
-		}
-	}
-
-	if (hasVertical && isVerticalSwipe) {
-		const hasEnoughVerticalMovement =
-			Math.abs(deltaY) >= GESTURE_ACTIVATION_THRESHOLD_Y;
-		const hasAcceptableHorizontalDeviation =
-			Math.abs(deltaX) <= GESTURE_FAIL_TOLERANCE_Y;
-
-		if (hasEnoughVerticalMovement && hasAcceptableHorizontalDeviation) {
-			const upOk = isSwipingUp && allowedUp && verticalGateUp;
-			const downOk = isSwipingDown && allowedDown && verticalGateDown;
-			if (upOk || downOk) {
-				shouldActivate = true;
-			}
-		} else if (!hasAcceptableHorizontalDeviation) {
-			shouldFail = true;
-		}
-	}
-
-	if (hasHorizontal && isHorizontalSwipe) {
-		if ((isSwipingLeft && !allowedLeft) || (isSwipingRight && !allowedRight)) {
-			shouldFail = true;
-		}
-		// If gating prohibits the dominant horizontal swipe, fail early
-		if (
-			(isSwipingRight && allowedRight && !horizontalGateRight) ||
-			(isSwipingLeft && allowedLeft && !horizontalGateLeft)
-		) {
-			shouldFail = true;
-		}
-	}
-
-	if (hasVertical && isVerticalSwipe) {
-		if ((isSwipingUp && !allowedUp) || (isSwipingDown && !allowedDown)) {
-			shouldFail = true;
-		}
-		// If gating prohibits the dominant vertical swipe, fail early
-		if (
-			(isSwipingUp && allowedUp && !verticalGateUp) ||
-			(isSwipingDown && allowedDown && !verticalGateDown)
-		) {
-			shouldFail = true;
-		}
-	}
-
-	return { shouldActivate, shouldFail };
-}
-
-/**
- * Since we're using onTouchesMove to activate our pan, faillOffset and activateOffset don't actually work. In that case we'll create this function to use in onTouchesMove which acts simarly to the original functionality.
- */
-export const applyOffsetRules = ({
-	initialTouch,
-	touch,
-	directions,
-	manager,
-	gestureOffsetState,
-	activationArea,
-	dimensions,
-	responseDistance,
-}: CheckGestureActivationProps): ReturnValues => {
-	"worklet";
-
-	const deltaX = touch.x - initialTouch.x;
-	const deltaY = touch.y - initialTouch.y;
-
-	const allowedDown = directions.vertical;
-	const allowedUp = directions.verticalInverted;
-	const allowedRight = directions.horizontal;
-	const allowedLeft = directions.horizontalInverted;
-
-	const hasHorizontal = allowedLeft || allowedRight;
-	const hasVertical = allowedUp || allowedDown;
-
-	const {
-		isSwipingDown,
-		isSwipingUp,
-		isSwipingRight,
-		isSwipingLeft,
-		isVerticalSwipe,
-		isHorizontalSwipe,
-	} = calculateSwipeDirs(deltaX, deltaY);
-
-	// avoid re-running the function if the activation state is already set
-	if (
-		gestureOffsetState.value === GestureOffsetState.PASSED ||
-		gestureOffsetState.value === GestureOffsetState.FAILED
-	) {
-		return {
-			isSwipingDown,
-			isSwipingUp,
-			isSwipingRight,
-			isSwipingLeft,
-		};
-	}
-
-	const sides = normalizeSides(activationArea);
-
-	const {
-		horizontalRight: horizontalGateRight,
-		horizontalLeft: horizontalGateLeft,
-		verticalDown: verticalGateDown,
-		verticalUp: verticalGateUp,
-	} = computeEdgeConstraints(initialTouch, dimensions, sides, responseDistance);
-
-	const { shouldActivate, shouldFail } = shouldActivateOrFail({
-		deltaX,
-		deltaY,
-		hasHorizontal,
-		hasVertical,
-		isHorizontalSwipe,
-		isVerticalSwipe,
-		allowedRight,
-		allowedLeft,
-		allowedUp,
-		allowedDown,
-		horizontalGateRight,
-		horizontalGateLeft,
-		verticalGateUp,
-		verticalGateDown,
-		isSwipingRight,
-		isSwipingLeft,
-		isSwipingUp,
-		isSwipingDown,
-	});
-
-	if (shouldActivate) {
-		gestureOffsetState.value = GestureOffsetState.PASSED;
-	} else if (shouldFail) {
-		gestureOffsetState.value = GestureOffsetState.FAILED;
-		manager?.fail();
-	}
-
-	return {
-		isSwipingDown,
-		isSwipingUp,
-		isSwipingRight,
-		isSwipingLeft,
-	};
-};

package/src/shared/utils/reanimated/version.ts

@@ -1,5 +0,0 @@
-import { reanimatedVersion } from "react-native-reanimated";
-
-export const isReanimated4 = () => {
-	return reanimatedVersion.split(".")[0] === "4";
-};