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

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 = {
 	/**

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,16 +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 { useDerivedValueState } from "../../hooks/use-derived-value-state";
+import { useSharedValueState } from "../../hooks/reanimated/use-shared-value-state";
 import useStableCallback from "../../hooks/use-stable-callback";
-import { useGestureContext } from "../../providers/gestures";
-import { useKeys } from "../../providers/keys";
-import { AnimationStore } from "../../stores/animation-store";
-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;
@@ -25,10 +25,12 @@ export const NativeStackScreenLifecycleController = ({
 	const { current } = useKeys<NativeStackDescriptor>();
 	const { parentContext } = useGestureContext();
 
-	const isParentDismissingViaGesture = useDerivedValueState(() => {
-		"worklet";
-		return parentContext?.gestureAnimationValues.isDismissing?.value ?? false;
-	});
+	const isParentDismissingViaGesture = useSharedValueState(
+		useDerivedValue(() => {
+			"worklet";
+			return parentContext?.gestureAnimationValues.isDismissing?.value ?? false;
+		}),
+	);
 
 	const animations = AnimationStore.getAll(current.route.key);
 

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

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, ancestorStylesMaps } = 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,18 @@ 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 ownStyle = stylesMap.value[id];
+
+		const ancestorStyle = ancestorStylesMaps.find(
+			(ancestorMap) => ancestorMap.value[id],
+		)?.value[id];
+
+		const base = ownStyle || ancestorStyle || NO_STYLES;
 
 		let opacity = 1;
 
@@ -50,13 +56,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,18 +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";
 
@@ -47,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,
 	};
 };
@@ -99,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 {
@@ -118,13 +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";
 
 /**
@@ -14,7 +14,5 @@ export const useParentGestureRegistry = () => {
 		}
 	});
 
-	useEffect(() => {
-		registerNativeGesture();
-	}, [registerNativeGesture]);
+	useEffect(registerNativeGesture);
 };

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,