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

package/lib/typescript/shared/utils/gesture/check-gesture-activation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"check-gesture-activation.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/check-gesture-activation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mFAAmF,CAAC;AACjI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAEN,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,UAAU,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,UAAU,2BAA2B;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8BD,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAiKD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA2EhC,CAAC"}
+{"version":3,"file":"check-gesture-activation.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/check-gesture-activation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mFAAmF,CAAC;AACjI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAEN,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,2BAA2B,CAAC;AAEnC,KAAK,UAAU,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,UAAU,2BAA2B;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8BD,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAiKD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA2EhC,CAAC"}

package/lib/typescript/shared/utils/gesture/reset-gesture-values.d.ts

@@ -1,6 +1,6 @@
 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";
 interface ResetGestureValuesProps {
     spec?: AnimationConfig;
     gestures: GestureStoreMap;

package/lib/typescript/shared/utils/gesture/reset-gesture-values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reset-gesture-values.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/reset-gesture-values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI7D,UAAU,uBAAuB;IAChC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,CAAC;IAC9D,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,eAAO,MAAM,kBAAkB,GAAI,uDAMhC,uBAAuB,SA2CzB,CAAC"}
+{"version":3,"file":"reset-gesture-values.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/gesture/reset-gesture-values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAInE,UAAU,uBAAuB;IAChC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,CAAC;IAC9D,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,eAAO,MAAM,kBAAkB,GAAI,uDAMhC,uBAAuB,SA2CzB,CAAC"}

package/lib/typescript/shared/utils/gesture/velocity.d.ts

@@ -1,5 +1,5 @@
 import type { GestureStateChangeEvent, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
-import type { AnimationStoreMap } from "../../stores/animation-store";
+import type { AnimationStoreMap } from "../../stores/animation.store";
 interface CalculateProgressProps {
     animations: AnimationStoreMap;
     shouldDismiss: boolean;

package/lib/typescript/shared/utils/reset-stores-for-screen.d.ts

@@ -0,0 +1,6 @@
+import type { TransitionDescriptor } from "../providers/keys.provider";
+/**
+ * Reset all stores for a given screen
+ */
+export declare const resetStoresForScreen: (current: TransitionDescriptor) => void;
+//# sourceMappingURL=reset-stores-for-screen.d.ts.map

package/lib/typescript/shared/utils/reset-stores-for-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset-stores-for-screen.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/reset-stores-for-screen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAIvE;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,oBAAoB,SAGjE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screen-transitions",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "description": "Easy screen transitions for React Native and Expo",
   "author": "Ed",
   "license": "MIT",

package/src/blank-stack/components/Overlay.tsx

@@ -5,7 +5,8 @@ import {
 import { useMemo } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { KeysProvider, useKeys } from "../../shared/providers/keys";
+import { useScreenAnimation } from "../../shared/hooks/animation/use-screen-animation";
+import { KeysProvider, useKeys } from "../../shared/providers/keys.provider";
 import { useOverlayAnimation } from "../hooks/use-overlay-animation";
 import type {
 	BlankStackDescriptor,
@@ -13,7 +14,6 @@ import type {
 	BlankStackScene,
 } from "../types";
 import { useStackNavigationContext } from "../utils/with-stack-navigation";
-import { useScreenAnimation } from "../../shared/hooks/animation/use-screen-animation";
 
 type OverlayHostProps = {
 	scene: BlankStackScene;
@@ -43,13 +43,33 @@ const getActiveFloatOverlay = (scenes: BlankStackScene[], index: number) => {
 	return null;
 };
 
-
 const OverlayHost = ({ scene, isFloating }: OverlayHostProps) => {
 	const insets = useSafeAreaInsets();
 
 	const OverlayComponent = scene.descriptor.options.overlay;
 
 	const { overlayAnimation, optimisticActiveIndex } = useOverlayAnimation();
+	const { scenes } = useStackNavigationContext();
+
+	const overlaySceneIndex = useMemo(() => {
+		return scenes.findIndex(
+			(stackScene) => stackScene.route.key === scene.route.key,
+		);
+	}, [scenes, scene.route.key]);
+
+	const focusedRoute = useMemo(() => {
+		if (overlaySceneIndex === -1) {
+			return scene.route;
+		}
+
+		const maxOffset = Math.max(scenes.length - overlaySceneIndex - 1, 0);
+		const normalizedIndex = Math.min(
+			Math.max(optimisticActiveIndex, 0),
+			maxOffset,
+		);
+
+		return scenes[overlaySceneIndex + normalizedIndex]?.route ?? scene.route;
+	}, [overlaySceneIndex, optimisticActiveIndex, scenes, scene.route]);
 
 	const screenAnimation = useScreenAnimation();
 
@@ -59,6 +79,7 @@ const OverlayHost = ({ scene, isFloating }: OverlayHostProps) => {
 
 	const overlayProps: BlankStackOverlayProps = {
 		route: scene.route,
+		focusedRoute,
 		navigation: scene.descriptor.navigation,
 		overlayAnimation,
 		screenAnimation,
@@ -71,7 +92,7 @@ const OverlayHost = ({ scene, isFloating }: OverlayHostProps) => {
 			pointerEvents="box-none"
 			style={[
 				styles.container,
-				isFloating ? styles.floating : null,
+				isFloating ? styles.floating : { zIndex: 1 },
 				styles.absolute,
 			]}
 		>
@@ -112,7 +133,6 @@ const FloatOverlay = () => {
 };
 
 const ScreenOverlay = () => {
-	const { focusedIndex } = useStackNavigationContext();
 	const { current } = useKeys<BlankStackDescriptor>();
 
 	const options = current.options;

package/src/blank-stack/components/Screens.tsx

@@ -8,12 +8,12 @@ import Animated, {
 	useSharedValue,
 } from "react-native-reanimated";
 import { Screen as RNSScreen } from "react-native-screens";
-import { AnimationStore } from "../../shared/stores/animation-store";
+import { AnimationStore } from "../../shared/stores/animation.store";
 
 interface ScreenProps {
 	routeKey: string;
 	index: number;
-	routes: NavigationRoute<ParamListBase, string>[];
+	routesLength: number;
 	isPreloaded: boolean;
 	children: React.ReactNode;
 	freezeOnBlur?: boolean;
@@ -32,7 +32,7 @@ const AnimatedScreen = Animated.createAnimatedComponent(RNSScreen);
 export const Screen = ({
 	routeKey,
 	index,
-	routes,
+	routesLength,
 	isPreloaded,
 	activeScreensLimit,
 	children,
@@ -48,13 +48,13 @@ export const Screen = ({
 			return;
 		}
 
-		if (index < routes.length - activeScreensLimit - 1 || isPreloaded) {
+		if (index < routesLength - activeScreensLimit - 1 || isPreloaded) {
 			screenActivity.value = STATE_INACTIVE;
 		} else {
 			const outputValue =
-				index === routes.length - 1
+				index === routesLength - 1
 					? STATE_ON_TOP
-					: index >= routes.length - activeScreensLimit
+					: index >= routesLength - activeScreensLimit
 						? STATE_TRANSITIONING_OR_BELOW_TOP
 						: STATE_INACTIVE;
 

package/src/blank-stack/components/StackView.tsx

@@ -3,10 +3,12 @@ import {
 	NavigationContext,
 	NavigationRouteContext,
 } from "@react-navigation/native";
+import * as React from "react";
+import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { ScreenContainer } from "react-native-screens";
 import { BlankStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
-import { ScreenTransitionProvider } from "../../shared/providers/screen-transition-provider";
+import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type { BlankStackDescriptor } from "../types";
 import { withStackNavigationProvider } from "../utils/with-stack-navigation";
 import { Overlay } from "./Overlay";
@@ -22,7 +24,7 @@ type SceneViewProps = {
 	sceneIndex: number;
 };
 
-const SceneView = ({ descriptor }: SceneViewProps) => {
+const SceneView = React.memo(({ descriptor }: SceneViewProps) => {
 	const { route, navigation, render } = descriptor;
 
 	return (
@@ -33,7 +35,7 @@ const SceneView = ({ descriptor }: SceneViewProps) => {
 			</NavigationRouteContext.Provider>
 		</NavigationContext.Provider>
 	);
-};
+});
 
 export const StackView = withStackNavigationProvider(
 	({
@@ -48,7 +50,7 @@ export const StackView = withStackNavigationProvider(
 			<GestureHandlerRootView>
 				<SafeAreaProviderCompat>
 					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-					<ScreenContainer style={{ flex: 1 }}>
+					<ScreenContainer style={styles.container}>
 						{scenes.map((scene, sceneIndex) => {
 							const descriptor = scene.descriptor;
 							const route = scene.route;
@@ -74,7 +76,7 @@ export const StackView = withStackNavigationProvider(
 									index={sceneIndex}
 									activeScreensLimit={activeScreensLimit}
 									routeKey={route.key}
-									routes={routes}
+									routesLength={routes.length}
 									shouldFreeze={shouldFreeze}
 									freezeOnBlur={descriptor.options.freezeOnBlur}
 								>
@@ -100,3 +102,7 @@ export const StackView = withStackNavigationProvider(
 		);
 	},
 );
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/blank-stack/hooks/use-overlay-animation.tsx

@@ -1,20 +1,11 @@
 import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
-import {
-	type DerivedValue,
-	type SharedValue,
-	useDerivedValue,
-	useSharedValue,
-} from "react-native-reanimated";
+import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useSharedValueState } from "../../shared/hooks/use-shared-value-state";
-import { useKeys } from "../../shared/providers/keys";
-import {
-	AnimationStore,
-	type AnimationStoreMap,
-} from "../../shared/stores/animation-store";
-import { GestureStore } from "../../shared/stores/gesture-store";
-import type { OverlayInterpolationProps } from "../../shared/types/animation";
+import { useSharedValueState } from "../../shared/hooks/reanimated/use-shared-value-state";
+import { useKeys } from "../../shared/providers/keys.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+import type { OverlayInterpolationProps } from "../../shared/types/animation.types";
 import { useStackNavigationContext } from "../utils/with-stack-navigation";
 
 /**
@@ -27,15 +18,9 @@ export const useOverlayAnimation = (): {
 	optimisticActiveIndex: number;
 } => {
 	const { current } = useKeys();
-	const { scenes, focusedIndex } = useStackNavigationContext();
+	const { scenes } = useStackNavigationContext();
 	const routeKey = current?.route?.key;
 
-	const gestureState = routeKey
-		? GestureStore.getRouteGestures(routeKey)
-		: null;
-
-	const fallbackIsDismissing = useSharedValue(0);
-
 	const progressValues = useMemo(() => {
 		if (!routeKey) {
 			return [];

package/src/blank-stack/index.ts

@@ -1,3 +1,4 @@
+export { useOverlayAnimation } from "../blank-stack/hooks/use-overlay-animation";
 export { createBlankStackNavigator } from "../blank-stack/navigators/createBlankStackNavigator";
 export type {
 	BlankStackNavigationEventMap,

package/src/blank-stack/types.ts

@@ -19,11 +19,11 @@ import type {
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	TransitionSpec,
-} from "../shared/types/animation";
+} from "../shared/types/animation.types";
 import type {
 	GestureActivationArea,
 	GestureDirection,
-} from "../shared/types/gesture";
+} from "../shared/types/gesture.types";
 
 export type BlankStackNavigationEventMap = {
 	/**
@@ -107,6 +107,10 @@ export type BlankStackOverlayProps = {
 	 * Route object for the current screen.
 	 */
 	route: Route<string>;
+	/**
+	 * Route object for the currently focused screen in the stack.
+	 */
+	focusedRoute: Route<string>;
 	/**
 	 * Navigation prop for the overlay.
 	 */

package/src/native-stack/types.ts

@@ -22,7 +22,7 @@ import type {
 	ScreenStackHeaderConfigProps,
 	SearchBarProps,
 } from "react-native-screens";
-import type { ScreenTransitionConfig } from "../shared/types/core";
+import type { ScreenTransitionConfig } from "../shared/types/core.types";
 
 export type Layout = {
 	width: number;

package/src/native-stack/views/NativeStackView.native.tsx

@@ -34,7 +34,7 @@ import {
 	ScreenStackItem,
 } from "react-native-screens";
 import { NativeStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
-import { ScreenTransitionProvider } from "../../shared/providers/screen-transition-provider";
+import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type {
 	NativeStackDescriptor,
 	NativeStackDescriptorMap,
@@ -513,11 +513,13 @@ export function NativeStackView({
 			return acc;
 		}, {});
 
+	const routes = state.routes.concat(state.preloadedRoutes);
+
 	return (
 		<GestureHandlerRootView>
 			<SafeAreaProviderCompat>
 				<ScreenStack style={styles.container}>
-					{state.routes.concat(state.preloadedRoutes).map((route, index) => {
+					{routes.map((route, index) => {
 						const descriptor =
 							descriptors[route.key] ?? preloadedDescriptors[route.key];
 						const isFocused = state.index === index;

package/src/shared/components/controllers/screen-lifecycle.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useLayoutEffect } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
+import { useAnimatedReaction, useDerivedValue } from "react-native-reanimated";
 import type { BlankStackDescriptor } from "../../../blank-stack/types";
 import { useStackNavigationContext } from "../../../blank-stack/utils/with-stack-navigation";
 import type { NativeStackDescriptor } from "../../../native-stack/types";
 import { useParentGestureRegistry } from "../../hooks/gestures/use-parent-gesture-registry";
+import { useSharedValueState } from "../../hooks/reanimated/use-shared-value-state";
 import useStableCallback from "../../hooks/use-stable-callback";
-import { useKeys } from "../../providers/keys";
-import { AnimationStore } from "../../stores/animation-store";
-import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
-import { resetStoresForScreen } from "../../stores/utils/reset-stores-for-screen";
+import { useGestureContext } from "../../providers/gestures.provider";
+import { useKeys } from "../../providers/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
 
 export interface ScreenLifecycleProps {
 	children: React.ReactNode;
@@ -22,19 +23,24 @@ export const NativeStackScreenLifecycleController = ({
 	children,
 }: ScreenLifecycleProps) => {
 	const { current } = useKeys<NativeStackDescriptor>();
+	const { parentContext } = useGestureContext();
+
+	const isParentDismissingViaGesture = useSharedValueState(
+		useDerivedValue(() => {
+			"worklet";
+			return parentContext?.gestureAnimationValues.isDismissing?.value ?? false;
+		}),
+	);
 
 	const animations = AnimationStore.getAll(current.route.key);
 
 	const handleBeforeRemove = useStableCallback((e: any) => {
-		const key = current.navigation.getParent()?.getState().key;
-		const requestedDismissOnNavigator = NavigatorDismissState.get(key);
-
 		const isEnabled = current.options.enableTransitions;
-		const isRequestedDismissOnNavigator = requestedDismissOnNavigator;
+
 		const isFirstScreen = current.navigation.getState().index === 0;
 
 		// If transitions are disabled, or the dismissal was on the local root, or this is the first screen of the stack, reset the stores
-		if (!isEnabled || isRequestedDismissOnNavigator || isFirstScreen) {
+		if (!isEnabled || isParentDismissingViaGesture || isFirstScreen) {
 			resetStoresForScreen(current);
 			return;
 		}
@@ -105,6 +111,10 @@ export const BlankStackScreenLifecycleController = ({
 		});
 	});
 
+	const handleCleanup = useStableCallback(() => {
+		resetStoresForScreen(current);
+	});
+
 	const handleCloseEnd = useStableCallback((finished: boolean) => {
 		if (!finished) {
 			return;
@@ -130,7 +140,12 @@ export const BlankStackScreenLifecycleController = ({
 		},
 	);
 
-	useLayoutEffect(handleInitialize);
+	useLayoutEffect(() => {
+		handleInitialize();
+		return () => {
+			handleCleanup();
+		};
+	}, [handleInitialize, handleCleanup]);
 
 	// important for t.a scrollviews inside nested navigators.
 	useParentGestureRegistry();

package/src/shared/components/create-transition-aware-component.tsx

@@ -4,11 +4,11 @@ import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnUI, useAnimatedRef } from "react-native-reanimated";
 import { useAssociatedStyles } from "../hooks/animation/use-associated-style";
-import { useBoundsRegistry } from "../hooks/bounds/use-bound-registry";
 import { useScrollRegistry } from "../hooks/gestures/use-scroll-registry";
-import { useGestureContext } from "../providers/gestures";
-import type { TransitionAwareProps } from "../types/core";
-import type { Any } from "../types/utils";
+import { useGestureContext } from "../providers/gestures.provider";
+import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
+import type { TransitionAwareProps } from "../types/core.types";
+import type { Any } from "../types/utils.types";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
@@ -61,30 +61,26 @@ export function createTransitionAwareComponent<P extends object>(
 			style,
 		});
 
-		const {
-			handleInitialLayout,
-			captureActiveOnPress,
-			MeasurementSyncProvider,
-		} = useBoundsRegistry({
-			sharedBoundTag,
-			animatedRef,
-			style,
-			onPress,
-		});
-
 		return (
-			<MeasurementSyncProvider>
-				<AnimatedComponent
-					{...(rest as Any)}
-					ref={animatedRef}
-					style={[style, associatedStyles]}
-					onPress={captureActiveOnPress}
-					onLayout={runOnUI(handleInitialLayout)}
-					collapsable={!sharedBoundTag}
-				>
-					{children}
-				</AnimatedComponent>
-			</MeasurementSyncProvider>
+			<RegisterBoundsProvider
+				animatedRef={animatedRef}
+				style={style}
+				onPress={onPress}
+				sharedBoundTag={sharedBoundTag}
+			>
+				{({ captureActiveOnPress, handleInitialLayout }) => (
+					<AnimatedComponent
+						{...(rest as Any)}
+						ref={animatedRef}
+						style={[style, associatedStyles]}
+						onPress={captureActiveOnPress}
+						onLayout={runOnUI(handleInitialLayout)}
+						collapsable={!sharedBoundTag}
+					>
+						{children}
+					</AnimatedComponent>
+				)}
+			</RegisterBoundsProvider>
 		);
 	});
 

package/src/shared/components/root-transition-aware.tsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { NO_STYLES } from "../constants";
-import { useTransitionStyles } from "../providers/transition-styles";
+import { useTransitionStyles } from "../providers/transition-styles.provider";
 
 type Props = {
 	children: React.ReactNode;

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>,
 	});