react-native-screen-transitions 3.0.0-beta.8 → 3.0.0-rc.1

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/{providers/utils → utils}/create-provider.tsx

@@ -3,19 +3,13 @@
  * 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 PropsWithChildren,
-	type ReactNode,
-	useContext,
-	useMemo,
-} from "react";
+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 PropsWithChildren<object>, ContextValue>(
+	return <ProviderProps extends object, ContextValue>(
 		factory: (props: ProviderProps) => {
 			value?: ContextValue;
 			enabled?: boolean;
@@ -29,7 +23,7 @@ export default function createProvider<
 
 		const Provider: React.FC<ProviderProps> = (props) => {
 			const {
-				children = props.children,
+				children = (props as { children?: ReactNode }).children,
 				enabled = true,
 				value,
 			} = factory(props);

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;

package/src/shared/utils/gesture/check-gesture-activation.ts

@@ -1,12 +1,12 @@
 import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
 import type { SharedValue } from "react-native-reanimated";
-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;

package/src/shared/utils/gesture/reset-gesture-values.ts

@@ -2,8 +2,8 @@ import type {
 	GestureStateChangeEvent,
 	PanGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
-import type { GestureStoreMap } from "../../stores/gesture-store";
-import type { AnimationConfig } from "../../types/animation";
+import type { GestureStoreMap } from "../../stores/gesture.store";
+import type { AnimationConfig } from "../../types/animation.types";
 import { animate } from "../animation/animate";
 import { velocity } from "./velocity";
 

package/src/shared/utils/gesture/velocity.ts

@@ -3,7 +3,7 @@ import type {
 	PanGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
 import { clamp } from "react-native-reanimated";
-import type { AnimationStoreMap } from "../../stores/animation-store";
+import type { AnimationStoreMap } from "../../stores/animation.store";
 
 interface CalculateProgressProps {
 	animations: AnimationStoreMap;

package/src/shared/utils/reset-stores-for-screen.ts

@@ -0,0 +1,11 @@
+import type { TransitionDescriptor } from "../providers/keys.provider";
+import { AnimationStore } from "../stores/animation.store";
+import { GestureStore } from "../stores/gesture.store";
+
+/**
+ * Reset all stores for a given screen
+ */
+export const resetStoresForScreen = (current: TransitionDescriptor) => {
+	AnimationStore.clear(current.route.key);
+	GestureStore.clear(current.route.key);
+};