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

package/src/shared/types/{animation.ts → animation.types.ts}

@@ -5,14 +5,16 @@ import type {
 	WithTimingConfig,
 } from "react-native-reanimated";
 import type { EdgeInsets } from "react-native-safe-area-context";
-import type { BoundEntry, BoundsAccessor } from "./bounds";
-import type { Layout } from "./core";
-import type { GestureValues } from "./gesture";
+import type { BoundsAccessor } from "./bounds.types";
+import type { Layout } from "./core.types";
+import type { GestureValues } from "./gesture.types";
 
 export interface OverlayInterpolationProps {
 	progress: number;
 	layouts: {
-		/** The `width` and `height` of the screen container. */
+		/**
+		 * The `width` and `height` of the screen container.
+		 */
 		screen: Layout;
 	};
 	insets: EdgeInsets;
@@ -23,37 +25,74 @@ export type ScreenTransitionState = {
 	closing: number;
 	animating: number;
 	gesture: GestureValues;
-	bounds: Record<string, BoundEntry>;
 	route: RouteProp<ParamListBase>;
 };
 
 export interface ScreenInterpolationProps {
-	/** Values for the screen that came before the current one in the navigation stack. */
+	/**
+	 * Values for the screen that came before the current one in the navigation stack.
+	 */
 	previous: ScreenTransitionState | undefined;
-	/** Values for the current screen being interpolated. */
+
+	/**
+	 * Values for the current screen being interpolated.
+	 */
 	current: ScreenTransitionState;
-	/** Values for the screen that comes after the current one in the navigation stack. */
+
+	/**
+	 * Values for the screen that comes after the current one in the navigation stack.
+	 */
 	next: ScreenTransitionState | undefined;
-	/** Layout measurements for the screen. */
+
+	/**
+	 * Layout measurements for the screen.
+	 */
 	layouts: {
-		/** The `width` and `height` of the screen container. */
+		/**
+		 * The `width` and `height` of the screen container.
+		 */
 		screen: Layout;
 	};
-	/** The safe area insets for the screen. */
+
+	/**
+	 * The safe area insets for the screen.
+	 */
 	insets: EdgeInsets;
-	/** The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a'). */
-	activeBoundId: string;
-	/** Whether the current screen is the focused (topmost) screen in the stack. */
+
+	/**
+	 * The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a').
+	 * @deprecated
+	 */
+	activeBoundId?: never;
+
+	/**
+	 * Whether the current screen is the focused (topmost) screen in the stack.
+	 */
 	focused: boolean;
-	/** Combined progress of current and next screen transitions, ranging from 0-2. */
+
+	/**
+	 * Combined progress of current and next screen transitions, ranging from 0-2.
+	 */
 	progress: number;
-	/** Function that provides access to bounds builders for creating shared element transitions. */
+
+	/**
+	 * Function that provides access to bounds builders for creating shared element transitions.
+	 */
 	bounds: BoundsAccessor;
-	/** The screen state that is currently driving the transition (either current or next, whichever is focused). */
+
+	/**
+	 * The screen state that is currently driving the transition (either current or next, whichever is focused).
+	 */
 	active: ScreenTransitionState;
-	/** Whether the active screen is currently transitioning (either being dragged or animating). */
+
+	/**
+	 * Whether the active screen is currently transitioning (either being dragged or animating).
+	 */
 	isActiveTransitioning: boolean;
-	/** Whether the active screen is in the process of being dismissed/closed. */
+
+	/**
+	 * Whether the active screen is in the process of being dismissed/closed.
+	 */
 	isDismissing: boolean;
 }
 
@@ -66,10 +105,12 @@ export type TransitionInterpolatedStyle = {
 	 * Animated style for the main screen view. Styles are only applied when Transition.View is present.
 	 */
 	contentStyle?: StyleProps;
+
 	/**
 	 * Animated style for a semi-transparent overlay. Styles are only applied when Transition.View is present.
 	 */
 	overlayStyle?: StyleProps;
+
 	/**
 	 * Define your own custom styles by using an id as the key: [id]: StyleProps
 	 */

package/src/shared/types/{bounds.ts → bounds.types.ts}

@@ -1,9 +1,9 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { TagData } from "../stores/bounds.store";
 import type {
 	BoundsBuilderOptions,
 	BoundsReturnType,
-} from "../utils/bounds/_types/builder";
-import type { ScreenPhase } from "./core";
+} from "../utils/bounds/types/builder";
 
 /**
  * Target style computation.
@@ -21,5 +21,5 @@ export type BoundEntry = {
 
 export type BoundsAccessor = {
 	<T extends BoundsBuilderOptions>(options: T): BoundsReturnType<T>;
-	get: (id?: string, phase?: ScreenPhase) => BoundEntry;
+	getOccurrence: (id: string, key: string) => TagData;
 };

package/src/shared/types/{core.ts → core.types.ts}

@@ -1,6 +1,6 @@
 import type { AnimatedProps } from "react-native-reanimated";
-import type { ScreenStyleInterpolator, TransitionSpec } from "./animation";
-import type { GestureActivationArea, GestureDirection } from "./gesture";
+import type { ScreenStyleInterpolator, TransitionSpec } from "./animation.types";
+import type { GestureActivationArea, GestureDirection } from "./gesture.types";
 
 export type Layout = {
 	width: number;
@@ -62,34 +62,42 @@ export type ScreenTransitionConfig = {
 	 * The user-provided function to calculate styles based on animation progress.
 	 */
 	screenStyleInterpolator?: ScreenStyleInterpolator;
+
 	/**
 	 * The Reanimated animation config for opening and closing transitions.
 	 */
 	transitionSpec?: TransitionSpec;
+
 	/**
 	 * Whether the gesture is enabled.
 	 */
 	gestureEnabled?: boolean;
+
 	/**
 	 * The direction of the swipe gesture used to dismiss the screen.
 	 */
 	gestureDirection?: GestureDirection | GestureDirection[];
+
 	/**
 	 * How much the gesture's final velocity impacts the dismiss decision.
 	 */
 	gestureVelocityImpact?: number;
+
 	/**
 	 * Distance threshold for gesture recognition throughout the screen.
 	 */
 	gestureResponseDistance?: number;
+
 	/**
 	 * Whether the gesture drives the progress.
 	 */
 	gestureDrivesProgress?: boolean;
+
 	/**
 	 * The area of the screen where the gesture is activated.
 	 */
 	gestureActivationArea?: GestureActivationArea;
+
 	/**
 	 * Whether to enable transitions. It sets the presentation to containedTransparentModal, animation none, and headerShown to false.
 	 */

package/src/shared/utils/animation/derivations.ts

@@ -1,16 +1,14 @@
-import { BoundStore } from "../../stores/bound-store";
-import type { ScreenTransitionState } from "../../types/animation";
+import type { ScreenTransitionState } from "../../types/animation.types";
 
 interface DerivationsParams {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
-	previous?: ScreenTransitionState;
 }
 
 /**
  * Additional values to help make defining animations easier.
  */
-export const derivations = ({ current, next, previous }: DerivationsParams) => {
+export const derivations = ({ current, next }: DerivationsParams) => {
 	"worklet";
 
 	// The combined progress
@@ -26,13 +24,9 @@ export const derivations = ({ current, next, previous }: DerivationsParams) => {
 
 	const isDismissing = !!(active.gesture.isDismissing || active.closing);
 
-	// The active bound id
-	const activeBoundId = BoundStore.getActiveBound(current, next, previous);
-
 	return {
 		progress,
 		focused,
-		activeBoundId,
 		active,
 		isActiveTransitioning,
 		isDismissing,

package/src/shared/utils/animation/start-screen-transition.ts

@@ -1,6 +1,6 @@
 import { runOnJS } from "react-native-reanimated";
-import type { AnimationStoreMap } from "../../stores/animation-store";
-import type { TransitionSpec } from "../../types/animation";
+import type { AnimationStoreMap } from "../../stores/animation.store";
+import type { TransitionSpec } from "../../types/animation.types";
 import { animate } from "./animate";
 
 interface StartScreenTransitionProps {

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

@@ -1,7 +1,7 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Layout } from "../../types/core";
-import type { Complete } from "../../types/utils";
-import type { BoundsBuilderOptions } from "./_types/builder";
+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,

package/src/shared/utils/bounds/{_utils → helpers}/geometry.ts

@@ -1,10 +1,10 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Layout } from "../../../types/core";
-import type { BoundsAnchor, BoundsScaleMode } from "../_types/builder";
+import type { Layout } from "../../../types/core.types";
+import type { BoundsAnchor, BoundsScaleMode } from "../types/builder";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
-} from "../_types/geometry";
+} from "../types/geometry";
 
 /**
  * Get the anchor point coordinates for a given bound

package/src/shared/utils/bounds/{_utils → helpers}/is-bounds-equal.ts

@@ -1,5 +1,5 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
-import { BoundStore } from "../../../stores/bound-store";
+import { BoundStore } from "../../../stores/bounds.store";
 
 export const isBoundsEqual = ({
 	measured,
@@ -11,9 +11,9 @@ export const isBoundsEqual = ({
 	sharedBoundTag: string;
 }) => {
 	"worklet";
-	const existing = BoundStore.getBounds(key)?.[sharedBoundTag]?.bounds;
+	const existing = BoundStore.getOccurrence(sharedBoundTag, key)?.bounds;
 	return (
-		existing &&
+		!!existing &&
 		existing.width === measured.width &&
 		existing.height === measured.height &&
 		existing.pageX === measured.pageX &&

package/src/shared/utils/bounds/{_utils → helpers}/style-composers.ts

@@ -3,11 +3,11 @@ import {
 	type MeasuredDimensions,
 	type StyleProps,
 } from "react-native-reanimated";
-import type { BoundsBuilderOptions } from "../_types/builder";
+import type { BoundsBuilderOptions } from "../types/builder";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
-} from "../_types/geometry";
+} from "../types/geometry";
 
 /**
  * Element-level (relative) params shared by size/transform composers.

package/src/shared/utils/bounds/{_utils → helpers}/styles.ts

@@ -1,6 +1,6 @@
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { isSharedValue } from "react-native-reanimated";
-import type { Any } from "../../../types/utils";
+import type { Any } from "../../../types/utils.types";
 
 type AnyStyle = ViewStyle | TextStyle | ImageStyle;
 type StyleValue = StyleProp<AnyStyle>;

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

@@ -6,21 +6,17 @@ import {
 	EXIT_RANGE,
 	FULLSCREEN_DIMENSIONS,
 } from "../../constants";
+import { BoundStore, type TagData } from "../../stores/bounds.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenTransitionState,
-} from "../../types/animation";
-import type { BoundsAccessor } from "../../types/bounds";
-import type { Layout, ScreenPhase } from "../../types/core";
-import type {
-	BoundsBuilderInitParams,
-	BoundsBuilderOptions,
-} from "./_types/builder";
+} from "../../types/animation.types";
+import type { BoundsAccessor } from "../../types/bounds.types";
+import type { Layout } from "../../types/core.types";
 import {
 	computeContentTransformGeometry,
 	computeRelativeGeometry,
-} from "./_utils/geometry";
-import { getBounds } from "./_utils/get-bounds";
+} from "./helpers/geometry";
 import {
 	composeContentStyle,
 	composeSizeAbsolute,
@@ -28,10 +24,13 @@ import {
 	composeTransformAbsolute,
 	composeTransformRelative,
 	type ElementComposeParams,
-} from "./_utils/style-composers";
+} from "./helpers/style-composers";
+import type {
+	BoundsBuilderOptions,
+	BoundsComputeParams,
+} from "./types/builder";
 
 export interface BuildBoundsAccessorParams {
-	activeBoundId: string | null;
 	current: ScreenTransitionState;
 	previous?: ScreenTransitionState;
 	next?: ScreenTransitionState;
@@ -50,34 +49,47 @@ const resolveBounds = (props: {
 }) => {
 	"worklet";
 	const entering = !props.next;
-
 	const fullscreen = FULLSCREEN_DIMENSIONS(props.dimensions);
+	const isClosing = props.current?.closing === 1;
 
-	const startPhase: ScreenPhase = entering ? "previous" : "current";
-	const endPhase: ScreenPhase = entering ? "current" : "next";
+	const isFullscreenTarget = props.computeOptions.target === "fullscreen";
 
-	const getPhaseBounds = (phase?: ScreenPhase) => {
-		"worklet";
-		switch (phase) {
-			case "previous":
-				return props.previous?.bounds?.[props.id]?.bounds;
-			case "current":
-				return props.current?.bounds?.[props.id]?.bounds;
-			case "next":
-				return props.next?.bounds?.[props.id]?.bounds;
-			default:
-				return null;
-		}
-	};
+	// Try exact match first (strict matching for nested stacks)
+	let link = BoundStore.getActiveLink(
+		props.id,
+		props.current?.route.key,
+		isClosing,
+	);
 
-	const start = getPhaseBounds(startPhase);
-	let end = getPhaseBounds(endPhase);
+	// For fullscreen target, fall back to most recent link for this tag
+	// (destination screen might not have a matching element)
+	if (!link && isFullscreenTarget) {
+		link = BoundStore.getActiveLink(props.id); // No screenKey = get most recent
+	}
 
-	const isFullscreen =
-		props.computeOptions.target === "fullscreen" ||
-		props.computeOptions.toFullscreen;
+	if (!link || !link.source) {
+		return {
+			start: null,
+			end: null,
+			entering,
+		};
+	}
 
-	if (isFullscreen) {
+	// For fullscreen target, destination element is not required
+	if (!isFullscreenTarget && !link.destination) {
+		return {
+			start: null,
+			end: null,
+			entering,
+		};
+	}
+
+	const { destination, source } = link;
+
+	const start = source.bounds;
+	let end = destination?.bounds ?? fullscreen;
+
+	if (isFullscreenTarget) {
 		end = fullscreen;
 	}
 
@@ -95,15 +107,8 @@ const resolveBounds = (props: {
 };
 
 const computeBoundStyles = (
-	{
-		id,
-		previous,
-		current,
-		next,
-		progress,
-		dimensions,
-	}: BoundsBuilderInitParams,
-	computeOptions: BoundsBuilderOptions = {},
+	{ id, previous, current, next, progress, dimensions }: BoundsComputeParams,
+	computeOptions: BoundsBuilderOptions = { id: "bound-id" },
 ) => {
 	"worklet";
 	if (!id) {
@@ -169,8 +174,7 @@ const computeBoundStyles = (
 	};
 
 	const isSize = computeOptions.method === "size";
-	const isAbs =
-		computeOptions.space === "absolute" || !!computeOptions.absolute;
+	const isAbs = computeOptions.space === "absolute";
 
 	return isSize
 		? isAbs
@@ -188,13 +192,13 @@ export const createBounds = (
 
 	const boundsFunction = (params?: BoundsBuilderOptions) => {
 		"worklet";
-		const id = params?.id ?? props.activeBoundId;
+		const id = params?.id;
 
 		return computeBoundStyles(
 			{
 				id,
-				current: props.current,
 				previous: props.previous,
+				current: props.current,
 				next: props.next,
 				progress: props.progress,
 				dimensions: props.layouts.screen,
@@ -203,16 +207,10 @@ export const createBounds = (
 		);
 	};
 
-	const get = (id?: string, phase?: ScreenPhase) => {
+	const getOccurrence = (tag: string, key: string): TagData => {
 		"worklet";
-		return getBounds({
-			id: id ?? props.activeBoundId,
-			phase,
-			current: props.current,
-			previous: props.previous,
-			next: props.next,
-		});
+		return BoundStore.getOccurrence(tag, key);
 	};
 
-	return Object.assign(boundsFunction, { get }) as BoundsAccessor;
+	return Object.assign(boundsFunction, { getOccurrence }) as BoundsAccessor;
 };

package/src/shared/utils/bounds/{_types → types}/builder.ts

@@ -1,19 +1,7 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
-import type { ScreenTransitionState } from "../../../types/animation";
-import type { BoundsMethod } from "../../../types/bounds";
-import type { Layout } from "../../../types/core";
-
-/**
- * Params passed to the builder initializer. No method required here.
- */
-export type BoundsBuilderInitParams = {
-	id: string | null;
-	previous?: ScreenTransitionState;
-	current: ScreenTransitionState;
-	next?: ScreenTransitionState;
-	progress: number;
-	dimensions: Layout;
-};
+import type { ScreenTransitionState } from "../../../types/animation.types";
+import type { BoundsMethod } from "../../../types/bounds.types";
+import type { Layout } from "../../../types/core.types";
 
 export type BoundsAnchor =
 	| "topLeading"
@@ -32,7 +20,14 @@ export type BoundsTarget = "bound" | "fullscreen" | MeasuredDimensions;
 
 export type BoundsSpace = "relative" | "absolute";
 
-export type BoundsComputeParams = BoundsBuilderInitParams;
+export type BoundsComputeParams = {
+	id?: string;
+	previous?: ScreenTransitionState;
+	current: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	progress: number;
+	dimensions: Layout;
+};
 
 export type RawSizeAbsoluteReturn = {
 	width: number;
@@ -84,26 +79,14 @@ export type BoundsReturnType<T extends BoundsBuilderOptions> =
 
 export type BoundsBuilderOptions = {
 	/**
-	 * @deprecated Use `content.scaleMode` instead.
-	 */
-	toFullscreen?: boolean;
-	/**
-	 * @deprecated Use `content.anchor` instead.
-	 */
-	absolute?: boolean;
-	/**
-	 * @deprecated Use `content.anchor` instead.
-	 */
-	relative?: boolean;
-	/**
-	 * @deprecated Use `scaleMode` instead.
+	 * The ID of the bound to compute bounds for. If not provided, uses the active bound ID.
 	 */
-	contentScaleMode?: "aspectFill" | "aspectFit" | "auto";
+	id: string;
 
 	/**
-	 * The ID of the bound to compute bounds for. If not provided, uses the active bound ID.
+	 * Whether the bound should target the screen or the bound.
 	 */
-	id?: string;
+	target?: BoundsTarget;
 
 	/**
 	 * The method to use to compute the bounds.
@@ -124,25 +107,24 @@ export type BoundsBuilderOptions = {
 	 * @default "relative"
 	 */
 	space?: BoundsSpace;
-	/**
-	 * Whether the bound should target the screen or the bound.
-	 * @default "bound"
-	 */
-	target?: BoundsTarget;
+
 	/**
 	 * The gesture offsets to apply to the bounds.
 	 */
 	gestures?: { x?: number; y?: number };
+
 	/**
 	 * How the bounds should be scaled between each other.
 	 * @default "match"
 	 */
 	scaleMode?: BoundsScaleMode;
+
 	/**
 	 * Where the bounds should be anchored between each other.
 	 * @default "center"
 	 */
 	anchor?: BoundsAnchor;
+
 	/**
 	 * If true, the raw values will be returned instead of the computed values.
 	 * @default false

package/src/shared/utils/create-provider.tsx

@@ -0,0 +1,71 @@
+/**
+ * THANK YOU @MatiPl01
+ * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/providers/utils/createProvider.tsx
+ * SUPER COOL AMAZING UTILITY
+ */
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+
+export default function createProvider<
+	ProviderName extends string,
+	Guarded extends boolean = true,
+>(name: ProviderName, options?: { guarded?: Guarded }) {
+	return <ProviderProps extends object, ContextValue>(
+		factory: (props: ProviderProps) => {
+			value?: ContextValue;
+			enabled?: boolean;
+			children?: ReactNode;
+		},
+	) => {
+		const { guarded = true } = options ?? {};
+
+		const Context = createContext<ContextValue | null>(null);
+		Context.displayName = name;
+
+		const Provider: React.FC<ProviderProps> = (props) => {
+			const {
+				children = (props as { children?: ReactNode }).children,
+				enabled = true,
+				value,
+			} = factory(props);
+
+			if (!value) {
+				throw new Error(
+					`${name}Context value must be provided. You likely forgot to return it from the factory function.`,
+				);
+			}
+
+			const memoValue = useMemo(
+				() => (enabled ? value : null),
+				[enabled, value],
+			);
+
+			return <Context.Provider value={memoValue}>{children}</Context.Provider>;
+		};
+
+		const useEnhancedContext = (): ContextValue | null => {
+			const context = useContext(Context);
+
+			if (guarded && context === null) {
+				throw new Error(
+					`${name} context must be used within a ${name}Provider`,
+				);
+			}
+
+			return context;
+		};
+
+		return {
+			[`${name}Context`]: Context,
+			[`${name}Provider`]: Provider,
+			[`use${name}Context`]: useEnhancedContext,
+		} as {
+			[P in ProviderName as `${P}Context`]: React.Context<ContextValue>;
+		} & {
+			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
+		} & {
+			[P in ProviderName as `use${P}Context`]: () => Guarded extends true
+				? ContextValue
+				: ContextValue | null;
+		};
+	};
+}

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

@@ -9,13 +9,13 @@ import {
 	GESTURE_FAIL_TOLERANCE_X,
 	GESTURE_FAIL_TOLERANCE_Y,
 } from "../../constants";
-import type { Layout } from "../../types/core";
+import type { Layout } from "../../types/core.types";
 import {
 	type ActivationArea,
 	type GestureActivationArea,
 	GestureOffsetState,
 	type SideActivation,
-} from "../../types/gesture";
+} from "../../types/gesture.types";
 
 type Directions = {
 	vertical: boolean;