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

package/src/shared/configs/presets.ts

@@ -4,7 +4,7 @@ import {
 	interpolate,
 	interpolateColor,
 } from "react-native-reanimated";
-import type { ScreenTransitionConfig } from "../types/core";
+import type { ScreenTransitionConfig } from "../types/core.types";
 import { DefaultSpec } from "./specs";
 
 const platform = Platform.OS;
@@ -216,9 +216,12 @@ export const ElasticCard = (
 	};
 };
 
-export const SharedIGImage = (
-	config: Partial<ScreenTransitionConfig> = {},
-): ScreenTransitionConfig => {
+export const SharedIGImage = ({
+	sharedBoundTag,
+	...config
+}: Partial<ScreenTransitionConfig> & {
+	sharedBoundTag: string;
+}): ScreenTransitionConfig => {
 	return {
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
@@ -232,7 +235,6 @@ export const SharedIGImage = (
 			bounds,
 			progress,
 			focused,
-			activeBoundId,
 			active,
 		}) => {
 			"worklet";
@@ -257,6 +259,7 @@ export const SharedIGImage = (
 			const dragYScale = interpolate(normY, [0, 1], [1, 0.8]);
 
 			const boundValues = bounds({
+				id: sharedBoundTag,
 				method: focused ? "content" : "transform",
 				scaleMode: "uniform",
 				raw: true,
@@ -265,6 +268,7 @@ export const SharedIGImage = (
 			// focused specific animations
 			if (focused) {
 				const maskedValues = bounds({
+					id: sharedBoundTag,
 					space: "absolute",
 					target: "fullscreen",
 					method: "size",
@@ -309,7 +313,7 @@ export const SharedIGImage = (
 				contentStyle: {
 					pointerEvents: current.gesture.isDismissing ? "none" : "auto",
 				},
-				[activeBoundId]: {
+				[sharedBoundTag]: {
 					transform: [
 						{ translateX: dragX || 0 },
 						{ translateY: dragY || 0 },
@@ -345,9 +349,12 @@ export const SharedIGImage = (
 	};
 };
 
-export const SharedAppleMusic = (
-	config: Partial<ScreenTransitionConfig> = {},
-): ScreenTransitionConfig => {
+export const SharedAppleMusic = ({
+	sharedBoundTag,
+	...config
+}: Partial<ScreenTransitionConfig> & {
+	sharedBoundTag: string;
+}): ScreenTransitionConfig => {
 	return {
 		enableTransitions: true,
 		gestureEnabled: true,
@@ -355,7 +362,6 @@ export const SharedAppleMusic = (
 		gestureDrivesProgress: false,
 		screenStyleInterpolator: ({
 			bounds,
-			activeBoundId,
 			focused,
 			progress,
 			layouts: { screen },
@@ -395,6 +401,7 @@ export const SharedAppleMusic = (
 			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
 
 			const boundValues = bounds({
+				id: sharedBoundTag,
 				method: focused ? "content" : "transform",
 				anchor: "top",
 				scaleMode: "uniform",
@@ -415,6 +422,7 @@ export const SharedAppleMusic = (
 			 */
 			if (focused) {
 				const maskedValues = bounds({
+					id: sharedBoundTag,
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",
@@ -501,7 +509,7 @@ export const SharedAppleMusic = (
 			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
 
 			return {
-				[activeBoundId]: {
+				[sharedBoundTag]: {
 					transform: [
 						{ translateX: dragX || 0 },
 						{ translateY: dragY || 0 },
@@ -544,9 +552,12 @@ export const SharedAppleMusic = (
 	};
 };
 
-export const SharedXImage = (
-	config: Partial<ScreenTransitionConfig> = {},
-): ScreenTransitionConfig => {
+export const SharedXImage = ({
+	sharedBoundTag,
+	...config
+}: Partial<ScreenTransitionConfig> & {
+	sharedBoundTag: string;
+}): ScreenTransitionConfig => {
 	return {
 		enableTransitions: true,
 		gestureEnabled: true,
@@ -554,7 +565,6 @@ export const SharedXImage = (
 		gestureDrivesProgress: false,
 		screenStyleInterpolator: ({
 			focused,
-			activeBoundId,
 			bounds,
 			current,
 			layouts: { screen },
@@ -565,7 +575,11 @@ export const SharedXImage = (
 			// twitter doesn't animate the unfocused screen
 			if (!focused) return {};
 
-			const boundValues = bounds({ method: "transform", raw: true });
+			const boundValues = bounds({
+				id: sharedBoundTag,
+				method: "transform",
+				raw: true,
+			});
 
 			// content styles
 			const dragY = interpolate(
@@ -596,7 +610,7 @@ export const SharedXImage = (
 			const scaleY = !current.closing ? boundValues.scaleY : 1;
 
 			return {
-				[activeBoundId]: {
+				[sharedBoundTag]: {
 					transform: [
 						{
 							translateX: x,

package/src/shared/constants.ts

@@ -1,11 +1,11 @@
 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 { Layout } from "./types/core";
-import type { ActivationArea } from "./types/gesture";
-import type { Complete } from "./types/utils";
-import type { BoundsBuilderOptions } from "./utils/bounds/_types/builder";
+import type { ScreenTransitionState } from "./types/animation.types";
+import type { BoundEntry } from "./types/bounds.types";
+import type { Layout } from "./types/core.types";
+import type { ActivationArea } from "./types/gesture.types";
+import type { Complete } from "./types/utils.types";
+import type { BoundsBuilderOptions } from "./utils/bounds/types/builder";
 
 /**
  * Masked view integration
@@ -35,7 +35,6 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 			isDragging: 0,
 			direction: null,
 		},
-		bounds: {} as Record<string, BoundEntry>,
 		route: {} as RouteProp<ParamListBase>,
 	});
 

package/src/shared/hooks/animation/use-associated-style.tsx

@@ -5,7 +5,7 @@ import {
 	useSharedValue,
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../constants";
-import { useTransitionStyles } from "../../providers/transition-styles";
+import { useTransitionStyles } from "../../providers/transition-styles.provider";
 
 type Props = {
 	id?: string;
@@ -16,14 +16,12 @@ type Props = {
  * This hook is used to get the associated styles for a given styleId / boundTag.
  */
 export const useAssociatedStyles = ({ id }: Props = {}) => {
-	const { stylesMap } = useTransitionStyles();
+	const { stylesMap, parentStylesMap } = useTransitionStyles();
 	const showAfterFirstFrame = useSharedValue(false);
 
 	useDerivedValue(() => {
 		"worklet";
 
-		// If the associated styles have already been shown, return.
-
 		if (!id) {
 			showAfterFirstFrame.value = true;
 			return;
@@ -39,10 +37,14 @@ export const useAssociatedStyles = ({ id }: Props = {}) => {
 	const associatedStyles = useAnimatedStyle(() => {
 		"worklet";
 
-		if (!id || !stylesMap) {
+		if (!id) {
 			return NO_STYLES;
 		}
-		const base = stylesMap.value[id] || NO_STYLES;
+
+		// Check local styles first, then fall back to parent
+		const localStyles = stylesMap?.value[id];
+		const parentStyles = parentStylesMap?.value[id];
+		const base = localStyles || parentStyles || NO_STYLES;
 
 		let opacity = 1;
 
@@ -50,13 +52,10 @@ export const useAssociatedStyles = ({ id }: Props = {}) => {
 			opacity = base.opacity as number;
 		}
 
-		// Only force opacity to 0 during the initial frame; once ready,
-		// return base unchanged so we never override user-provided opacity.
 		if (!showAfterFirstFrame.value) {
 			return { ...base, opacity: 0 };
 		}
 
-		// Since opacity exists on the base style, we don't need to override it.
 		if ("opacity" in base) {
 			return base;
 		}

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

@@ -4,19 +4,15 @@ 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 { type TransitionDescriptor, useKeys } from "../../providers/keys";
-
-import { AnimationStore } from "../../stores/animation-store";
-import { BoundStore } from "../../stores/bound-store";
-import { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
+import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../constants";
+import { type TransitionDescriptor, useKeys } from "../../providers/keys.provider";
+
+import { AnimationStore } from "../../stores/animation.store";
+import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenTransitionState,
-} from "../../types/animation";
+} from "../../types/animation.types";
 import { derivations } from "../../utils/animation/derivations";
 import { createBounds } from "../../utils/bounds";
 
@@ -48,7 +44,6 @@ const unwrap = (
 			isDragging: s.gesture.isDragging.value,
 			direction: s.gesture.direction.value,
 		},
-		bounds: BoundStore.getBounds(key) || NO_BOUNDS_MAP,
 		route: s.route,
 	};
 };
@@ -100,17 +95,9 @@ export function _useScreenAnimation() {
 			unwrap(currentAnimation, currentDescriptor?.route.key) ??
 			DEFAULT_SCREEN_TRANSITION_STATE;
 
-		const {
-			progress,
-			focused,
-			activeBoundId,
-			active,
-			isActiveTransitioning,
-			isDismissing,
-		} = derivations({
+		const helpers = derivations({
 			current,
 			next,
-			previous,
 		});
 
 		return {
@@ -119,12 +106,7 @@ export function _useScreenAnimation() {
 			previous,
 			current,
 			next,
-			focused,
-			activeBoundId,
-			progress,
-			active,
-			isActiveTransitioning,
-			isDismissing,
+			...helpers,
 		};
 	});
 

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -21,12 +21,12 @@ import {
 import type {
 	GestureContextType,
 	ScrollConfig,
-} from "../../providers/gestures";
-import { useKeys } from "../../providers/keys";
-import { AnimationStore } from "../../stores/animation-store";
-import { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
+} from "../../providers/gestures.provider";
+import { useKeys } from "../../providers/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
+import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 
-import { type GestureDirection, GestureOffsetState } from "../../types/gesture";
+import { type GestureDirection, GestureOffsetState } from "../../types/gesture.types";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
 import { determineDismissal } from "../../utils/gesture/determine-dismissal";

package/src/shared/hooks/gestures/use-parent-gesture-registry.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useGestureContext } from "../../providers/gestures";
+import { useGestureContext } from "../../providers/gestures.provider";
 import useStableCallback from "../use-stable-callback";
 
 /**

package/src/shared/hooks/gestures/use-scroll-registry.tsx

@@ -1,8 +1,8 @@
 import type { LayoutChangeEvent } from "react-native";
 import { useAnimatedScrollHandler } from "react-native-reanimated";
 import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";
-import { useGestureContext } from "../../providers/gestures";
-import type { Any } from "../../types/utils";
+import { useGestureContext } from "../../providers/gestures.provider";
+import type { Any } from "../../types/utils.types";
 import useStableCallback from "../use-stable-callback";
 
 interface ScrollProgressHookProps {

package/src/shared/index.ts

@@ -25,5 +25,5 @@ export type {
 	OverlayInterpolationProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
-} from "./types/animation";
-export type { ScreenTransitionConfig } from "./types/core";
+} from "./types/animation.types";
+export type { ScreenTransitionConfig } from "./types/core.types";

package/src/shared/providers/{gestures.tsx → gestures.provider.tsx}

@@ -5,7 +5,7 @@ import { GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import { useSharedValue } from "react-native-reanimated";
 import { useBuildGestures } from "../hooks/gestures/use-build-gestures";
-import type { GestureStoreMap } from "../stores/gesture-store";
+import type { GestureStoreMap } from "../stores/gesture.store";
 
 export type ScrollConfig = {
 	x: number;

package/src/shared/providers/{keys.tsx → keys.provider.tsx}

@@ -5,7 +5,7 @@ import type {
 	RouteProp,
 } from "@react-navigation/native";
 import { createContext, useContext, useMemo } from "react";
-import type { ScreenTransitionConfig } from "../types/core";
+import type { ScreenTransitionConfig } from "../types/core.types";
 
 export type TransitionDescriptor = Descriptor<
 	ScreenTransitionConfig,

package/src/shared/providers/register-bounds.provider.tsx

@@ -0,0 +1,284 @@
+import {
+	type ReactNode,
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} 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 useStableCallback from "../hooks/use-stable-callback";
+import useStableCallbackValue from "../hooks/use-stable-callback-value";
+import { AnimationStore } from "../stores/animation.store";
+import { BoundStore } from "../stores/bounds.store";
+import { prepareStyleForBounds } from "../utils/bounds/helpers/styles";
+import createProvider from "../utils/create-provider";
+import { type TransitionDescriptor, useKeys } from "./keys.provider";
+
+interface MaybeMeasureAndStoreParams {
+	onPress?: ((...args: unknown[]) => void) | undefined;
+	shouldSetSource?: boolean;
+	shouldSetDestination?: boolean;
+}
+
+interface RegisterBoundsRenderProps {
+	handleInitialLayout: () => void;
+	captureActiveOnPress: () => void;
+}
+
+interface RegisterBoundsProviderProps {
+	sharedBoundTag?: string;
+	animatedRef: AnimatedRef<View>;
+	style: StyleProps;
+	onPress?: ((...args: unknown[]) => void) | undefined;
+	children: (props: RegisterBoundsRenderProps) => ReactNode;
+}
+
+interface RegisterBoundsContextValue {
+	updateSignal: SharedValue<number>;
+}
+
+/**
+ * Gets the parent screen's route key for nested navigators.
+ * Returns undefined if we're not inside a nested navigator.
+ */
+const getParentScreenKey = (current: TransitionDescriptor) => {
+	const parent = current.navigation.getParent();
+	if (!parent) return undefined;
+
+	const parentState = parent.getState();
+	if (!parentState?.routes) return undefined;
+
+	// Check if our route key exists directly in parent's routes
+	const existsInParent = parentState.routes.some(
+		(r) => r.key === current.route.key,
+	);
+
+	// If we don't exist in parent's routes, we're nested inside the focused route
+	if (!existsInParent && parentState.index !== undefined) {
+		return parentState.routes[parentState.index]?.key;
+	}
+
+	return undefined;
+};
+
+/**
+ * Handles initial layout measurement for destination elements.
+ * Only measures if an animation is in progress (local or parent).
+ */
+const useInitialLayoutHandler = (params: {
+	sharedBoundTag?: string;
+	currentScreenKey: string;
+	parentScreenKey?: string;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const {
+		sharedBoundTag,
+		currentScreenKey,
+		parentScreenKey,
+		maybeMeasureAndStore,
+	} = params;
+
+	const isAnimating = AnimationStore.getAnimation(
+		currentScreenKey,
+		"animating",
+	);
+	const isParentAnimating = parentScreenKey
+		? AnimationStore.getAnimation(parentScreenKey, "animating")
+		: null;
+
+	const hasMeasuredOnLayout = useSharedValue(false);
+
+	return useCallback(() => {
+		"worklet";
+		if (!sharedBoundTag || hasMeasuredOnLayout.value) return;
+		if (!isAnimating.value && !isParentAnimating?.value) return;
+
+		maybeMeasureAndStore({
+			shouldSetSource: false,
+			shouldSetDestination: true,
+		});
+
+		hasMeasuredOnLayout.value = true;
+	}, [
+		sharedBoundTag,
+		hasMeasuredOnLayout,
+		isAnimating,
+		isParentAnimating,
+		maybeMeasureAndStore,
+	]);
+};
+
+/**
+ * Measures non-pressable elements when screen becomes blurred.
+ * Captures bounds right before transition starts.
+ */
+const useBlurMeasurement = (params: {
+	sharedBoundTag?: string;
+	next?: TransitionDescriptor;
+	onPress?: () => void;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const { sharedBoundTag, next, onPress, maybeMeasureAndStore } = params;
+	const prevNextRef = useRef(next);
+
+	useLayoutEffect(() => {
+		if (!sharedBoundTag || onPress) return;
+
+		const hadNext = !!prevNextRef.current;
+		const hasNext = !!next;
+
+		// Screen went from focused to blurred
+		if (!hadNext && hasNext) {
+			runOnUI(maybeMeasureAndStore)({ shouldSetSource: true });
+		}
+
+		prevNextRef.current = next;
+	}, [next, sharedBoundTag, onPress, maybeMeasureAndStore]);
+};
+
+/**
+ * Syncs child measurements when parent updates.
+ */
+const useParentSyncReaction = (params: {
+	parentContext: RegisterBoundsContextValue | null;
+	maybeMeasureAndStore: (options?: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const { parentContext, maybeMeasureAndStore } = params;
+
+	useAnimatedReaction(
+		() => parentContext?.updateSignal.value,
+		(value) => {
+			"worklet";
+			if (value === 0 || value === undefined) return;
+			maybeMeasureAndStore();
+		},
+	);
+};
+
+const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
+	"RegisterBounds",
+	{ guarded: false },
+)<RegisterBoundsProviderProps, RegisterBoundsContextValue>(
+	({ style, onPress, sharedBoundTag, animatedRef, children }) => {
+		const { current, next } = useKeys();
+		const currentScreenKey = current.route.key;
+		const parentScreenKey = getParentScreenKey(current);
+
+		// Context & signals
+		const parentContext: RegisterBoundsContextValue | null =
+			useRegisterBoundsContext();
+		const ownSignal = useSharedValue(0);
+		const updateSignal: SharedValue<number> =
+			parentContext?.updateSignal ?? ownSignal;
+
+		const isAnimating = AnimationStore.getAnimation(
+			currentScreenKey,
+			"animating",
+		);
+		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
+
+		const emitUpdate = useStableCallbackValue(() => {
+			"worklet";
+			const isRoot = !parentContext;
+			if (isRoot) updateSignal.value = updateSignal.value + 1;
+		});
+
+		const maybeMeasureAndStore = useStableCallbackValue(
+			({
+				onPress,
+				shouldSetSource,
+				shouldSetDestination,
+			}: MaybeMeasureAndStoreParams = {}) => {
+				"worklet";
+				if (!sharedBoundTag) return;
+
+				const measured = measure(animatedRef);
+				if (!measured) return;
+
+				emitUpdate();
+
+				// Always register occurrence
+				BoundStore.registerOccurrence(
+					sharedBoundTag,
+					currentScreenKey,
+					measured,
+					preparedStyles,
+				);
+
+				// Set as source (on press or blur)
+				if (shouldSetSource) {
+					if (isAnimating.value) {
+						const existing = BoundStore.getOccurrence(
+							sharedBoundTag,
+							currentScreenKey,
+						);
+						BoundStore.setLinkSource(
+							sharedBoundTag,
+							currentScreenKey,
+							existing.bounds,
+							preparedStyles,
+							parentScreenKey,
+						);
+						return;
+					}
+					BoundStore.setLinkSource(
+						sharedBoundTag,
+						currentScreenKey,
+						measured,
+						preparedStyles,
+						parentScreenKey,
+					);
+				}
+
+				// Set as destination (on mount during animation)
+				if (shouldSetDestination) {
+					BoundStore.setLinkDestination(
+						sharedBoundTag,
+						currentScreenKey,
+						measured,
+						preparedStyles,
+						parentScreenKey,
+					);
+				}
+
+				if (onPress) runOnJS(onPress)();
+			},
+		);
+
+		const handleInitialLayout = useInitialLayoutHandler({
+			sharedBoundTag,
+			currentScreenKey,
+			parentScreenKey,
+			maybeMeasureAndStore,
+		});
+
+		const captureActiveOnPress = useStableCallback(() => {
+			if (!sharedBoundTag) {
+				onPress?.();
+				return;
+			}
+			runOnUI(maybeMeasureAndStore)({ onPress, shouldSetSource: true });
+		});
+
+		// Side effects
+		useBlurMeasurement({ sharedBoundTag, next, onPress, maybeMeasureAndStore });
+		useParentSyncReaction({ parentContext, maybeMeasureAndStore });
+
+		return {
+			value: { updateSignal },
+			children: children({ handleInitialLayout, captureActiveOnPress }),
+		};
+	},
+);
+
+export { RegisterBoundsProvider };

package/src/shared/providers/{screen-transition-provider.tsx → screen-transition.provider.tsx}

@@ -2,9 +2,9 @@ import type React from "react";
 import type { ComponentType } from "react";
 import type { ScreenLifecycleProps } from "../components/controllers/screen-lifecycle";
 import { RootTransitionAware } from "../components/root-transition-aware";
-import { ScreenGestureProvider } from "../providers/gestures";
-import { KeysProvider, type TransitionDescriptor } from "../providers/keys";
-import { TransitionStylesProvider } from "../providers/transition-styles";
+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;