react-native-screen-transitions 3.9.0-alpha.1 → 3.9.0-alpha.3

package/src/shared/components/boundary/utils/destination-signals.ts

@@ -1,3 +1,7 @@
+import {
+	getActiveGroupId,
+	getLinkKeyFromTag,
+} from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type {
 	LinkPairsState,
 	ScreenPairKey,
@@ -8,6 +12,7 @@ export const getInitialDestinationMeasurePairKey = (params: {
 	destinationPairKey?: ScreenPairKey;
 	ancestorDestinationPairKey?: ScreenPairKey;
 	linkId: string;
+	group?: string;
 	linkState?: LinkPairsState;
 }): ScreenPairKey | null => {
 	"worklet";
@@ -16,6 +21,7 @@ export const getInitialDestinationMeasurePairKey = (params: {
 		destinationPairKey,
 		ancestorDestinationPairKey,
 		linkId,
+		group,
 		linkState,
 	} = params;
 	const measurePairKey = destinationPairKey ?? ancestorDestinationPairKey;
@@ -24,8 +30,22 @@ export const getInitialDestinationMeasurePairKey = (params: {
 		return null;
 	}
 
+	const linkKey = getLinkKeyFromTag(linkId);
 	const hasDestination =
-		linkState?.[measurePairKey]?.links?.[linkId]?.destination;
+		linkState?.[measurePairKey]?.links?.[linkKey]?.destination;
 
-	return hasDestination ? null : measurePairKey;
+	if (hasDestination) {
+		return null;
+	}
+
+	const activeGroupId =
+		group && linkState
+			? getActiveGroupId(linkState, measurePairKey, group)
+			: null;
+
+	if (activeGroupId && activeGroupId !== linkKey) {
+		return null;
+	}
+
+	return measurePairKey;
 };

package/src/shared/components/boundary/utils/refresh-signals.ts

@@ -26,19 +26,6 @@ const buildRefreshSignal = (
 	};
 };
 
-const isMatchedScreenPortalDestinationRefresh = (
-	linkState: LinkPairsState | undefined,
-	pairKey: ScreenPairKey,
-	linkId: string,
-) => {
-	"worklet";
-
-	return (
-		linkState?.[pairKey]?.links?.[linkId]?.source?.portalAttachTarget ===
-		"matched-screen"
-	);
-};
-
 export const getRefreshBoundarySignal = (params: {
 	enabled: boolean;
 	currentScreenKey: string;
@@ -99,22 +86,6 @@ export const getRefreshBoundarySignal = (params: {
 			return null;
 		}
 
-		// NOTE:
-		// Matched-screen portals use the destination as the initial host/anchor.
-		// Once attached, the teleported source is the thing being animated, so a
-		// fresh destination measure would mix in a second coordinate basis. Signals were introduced for scroll view cases + group
-		// cases, but I can't find a case for where a live component ( matched-screen ) would need this complexity. I would just assume
-		// you would want this for a->b | b->a transitions.
-		if (
-			isMatchedScreenPortalDestinationRefresh(
-				linkState,
-				refreshDestinationPairKey,
-				linkId,
-			)
-		) {
-			return null;
-		}
-
 		return buildRefreshSignal(
 			"destination",
 			refreshDestinationPairKey,
@@ -155,18 +126,6 @@ export const getRefreshBoundarySignal = (params: {
 		return null;
 	}
 
-	// NOTE:
-	// see above for explanation
-	if (
-		isMatchedScreenPortalDestinationRefresh(
-			linkState,
-			refreshDestinationPairKey,
-			linkId,
-		)
-	) {
-		return null;
-	}
-
 	return buildRefreshSignal(
 		"destination",
 		refreshDestinationPairKey,

package/src/shared/components/boundary/utils/source-signals.ts

@@ -15,32 +15,20 @@ export const getInitialSourceCaptureSignal = (params: {
 	sourcePairKey?: ScreenPairKey;
 	linkId: string;
 	group?: string;
-	shouldAutoMeasure: boolean;
 	linkState?: LinkPairsState;
 }): SourceCaptureSignal | null => {
 	"worklet";
-	const {
-		enabled,
-		sourcePairKey,
-		linkId,
-		group,
-		shouldAutoMeasure,
-		linkState,
-	} = params;
+	const { enabled, sourcePairKey, linkId, group, linkState } = params;
 
 	if (!enabled || !sourcePairKey) {
 		return null;
 	}
 
-	// Trigger components capture on press. Passive Boundary.View sources wait for
-	// their destination side to attach, then capture into the same assigned pair.
-	if (!shouldAutoMeasure) {
-		return null;
-	}
-
-	const link = linkState?.[sourcePairKey]?.links?.[linkId];
+	const pair = linkState?.[sourcePairKey];
+	const link = pair?.links?.[linkId];
+	const hasSourceRequest = pair?.sourceRequests?.[linkId];
 
-	if (!link?.destination || link.source) {
+	if ((!link?.destination && !hasSourceRequest) || link?.source) {
 		return null;
 	}
 

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

@@ -5,18 +5,15 @@ import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
 	runOnUI,
-	useAnimatedProps,
 	useAnimatedRef,
-	useAnimatedStyle,
 	useComposedEventHandler,
 } from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../constants";
 import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
 import {
 	ScrollMetadataOwnerProvider,
 	useScrollGestureCoordination,
 } from "../providers/screen/gestures/scroll-coordination";
-import { useScreenStyles } from "../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../providers/screen/styles";
 import type { TransitionAwareProps } from "../types/screen.types";
 
 interface CreateTransitionAwareComponentOptions {
@@ -128,28 +125,9 @@ export function createTransitionAwareComponent<P extends object>(
 		} = props as any;
 
 		const animatedRef = useAnimatedRef<View>();
-		const { stylesMap } = useScreenStyles();
 		const associatedId = sharedBoundTag || styleId;
-
-		const associatedStyles = useAnimatedStyle(() => {
-			"worklet";
-
-			if (!associatedId) {
-				return NO_STYLES;
-			}
-
-			return stylesMap.get()[associatedId]?.style ?? NO_STYLES;
-		});
-
-		const associatedProps = useAnimatedProps(() => {
-			"worklet";
-
-			if (!associatedId) {
-				return NO_PROPS;
-			}
-
-			return stylesMap.get()[associatedId]?.props ?? NO_PROPS;
-		});
+		const associatedStyles = useSlotStyles(associatedId);
+		const associatedProps = useSlotProps(associatedId);
 
 		return (
 			<RegisterBoundsProvider

package/src/shared/components/overlay/variations/float-overlay.tsx

@@ -5,7 +5,7 @@ import { ScreenAnimationProvider } from "../../../providers/screen/animation";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import { DescriptorsProvider } from "../../../providers/screen/descriptors";
 import { ScreenOptionsProvider } from "../../../providers/screen/options";
-import { ScreenStylesProvider } from "../../../providers/screen/styles";
+import { ScreenSlotProvider } from "../../../providers/screen/styles";
 import type { OverlayScreenState } from "../../../types/overlay.types";
 
 import { getActiveFloatOverlay } from "../helpers/get-active-overlay";
@@ -67,12 +67,12 @@ export function FloatOverlay() {
 		<DescriptorsProvider current={current} previous={previous} next={next}>
 			<ScreenOptionsProvider>
 				<ScreenAnimationProvider>
-					<ScreenStylesProvider isFloatingOverlay>
+					<ScreenSlotProvider isFloatingOverlay>
 						<OverlayHost
 							scene={scene}
 							overlayScreenState={overlayScreenState}
 						/>
-					</ScreenStylesProvider>
+					</ScreenSlotProvider>
 				</ScreenAnimationProvider>
 			</ScreenOptionsProvider>
 		</DescriptorsProvider>

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -1,15 +1,10 @@
 import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
-import Animated, {
-	runOnUI,
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
+import Animated, { runOnUI } from "react-native-reanimated";
 import { DefaultSnapSpec } from "../../../configs/specs";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
 import { SystemStore } from "../../../stores/system.store";
@@ -24,7 +19,6 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 	const { dismissScreen } = useNavigationHelpers();
 
@@ -112,15 +106,8 @@ export const BackdropLayer = memo(function BackdropLayer({
 		routeKey,
 	]);
 
-	const animatedBackdropStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.get().backdrop?.style ?? NO_STYLES;
-	});
-
-	const animatedBackdropProps = useAnimatedProps(() => {
-		"worklet";
-		return stylesMap.get().backdrop?.props ?? NO_PROPS;
-	});
+	const animatedBackdropStyle = useSlotStyles("backdrop");
+	const animatedBackdropProps = useSlotProps("backdrop");
 
 	return (
 		<Pressable

package/src/shared/components/screen-container/layers/content.tsx

@@ -2,15 +2,11 @@
 import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
+import Animated from "react-native-reanimated";
 import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useGestureContext } from "../../../providers/screen/gestures";
 import { OriginProvider } from "../../../providers/screen/origin.provider";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import { ScreenFallbackHost } from "../../boundary/portal/components/host";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
@@ -24,7 +20,6 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const { stylesMap } = useScreenStyles();
 		const { current } = useDescriptors();
 
 		const gestureContext = useGestureContext();
@@ -36,15 +31,8 @@ export const ContentLayer = memo(
 
 		const handleContentLayout = useContentLayout();
 
-		const animatedContentStyle = useAnimatedStyle(() => {
-			"worklet";
-			return stylesMap.get().content?.style || NO_STYLES;
-		});
-
-		const animatedContentProps = useAnimatedProps(() => {
-			"worklet";
-			return stylesMap.get().content?.props ?? NO_PROPS;
-		});
+		const animatedContentStyle = useSlotStyles("content");
+		const animatedContentProps = useSlotProps("content");
 
 		return (
 			<GestureDetector gesture={gestureContext!.detectorGesture}>

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -1,12 +1,11 @@
 import { memo, useCallback } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-	NO_STYLES,
 } from "../../../constants";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotStyles } from "../../../providers/screen/styles";
 import { logger } from "../../../utils/logger";
 
 type Props = {
@@ -47,8 +46,6 @@ const MaskedNavigationContainer = memo(
 		children: React.ReactNode;
 		pointerEvents: ViewProps["pointerEvents"];
 	}) => {
-		const { stylesMap } = useScreenStyles();
-
 		const maybeLogWarning = useCallback(() => {
 			if (LazyMaskedView !== View) return;
 			if (hasWarnedMissingMaskedView) return;
@@ -59,19 +56,12 @@ const MaskedNavigationContainer = memo(
 			);
 		}, []);
 
-		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
-			"worklet";
-			return (
-				stylesMap.get()[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style || NO_STYLES
-			);
-		});
-
-		const animatedNavigationMaskContainerStyle = useAnimatedStyle(() => {
-			"worklet";
-			return (
-				stylesMap.get()[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style || NO_STYLES
-			);
-		});
+		const animatedNavigationMaskStyle = useSlotStyles(
+			NAVIGATION_MASK_ELEMENT_STYLE_ID,
+		);
+		const animatedNavigationMaskContainerStyle = useSlotStyles(
+			NAVIGATION_MASK_CONTAINER_STYLE_ID,
+		);
 
 		return (
 			<LazyMaskedView

package/src/shared/components/screen-container/layers/surface-container.tsx

@@ -1,12 +1,8 @@
 import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, type ViewProps } from "react-native";
-import Animated, {
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
+import Animated from "react-native-reanimated";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 
 type Props = {
 	children: React.ReactNode;
@@ -44,17 +40,8 @@ type AnimatedSurfaceProps = {
 
 const AnimatedSurface = memo(
 	({ children, pointerEvents, SurfaceComponent }: AnimatedSurfaceProps) => {
-		const { stylesMap } = useScreenStyles();
-
-		const animatedSurfaceStyle = useAnimatedStyle(() => {
-			"worklet";
-			return stylesMap.get().surface?.style ?? NO_STYLES;
-		});
-
-		const animatedSurfaceProps = useAnimatedProps(() => {
-			"worklet";
-			return stylesMap.get().surface?.props ?? NO_PROPS;
-		});
+		const animatedSurfaceStyle = useSlotStyles("surface");
+		const animatedSurfaceProps = useSlotProps("surface");
 
 		return (
 			<SurfaceComponent

package/src/shared/index.ts

@@ -26,11 +26,6 @@ export default {
 export type { NativeStackAdapterOptions } from "./adapters/with-screen-transitions";
 export { withScreenTransitions } from "./adapters/with-screen-transitions";
 export { snapTo } from "./animation/snap-to";
-export type {
-	BoundaryPortal,
-	BoundaryPortalAttachTarget,
-	BoundaryPortalOptions,
-} from "./components/boundary";
 export {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,

package/src/shared/providers/helpers/measured-bounds-writes.ts

@@ -1,11 +1,7 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import { setEntry } from "../../stores/bounds/internals/entries";
 import { setDestination, setSource } from "../../stores/bounds/internals/links";
-import type {
-	BoundsPortalAttachTarget,
-	ScreenPairKey,
-	SourceHostRef,
-} from "../../stores/bounds/types";
+import type { ScreenPairKey } from "../../stores/bounds/types";
 
 type LinkWrite =
 	| {
@@ -25,8 +21,8 @@ type ApplyMeasuredBoundsWritesParams = {
 	measured: MeasuredDimensions;
 	preparedStyles: StyleProps;
 	linkWrite?: LinkWrite;
-	portalHost?: BoundsPortalAttachTarget;
-	sourceHost?: SourceHostRef;
+	handoff?: boolean;
+	escapeClipping?: boolean;
 };
 
 export const applyMeasuredBoundsWrites = (
@@ -41,8 +37,8 @@ export const applyMeasuredBoundsWrites = (
 		measured,
 		preparedStyles,
 		linkWrite,
-		portalHost,
-		sourceHost,
+		handoff,
+		escapeClipping,
 	} = params;
 
 	// Set the bounds entry on every measure to avoid any stale measurements
@@ -59,8 +55,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
-			portalHost,
-			sourceHost,
+			{ handoff, escapeClipping },
 		);
 	}
 

package/src/shared/providers/screen/animation/helpers/derivations.ts

@@ -5,6 +5,7 @@ interface DerivationsTarget {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	progress: number;
+	transitionProgress: number;
 	focused: boolean;
 	active: ScreenTransitionState;
 	inactive: ScreenTransitionState | undefined;
@@ -14,6 +15,8 @@ export const updateDerivations = (frame: DerivationsTarget) => {
 	"worklet";
 
 	frame.progress = frame.current.progress + (frame.next?.progress ?? 0);
+	frame.transitionProgress =
+		frame.current.transitionProgress + (frame.next?.transitionProgress ?? 0);
 	frame.focused = !frame.next;
 	frame.active = frame.focused ? frame.current : (frame.next ?? frame.current);
 	frame.inactive = frame.focused ? frame.previous : frame.current;