react-native-screen-transitions 3.5.2 → 3.6.0-alpha.0

package/src/shared/stores/bounds/internals/resolver.ts

@@ -1,3 +1,4 @@
+import { findLatest } from "../helpers/find-latest";
 import { matchesScreenKey } from "../helpers/matching";
 import type {
 	ResolvedTransitionPair,
@@ -5,66 +6,74 @@ import type {
 	ScreenKey,
 	TagID,
 	TagLink,
-	TagState,
 } from "../types";
 import { registry } from "./state";
 
-const findLatestLink = (
-	tagState: TagState,
-	predicate: (link: TagLink) => boolean,
-): TagLink | null => {
-	"worklet";
-	const stack = tagState.linkStack;
-	for (let i = stack.length - 1; i >= 0; i--) {
-		const link = stack[i];
-		if (predicate(link)) {
-			return link;
-		}
-	}
-	return null;
-};
-
 function findCompletedLinkByDestination(
-	tagState: TagState,
+	stack: TagLink[],
 	screenKey?: ScreenKey,
 ): TagLink | null {
 	"worklet";
 	if (!screenKey) return null;
 
-	return findLatestLink(
-		tagState,
+	return findLatest(
+		stack,
 		(link) =>
 			!!link.destination && matchesScreenKey(link.destination, screenKey),
 	);
 }
 
 function findCompletedLinkBySource(
-	tagState: TagState,
+	stack: TagLink[],
 	screenKey?: ScreenKey,
 ): TagLink | null {
 	"worklet";
 	if (!screenKey) return null;
 
-	return findLatestLink(
-		tagState,
+	return findLatest(
+		stack,
 		(link) => !!link.destination && matchesScreenKey(link.source, screenKey),
 	);
 }
 
 function findPendingLinkBySource(
-	tagState: TagState,
+	stack: TagLink[],
 	screenKey?: ScreenKey,
 ): TagLink | null {
 	"worklet";
 	if (!screenKey) return null;
 
-	return findLatestLink(
-		tagState,
+	return findLatest(
+		stack,
 		(link) =>
 			link.destination === null && matchesScreenKey(link.source, screenKey),
 	);
 }
 
+function findEnteringTransitionLink(
+	stack: TagLink[],
+	context: ResolveTransitionContext,
+): TagLink | null {
+	"worklet";
+	return (
+		findCompletedLinkByDestination(stack, context.currentScreenKey) ??
+		findPendingLinkBySource(stack, context.previousScreenKey) ??
+		findCompletedLinkBySource(stack, context.previousScreenKey)
+	);
+}
+
+function findExitingTransitionLink(
+	stack: TagLink[],
+	context: ResolveTransitionContext,
+): TagLink | null {
+	"worklet";
+	return (
+		findCompletedLinkBySource(stack, context.currentScreenKey) ??
+		findCompletedLinkByDestination(stack, context.nextScreenKey) ??
+		findPendingLinkBySource(stack, context.currentScreenKey)
+	);
+}
+
 function resolveTransitionPair(
 	tag: TagID,
 	context: ResolveTransitionContext,
@@ -73,56 +82,12 @@ function resolveTransitionPair(
 	const tagState = registry.get()[tag];
 	const stack = tagState?.linkStack;
 
-	let matchedLink: TagLink | null = null;
-
-	if (tagState && stack && stack.length > 0) {
-		if (context.entering) {
-			matchedLink = findCompletedLinkByDestination(
-				tagState,
-				context.currentScreenKey,
-			);
-
-			if (!matchedLink) {
-				matchedLink = findPendingLinkBySource(
-					tagState,
-					context.previousScreenKey,
-				);
-			}
-
-			if (!matchedLink) {
-				matchedLink = findCompletedLinkBySource(
-					tagState,
-					context.previousScreenKey,
-				);
-			}
-
-			if (!matchedLink) {
-				matchedLink = findCompletedLinkByDestination(
-					tagState,
-					context.nextScreenKey,
-				);
-			}
-		} else {
-			matchedLink = findCompletedLinkBySource(
-				tagState,
-				context.currentScreenKey,
-			);
-
-			if (!matchedLink) {
-				matchedLink = findCompletedLinkByDestination(
-					tagState,
-					context.nextScreenKey,
-				);
-			}
-
-			if (!matchedLink) {
-				matchedLink = findPendingLinkBySource(
-					tagState,
-					context.currentScreenKey,
-				);
-			}
-		}
-	}
+	const matchedLink =
+		stack && stack.length > 0
+			? context.entering
+				? findEnteringTransitionLink(stack, context)
+				: findExitingTransitionLink(stack, context)
+			: null;
 
 	const sourceBounds = matchedLink?.source?.bounds ?? null;
 	const destinationBounds = matchedLink?.destination?.bounds ?? null;
@@ -130,7 +95,6 @@ function resolveTransitionPair(
 	const destinationStyles = matchedLink?.destination?.styles ?? null;
 	const sourceScreenKey = matchedLink?.source?.screenKey ?? null;
 	const destinationScreenKey = matchedLink?.destination?.screenKey ?? null;
-	const usedPending = matchedLink ? matchedLink.destination === null : false;
 
 	return {
 		sourceBounds,
@@ -139,7 +103,6 @@ function resolveTransitionPair(
 		destinationStyles,
 		sourceScreenKey,
 		destinationScreenKey,
-		usedPending,
 	};
 }
 

package/src/shared/stores/bounds/internals/state.ts

@@ -1,14 +1,6 @@
 import { makeMutable } from "react-native-reanimated";
 import type { GroupState, TagID, TagState } from "../types";
 
-export const createEmptyTagState = (): TagState => {
-	"worklet";
-	return {
-		screens: {},
-		linkStack: [],
-	};
-};
-
 export type RegistryState = Record<TagID, TagState>;
 export type GroupsState = Record<string, GroupState>;
 

package/src/shared/stores/bounds/types.ts

@@ -23,7 +23,6 @@ export type Entry = {
 	ancestorKeys?: ScreenKey[];
 	navigatorKey?: NavigatorKey;
 	ancestorNavigatorKeys?: NavigatorKey[];
-	presenceCount?: number;
 };
 
 export type MeasuredEntry = Entry & {
@@ -37,7 +36,6 @@ export type EntryPatch = {
 	ancestorKeys?: ScreenKey[] | null;
 	navigatorKey?: NavigatorKey | null;
 	ancestorNavigatorKeys?: NavigatorKey[] | null;
-	presenceCount?: number | null;
 };
 
 export type ScreenIdentifier = {
@@ -49,7 +47,12 @@ export type ScreenIdentifier = {
 
 export type TagLink = {
 	source: ScreenIdentifier & MeasuredEntry;
+	/** Destination side once attached; null while the source is still pending. */
 	destination: (ScreenIdentifier & MeasuredEntry) | null;
+	/** First captured source side exposed for public link inspection. */
+	initialSource?: ScreenIdentifier & MeasuredEntry;
+	/** First attached destination side, used to compensate reveal closes after destination refreshes. */
+	initialDestination?: ScreenIdentifier & MeasuredEntry;
 };
 
 export type ResolveTransitionContext = {
@@ -66,7 +69,6 @@ export type ResolvedTransitionPair = {
 	destinationStyles: StyleProps | null;
 	sourceScreenKey: ScreenKey | null;
 	destinationScreenKey: ScreenKey | null;
-	usedPending: boolean;
 };
 
 export type ScreenEntry = Entry;
@@ -77,5 +79,8 @@ export type TagState = {
 };
 
 export type GroupState = {
+	/** Latest requested group member id from mounted grouped bounds. */
 	activeId: string;
+	/** Group member id that started the current linked transition. */
+	initialId?: string;
 };

package/src/shared/stores/gesture.store.ts

@@ -3,17 +3,37 @@ import {
 	makeMutable,
 	type SharedValue,
 } from "react-native-reanimated";
-import type { GestureDirection } from "../types/gesture.types";
+import type {
+	ActiveGesture,
+	ResolvedPanGestureDirection,
+} from "../types/gesture.types";
 import { createStore } from "../utils/create-store";
 
+type GestureRawStoreMap = {
+	x: SharedValue<number>;
+	y: SharedValue<number>;
+	normX: SharedValue<number>;
+	normY: SharedValue<number>;
+	scale: SharedValue<number>;
+	normScale: SharedValue<number>;
+};
+
 export type GestureStoreMap = {
 	x: SharedValue<number>;
 	y: SharedValue<number>;
 	normX: SharedValue<number>;
 	normY: SharedValue<number>;
+	scale: SharedValue<number>;
+	normScale: SharedValue<number>;
+	focalX: SharedValue<number>;
+	focalY: SharedValue<number>;
+	raw: GestureRawStoreMap;
 	dismissing: SharedValue<number>;
 	dragging: SharedValue<number>;
-	direction: SharedValue<Omit<GestureDirection, "bidirectional"> | null>;
+	settling: SharedValue<number>;
+	active: SharedValue<ActiveGesture | null>;
+	/** @deprecated Use `active` instead. */
+	direction: SharedValue<ResolvedPanGestureDirection | null>;
 
 	/**
 	 * @deprecated Use `normX` instead.
@@ -36,19 +56,35 @@ export type GestureStoreMap = {
 function createGestureBag(): GestureStoreMap {
 	const normX = makeMutable(0);
 	const normY = makeMutable(0);
+	const scale = makeMutable(1);
+	const normScale = makeMutable(0);
 	const dismissing = makeMutable(0);
 	const dragging = makeMutable(0);
+	const settling = makeMutable(0);
+	const active = makeMutable<ActiveGesture | null>(null);
 
 	return {
 		x: makeMutable(0),
 		y: makeMutable(0),
 		normX,
 		normY,
+		scale,
+		normScale,
+		focalX: makeMutable(0),
+		focalY: makeMutable(0),
+		raw: {
+			x: makeMutable(0),
+			y: makeMutable(0),
+			normX: makeMutable(0),
+			normY: makeMutable(0),
+			scale: makeMutable(1),
+			normScale: makeMutable(0),
+		},
 		dismissing,
 		dragging,
-		direction: makeMutable<Omit<GestureDirection, "bidirectional"> | null>(
-			null,
-		),
+		settling,
+		active,
+		direction: makeMutable<ResolvedPanGestureDirection | null>(null),
 
 		// Deprecated aliases (same underlying SharedValue)
 		normalizedX: normX,
@@ -61,7 +97,7 @@ function createGestureBag(): GestureStoreMap {
 /**
  * Route-keyed gesture state used by the transition system while a screen is
  * being dragged or dismissed. It stores raw and normalized gesture values,
- * dismissal flags, and the active gesture direction. `getCachedBag()` provides
+ * dismissal flags, and the active gesture. `getCachedBag()` provides
  * a stable neutral fallback bag for cases where a route should not own live
  * gesture state.
  */
@@ -72,8 +108,20 @@ export const GestureStore = createStore<GestureStoreMap>({
 		cancelAnimation(bag.y);
 		cancelAnimation(bag.normX);
 		cancelAnimation(bag.normY);
+		cancelAnimation(bag.scale);
+		cancelAnimation(bag.normScale);
+		cancelAnimation(bag.focalX);
+		cancelAnimation(bag.focalY);
+		cancelAnimation(bag.raw.x);
+		cancelAnimation(bag.raw.y);
+		cancelAnimation(bag.raw.normX);
+		cancelAnimation(bag.raw.normY);
+		cancelAnimation(bag.raw.scale);
+		cancelAnimation(bag.raw.normScale);
 		cancelAnimation(bag.dismissing);
 		cancelAnimation(bag.dragging);
+		cancelAnimation(bag.settling);
+		cancelAnimation(bag.active);
 		cancelAnimation(bag.direction);
 	},
 });

package/src/shared/stores/scroll.store.ts

@@ -0,0 +1,25 @@
+import {
+	cancelAnimation,
+	makeMutable,
+	type SharedValue,
+} from "react-native-reanimated";
+import type { ScrollGestureState } from "../types/gesture.types";
+import { createStore } from "../utils/create-store";
+
+export type ScrollStoreMap = {
+	state: SharedValue<ScrollGestureState | null>;
+};
+
+/**
+ * Route-keyed scroll geometry used by gesture activation and bounds measurement.
+ * The state tracks coordinated ScrollView offsets and dimensions so consumers
+ * can reason about overscroll without coupling to a specific scroll component.
+ */
+export const ScrollStore = createStore<ScrollStoreMap>({
+	createBag: () => ({
+		state: makeMutable<ScrollGestureState | null>(null),
+	}),
+	disposeBag: (bag) => {
+		cancelAnimation(bag.state);
+	},
+});

package/src/shared/typecheck/public-api.typecheck.ts

@@ -1,12 +1,16 @@
 import type { ComponentProps } from "react";
+import type { DerivedValue, SharedValue } from "react-native-reanimated";
 import {
 	type BlankStackFactoryOptions,
+	type BlankStackNavigationOptions,
 	type BlankStackScreenProps,
 	createBlankStackNavigator,
 } from "../../blank-stack";
 import type {
+	BoundsNavigationRevealStyle,
 	BoundsNavigationZoomOptions,
 	BoundsNavigationZoomStyle,
+	ScreenAnimationTarget,
 	ScreenGestureTarget,
 	ScreenInterpolationProps,
 	ScreenTransitionConfig,
@@ -16,6 +20,8 @@ import type {
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+	useScreenAnimation,
+	useScreenGesture,
 } from "..";
 
 const slotStyle: TransitionSlotStyle = {
@@ -49,18 +55,6 @@ const navigationMaskInterpolatedStyle: TransitionInterpolatedStyle = {
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: slotStyle,
 };
 
-const legacyInterpolatedStyle: TransitionInterpolatedStyle = {
-	contentStyle: {
-		opacity: 1,
-	},
-	backdropStyle: {
-		opacity: 0.5,
-	},
-	overlayStyle: {
-		opacity: 0.25,
-	},
-};
-
 const zoomOptions: BoundsNavigationZoomOptions = {
 	target: "bound",
 	debug: true,
@@ -83,10 +77,40 @@ const zoomOptions: BoundsNavigationZoomOptions = {
 declare const interpolationProps: ScreenInterpolationProps;
 
 const gestureTarget: ScreenGestureTarget = { ancestor: 2 };
+const animationTarget: ScreenAnimationTarget = { ancestor: 2 };
+
+function usePublicApiHooksTypecheck() {
+	const selfAnimation: DerivedValue<ScreenInterpolationProps> =
+		useScreenAnimation();
+	const selfTargetAnimation: DerivedValue<ScreenInterpolationProps> =
+		useScreenAnimation("self");
+	const ancestorAnimation: DerivedValue<ScreenInterpolationProps> | null =
+		useScreenAnimation("parent");
+	const inheritedGesture = useScreenGesture();
+	const ancestorGesture = useScreenGesture("parent");
+
+	return {
+		selfAnimation,
+		selfTargetAnimation,
+		ancestorAnimation,
+		inheritedGesture,
+		ancestorGesture,
+	};
+}
+
+void usePublicApiHooksTypecheck;
 
 const numericBoundsResult = interpolationProps.bounds({
 	id: 42,
 });
+const offsetBoundsResult = interpolationProps.bounds({
+	id: 42,
+	offset: { x: 10, y: -10 },
+});
+const deprecatedGesturesBoundsResult = interpolationProps.bounds({
+	id: 42,
+	gestures: { x: 10, y: -10 },
+});
 const absoluteRawBoundsResult = interpolationProps.bounds({
 	id: 42,
 	method: "size",
@@ -98,28 +122,73 @@ const zoomInterpolatedStyle: BoundsNavigationZoomStyle = interpolationProps
 	.navigation.zoom({
 		target: "bound",
 	});
+const revealInterpolatedStyle: BoundsNavigationRevealStyle = interpolationProps
+	.bounds({ id: 42 })
+	.navigation.reveal();
+void revealInterpolatedStyle;
+const currentLink = interpolationProps.bounds.getLink(42);
+const initialSource = currentLink?.initialSource;
+const initialDestination = currentLink?.initialDestination;
+const scopedBounds = interpolationProps.bounds({ id: 42 });
+const scopedCurrentLink = scopedBounds.getLink();
+const scopedLinkRawSize = scopedCurrentLink?.compute({
+	method: "size",
+	space: "absolute",
+	target: "fullscreen",
+	raw: true,
+});
+const scopedMeasured = scopedBounds.getMeasured("screen-key");
+const scopedInitialSnapshot = scopedBounds.getSnapshot("screen-key");
+const scopedInterpolatedStyle: number =
+	scopedBounds.interpolateStyle("opacity");
+const scopedInterpolatedBounds: number =
+	scopedBounds.interpolateBounds("pageX");
+void currentLink;
+void initialSource;
+void initialDestination;
+void scopedCurrentLink;
+void scopedLinkRawSize;
+void scopedMeasured;
+void scopedInitialSnapshot;
+void scopedInterpolatedStyle;
+void scopedInterpolatedBounds;
 const absoluteRawBoundsWidth: number = absoluteRawBoundsResult.width;
 const absoluteRawBoundsTranslateX: number = absoluteRawBoundsResult.translateX;
 const maybeContentHeight = interpolationProps.layouts.content?.height;
 const maybeCurrentContentHeight =
 	interpolationProps.current.layouts.content?.height;
+const currentActiveGesture = interpolationProps.current.gesture.active;
+const currentRawGestureNormX = interpolationProps.current.gesture.raw.normX;
+const currentAnimatedSnapIndex = interpolationProps.current.animatedSnapIndex;
 const currentSnapIndex = interpolationProps.current.snapIndex;
+const optionsInterpolatedStyle: TransitionInterpolatedStyle = {
+	options: {
+		gestureSensitivity: 0.5,
+		gestureSnapLocked: true,
+		gestureReleaseVelocityScale: 1.2,
+	},
+};
+void currentRawGestureNormX;
+void currentActiveGesture;
+void currentAnimatedSnapIndex;
+void currentSnapIndex;
+void optionsInterpolatedStyle;
 const nextNameOptions: ScreenTransitionConfig = {
 	navigationMaskEnabled: true,
 	sheetScrollGestureBehavior: "collapse-only",
+	gestureSensitivity: 0.75,
+};
+declare const gestureSensitivitySharedValue: SharedValue<number>;
+const sharedGestureSensitivityOptions: ScreenTransitionConfig = {
+	// @ts-expect-error Dynamic gesture sensitivity belongs in screenStyleInterpolator options.
+	gestureSensitivity: gestureSensitivitySharedValue,
 };
 const initialMountAnimationOptions: ScreenTransitionConfig = {
 	experimental_animateOnInitialMount: true,
 };
-const deprecatedAliasOptions: ScreenTransitionConfig = {
-	maskEnabled: true,
-	expandViaScrollView: false,
-};
-const precedenceOptions: ScreenTransitionConfig = {
-	navigationMaskEnabled: false,
-	maskEnabled: true,
-	sheetScrollGestureBehavior: "expand-and-collapse",
-	expandViaScrollView: false,
+const disabledGestureTrackingOptions: ScreenTransitionConfig = {
+	gestureEnabled: false,
+	experimental_allowDisabledGestureTracking: true,
 };
 const emptyInterpolatorOptions: ScreenTransitionConfig = {
 	screenStyleInterpolator: () => null,
@@ -127,7 +196,9 @@ const emptyInterpolatorOptions: ScreenTransitionConfig = {
 
 const blankStackFactoryOptions: BlankStackFactoryOptions = {
 	independent: true,
-	enableNativeScreens: false,
+};
+const blankStackNavigationOptions: BlankStackNavigationOptions = {
+	freezeOnBlur: true,
 };
 
 type StaticBlankStackParamList = {
@@ -151,25 +222,12 @@ const defaultBlankStack = createBlankStackNavigator();
 type DefaultBlankStackNavigatorProps = ComponentProps<
 	typeof defaultBlankStack.Navigator
 >;
-const viewBlankStackProps: Pick<
-	DefaultBlankStackNavigatorProps,
-	"enableNativeScreens"
-> = {
-	enableNativeScreens: false,
-};
 const independentBlankStackProps: Pick<
 	DefaultBlankStackNavigatorProps,
 	"independent"
 > = {
 	independent: true,
 };
-const independentViewBlankStackProps: Pick<
-	DefaultBlankStackNavigatorProps,
-	"independent" | "enableNativeScreens"
-> = {
-	independent: true,
-	enableNativeScreens: false,
-};
 const staticBlankStack = createBlankStackNavigator<StaticBlankStackParamList>({
 	initialRouteName: "Home",
 	screens: {
@@ -177,15 +235,6 @@ const staticBlankStack = createBlankStackNavigator<StaticBlankStackParamList>({
 		Details: StaticBlankDetailsScreen,
 	},
 });
-const staticViewBlankStack =
-	createBlankStackNavigator<StaticBlankStackParamList>({
-		initialRouteName: "Home",
-		enableNativeScreens: false,
-		screens: {
-			Home: StaticBlankHomeScreen,
-			Details: StaticBlankDetailsScreen,
-		},
-	});
 
 const publicApiTypecheck = {
 	navigationSlots: {
@@ -194,29 +243,30 @@ const publicApiTypecheck = {
 	},
 	slotStyle,
 	nestedInterpolatedStyle,
-	navigationMaskInterpolatedStyle,
-	legacyInterpolatedStyle,
 	gestureTarget,
+	animationTarget,
 	numericBoundsResult,
+	offsetBoundsResult,
+	deprecatedGesturesBoundsResult,
 	absoluteRawBoundsResult,
 	absoluteRawBoundsWidth,
 	absoluteRawBoundsTranslateX,
 	zoomInterpolatedStyle,
 	maybeContentHeight,
 	maybeCurrentContentHeight,
+	currentActiveGesture,
 	currentSnapIndex,
 	zoomOptions,
+	navigationMaskInterpolatedStyle,
 	nextNameOptions,
+	sharedGestureSensitivityOptions,
 	initialMountAnimationOptions,
-	deprecatedAliasOptions,
-	precedenceOptions,
+	disabledGestureTrackingOptions,
 	emptyInterpolatorOptions,
 	blankStackFactoryOptions,
-	viewBlankStackProps,
+	blankStackNavigationOptions,
 	independentBlankStackProps,
-	independentViewBlankStackProps,
 	staticBlankStack,
-	staticViewBlankStack,
 };
 
 void publicApiTypecheck;