react-native-screen-transitions 3.0.0-beta.9 → 3.0.0-rc.2

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;
@@ -13,6 +13,7 @@ export const SlideFromTop = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: "vertical-inverted",
@@ -45,6 +46,7 @@ export const ZoomIn = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: false,
 		screenStyleInterpolator: ({ progress }) => {
@@ -83,6 +85,7 @@ export const SlideFromBottom = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: "vertical",
@@ -114,6 +117,7 @@ export const DraggableCard = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["horizontal", "vertical"],
@@ -159,6 +163,7 @@ export const ElasticCard = (
 	} = { elasticFactor: 0.5 },
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: "bidirectional",
@@ -216,9 +221,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 +240,6 @@ export const SharedIGImage = (
 			bounds,
 			progress,
 			focused,
-			activeBoundId,
 			active,
 		}) => {
 			"worklet";
@@ -257,6 +264,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 +273,7 @@ export const SharedIGImage = (
 			// focused specific animations
 			if (focused) {
 				const maskedValues = bounds({
+					id: sharedBoundTag,
 					space: "absolute",
 					target: "fullscreen",
 					method: "size",
@@ -309,7 +318,7 @@ export const SharedIGImage = (
 				contentStyle: {
 					pointerEvents: current.gesture.isDismissing ? "none" : "auto",
 				},
-				[activeBoundId]: {
+				[sharedBoundTag]: {
 					transform: [
 						{ translateX: dragX || 0 },
 						{ translateY: dragY || 0 },
@@ -345,9 +354,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 +367,6 @@ export const SharedAppleMusic = (
 		gestureDrivesProgress: false,
 		screenStyleInterpolator: ({
 			bounds,
-			activeBoundId,
 			focused,
 			progress,
 			layouts: { screen },
@@ -395,6 +406,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 +427,7 @@ export const SharedAppleMusic = (
 			 */
 			if (focused) {
 				const maskedValues = bounds({
+					id: sharedBoundTag,
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",
@@ -501,7 +514,7 @@ export const SharedAppleMusic = (
 			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
 
 			return {
-				[activeBoundId]: {
+				[sharedBoundTag]: {
 					transform: [
 						{ translateX: dragX || 0 },
 						{ translateY: dragY || 0 },
@@ -527,7 +540,7 @@ export const SharedAppleMusic = (
 				damping: 500,
 				mass: 3,
 				overshootClamping: true,
-				//@ts-expect-error
+				//@ts-expect-error - Should not lead to any issues
 				restSpeedThreshold: 0.02,
 			},
 			close: {
@@ -535,7 +548,7 @@ export const SharedAppleMusic = (
 				damping: 60,
 				mass: 4,
 				overshootClamping: false,
-				//@ts-expect-error
+				//@ts-expect-error - Should not lead to any issues
 				restSpeedThreshold: 0.02,
 				restDisplacementThreshold: 0.002,
 			},
@@ -544,17 +557,20 @@ export const SharedAppleMusic = (
 	};
 };
 
-export const SharedXImage = (
-	config: Partial<ScreenTransitionConfig> = {},
-): ScreenTransitionConfig => {
+export const SharedXImage = ({
+	sharedBoundTag,
+	...config
+}: Partial<ScreenTransitionConfig> & {
+	sharedBoundTag: string;
+}): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "vertical-inverted"],
 		gestureDrivesProgress: false,
 		screenStyleInterpolator: ({
 			focused,
-			activeBoundId,
 			bounds,
 			current,
 			layouts: { screen },
@@ -565,7 +581,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 +616,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

@@ -3,19 +3,19 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
+import type { NativeStackScreenTransitionConfig } from "../../../native-stack/types";
+import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../constants";
 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";
+	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 type { ScreenTransitionConfig } from "../../types/core.types";
 import { derivations } from "../../utils/animation/derivations";
 import { createBounds } from "../../utils/bounds";
 
@@ -47,7 +47,6 @@ const unwrap = (
 			isDragging: s.gesture.isDragging.value,
 			direction: s.gesture.direction.value,
 		},
-		bounds: BoundStore.getBounds(key) || NO_BOUNDS_MAP,
 		route: s.route,
 	};
 };
@@ -70,6 +69,11 @@ const useBuildScreenTransitionState = (
 	}, [key, descriptor?.route]);
 };
 
+const hasTransitionsEnabled = (options?: ScreenTransitionConfig) => {
+	"worklet";
+	return !!(options as NativeStackScreenTransitionConfig)?.enableTransitions;
+};
+
 export function _useScreenAnimation() {
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
@@ -91,7 +95,7 @@ export function _useScreenAnimation() {
 
 		const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
 
-		const next = nextDescriptor?.options?.enableTransitions
+		const next = hasTransitionsEnabled(nextDescriptor?.options)
 			? unwrap(nextAnimation, nextDescriptor?.route.key)
 			: undefined;
 
@@ -99,17 +103,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 +114,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,