react-native-screen-transitions 3.9.0-alpha.2 → 3.9.0-beta.0

package/lib/typescript/shared/types/screen.types.d.ts

@@ -1,3 +1,5 @@
+import type { ComponentType, ReactNode } from "react";
+import type { ViewProps } from "react-native";
 import type { AnimatedProps } from "react-native-reanimated";
 import type { ScreenStyleInterpolator, TransitionSpec } from "./animation.types";
 import type { GestureActivationArea, GestureDirectionOption, GestureProgressMode, ScrollMetadataState } from "./gesture.types";
@@ -35,6 +37,60 @@ export type GestureTracking = "auto" | "never" | "always";
  */
 export type SnapPoint = number | "auto";
 export type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
+/**
+ * Props passed to custom screen layer component renderers such as
+ * {@linkcode ScreenTransitionConfig.backdropComponent}.
+ */
+export type ScreenLayerComponentProps = {
+    /**
+     * Animated styles for the target layer, including the library-owned base
+     * layout style for that layer.
+     */
+    styles: AnimatedProps<ViewProps>["style"];
+    /**
+     * Animated props resolved from the matching `screenStyleInterpolator` slot.
+     */
+    props: AnimatedProps<Record<string, unknown>>["animatedProps"];
+    /**
+     * Pointer-event behavior resolved for the current layer state.
+     */
+    pointerEvents: ViewProps["pointerEvents"];
+};
+/**
+ * Props passed to {@linkcode ScreenTransitionConfig.backdropComponent} when it
+ * is provided as a render-style component.
+ */
+export type ScreenBackdropComponentProps = ScreenLayerComponentProps;
+/**
+ * Props passed to {@linkcode ScreenTransitionConfig.contentComponent} when it
+ * is provided as a render-style component.
+ */
+export type ScreenContentComponentProps = ScreenLayerComponentProps & {
+    /**
+     * The screen subtree rendered inside the content layer.
+     */
+    children: ReactNode;
+};
+/**
+ * Custom renderer for the backdrop layer.
+ *
+ * Component types such as `BlurView` are still accepted for compatibility.
+ * Function components can also receive {@linkcode ScreenBackdropComponentProps}
+ * to render the animated styles and props manually.
+ *
+ * @see {@linkcode ScreenTransitionConfig.backdropComponent}
+ */
+export type ScreenBackdropComponent = ComponentType<any> | ComponentType<ScreenBackdropComponentProps>;
+/**
+ * Custom renderer for the screen content layer.
+ *
+ * Component types such as a custom native view are accepted directly. Function
+ * components can also receive {@linkcode ScreenContentComponentProps} to render
+ * the animated styles, props, pointer-events, and children manually.
+ *
+ * @see {@linkcode ScreenTransitionConfig.contentComponent}
+ */
+export type ScreenContentComponent = ComponentType<any> | ComponentType<ScreenContentComponentProps>;
 /**
  * Controls how an inactive screen is retained after it is no longer active.
  *
@@ -99,6 +155,8 @@ export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
      * <Transition.View sharedBoundTag="profile-avatar">
      *   <Avatar size="large" />
      * </Transition.View>
+     *
+     * @deprecated Use `Transition.Boundary` with `id` instead.
      */
     sharedBoundTag?: string;
     /**
@@ -108,6 +166,8 @@ export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
      * Useful when layout can change while unfocused (for example, programmatic
      * ScrollView/FlatList scrolling triggered from another screen).
      *
+     * @deprecated Legacy `sharedBoundTag` refresh option. The boundary
+     * measurement pipeline refreshes layout through `Transition.Boundary`.
      * @default false
      */
     remeasureOnFocus?: boolean;
@@ -181,6 +241,8 @@ export type ScreenTransitionConfig = {
     /**
      * How much velocity affects snap point targeting. Lower values make snapping
      * feel more deliberate (iOS-like), higher values make it more responsive to flicks.
+     *
+     * @deprecated Use `gestureSnapVelocityImpact` instead.
      * @default 0.1
      */
     snapVelocityImpact?: number;
@@ -353,13 +415,21 @@ export type ScreenTransitionConfig = {
     /**
      * Custom component to render as the backdrop layer (between screens).
      *
-     * The library wraps this component with `Animated.createAnimatedComponent` internally.
-     * Animated styles and props are driven by the `backdrop` slot in the interpolator return value.
+     * Direct component types are wrapped with `Animated.createAnimatedComponent`
+     * internally. Function components can receive `{ styles, props, pointerEvents }`
+     * and decide how to render the layer. Animated styles and props are driven by
+     * the `backdrop` slot in the interpolator return value.
      *
      * `backdropBehavior` still controls the wrapping Pressable for dismiss/collapse handling.
      *
      * @example
-     * backdropComponent: BlurView,
+     * backdropComponent: ({ styles, props, pointerEvents }) => (
+     *   <AnimatedBlurView
+     *     style={styles}
+     *     animatedProps={props}
+     *     pointerEvents={pointerEvents}
+     *   />
+     * ),
      * screenStyleInterpolator: ({ progress }) => {
      *   "worklet";
      *   return {
@@ -372,7 +442,31 @@ export type ScreenTransitionConfig = {
      *
      * @default undefined
      */
-    backdropComponent?: React.ComponentType<any>;
+    backdropComponent?: ScreenBackdropComponent;
+    /**
+     * Custom component to render as the screen's content layer.
+     *
+     * The component receives the `content` slot's animated styles and props. A
+     * direct component type is wrapped with `Animated.createAnimatedComponent`;
+     * a function component can receive `{ styles, props, pointerEvents, children }`
+     * and decide how to render the layer.
+     *
+     * `contentComponent` replaces `surfaceComponent` for custom screen shells.
+     *
+     * @example
+     * contentComponent: ({ styles, props, pointerEvents, children }) => (
+     *   <AnimatedSquircleView
+     *     style={styles}
+     *     animatedProps={props}
+     *     pointerEvents={pointerEvents}
+     *   >
+     *     {children}
+     *   </AnimatedSquircleView>
+     * )
+     *
+     * @default undefined
+     */
+    contentComponent?: ScreenContentComponent;
     /**
      * Custom component to render as the screen's surface layer.
      *
@@ -395,6 +489,7 @@ export type ScreenTransitionConfig = {
      * }
      *
      * @default undefined
+     * @deprecated Use `contentComponent` instead.
      */
     surfaceComponent?: React.ComponentType<any>;
 };

package/lib/typescript/shared/types/screen.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/types/screen.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"screen.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/types/screen.types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/shared/utils/bounds/helpers/styles/compute.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compute.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/helpers/styles/compute.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAK9E,OAAO,KAAK,EAEX,mBAAmB,EACnB,aAAa,EACb,MAAM,qBAAqB,CAAC;AAyN7B,eAAO,MAAM,kBAAkB,GAC9B,4EAQG,mBAAmB,EACtB,iBAAgB,aAAkC,EAClD,eAAe,sBAAsB,iBAsFrC,CAAC"}
+{"version":3,"file":"compute.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/helpers/styles/compute.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAG9E,OAAO,KAAK,EAEX,mBAAmB,EACnB,aAAa,EACb,MAAM,qBAAqB,CAAC;AA4G7B,eAAO,MAAM,kBAAkB,GAC9B,4EAQG,mBAAmB,EACtB,iBAAgB,aAAkC,EAClD,eAAe,sBAAsB,iBA6FrC,CAAC"}

package/lib/typescript/shared/utils/bounds/helpers/styles/local-transform.d.ts

@@ -0,0 +1,6 @@
+import type { StyleProps, TransformArrayItem } from "react-native-reanimated";
+export declare const BOUNDS_LOCAL_TRANSFORM_STYLE_KEY = "__screenTransitionsBoundsLocalTransform";
+export declare const attachBoundsLocalTransform: (slotStyle: StyleProps, localStyle: StyleProps | null | undefined) => StyleProps;
+export declare const getBoundsLocalTransform: (style: StyleProps | undefined) => TransformArrayItem[] | undefined;
+export declare const stripBoundsLocalTransform: (style: StyleProps) => StyleProps;
+//# sourceMappingURL=local-transform.d.ts.map

package/lib/typescript/shared/utils/bounds/helpers/styles/local-transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-transform.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/helpers/styles/local-transform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,eAAO,MAAM,gCAAgC,4CACH,CAAC;AA2B3C,eAAO,MAAM,0BAA0B,GACtC,WAAW,UAAU,EACrB,YAAY,UAAU,GAAG,IAAI,GAAG,SAAS,KACvC,UAkBF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GACnC,OAAO,UAAU,GAAG,SAAS,KAC3B,kBAAkB,EAAE,GAAG,SAOzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,OAAO,UAAU,KAAG,UAqB7D,CAAC"}

package/lib/typescript/shared/utils/bounds/types/options.d.ts

@@ -192,6 +192,8 @@ export type BoundsOptions = {
     motion?: BoundsMotion;
     /**
      * If true, the raw values will be returned instead of the computed values.
+     *
+     * @deprecated Use `bounds(id).math(options)` instead of passing `raw`.
      * @default false
      */
     raw?: boolean;

package/lib/typescript/shared/utils/bounds/types/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/utils/bounds/types/options.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/utils/bounds/types/options.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/component-stack/types.ts

@@ -13,8 +13,14 @@ import type {
 import type { ScreenTransitionConfig } from "../shared";
 import type { OverlayProps } from "../shared/types/overlay.types";
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationEventMap = {};
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationProp<
 	ParamList extends ParamListBase,
 	RouteName extends keyof ParamList = string,
@@ -29,6 +35,9 @@ export type ComponentStackNavigationProp<
 > &
 	StackActionHelpers<ParamList>;
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackScreenProps<
 	ParamList extends ParamListBase,
 	RouteName extends keyof ParamList = string,
@@ -38,6 +47,9 @@ export type ComponentStackScreenProps<
 	route: RouteProp<ParamList, RouteName>;
 };
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackOptionsArgs<
 	ParamList extends ParamListBase,
 	RouteName extends keyof ParamList = keyof ParamList,
@@ -46,6 +58,9 @@ export type ComponentStackOptionsArgs<
 	theme: Theme;
 };
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationHelpers = NavigationHelpers<
 	ParamListBase,
 	ComponentStackNavigationEventMap
@@ -56,6 +71,8 @@ type ComponentStackNavigationConfig = {};
 /**
  * Props passed to overlay components in component-stack.
  * Uses the shared OverlayProps type with component-stack's navigation type.
+ *
+ * @deprecated Component stack is deprecated. Use blank stack instead.
  */
 export type ComponentStackOverlayProps = OverlayProps<
 	ComponentStackNavigationProp<ParamListBase>
@@ -70,9 +87,15 @@ type ComponentStackScreenTransitionConfig = ScreenTransitionConfig & {
 	detachPreviousScreen?: boolean;
 };
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationOptions =
 	ComponentStackScreenTransitionConfig & {};
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigatorProps = DefaultNavigatorOptions<
 	ParamListBase,
 	string | undefined,
@@ -84,6 +107,9 @@ export type ComponentStackNavigatorProps = DefaultNavigatorOptions<
 	StackRouterOptions &
 	ComponentStackNavigationConfig;
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackDescriptor = Descriptor<
 	ComponentStackNavigationOptions,
 	ComponentStackNavigationProp<ParamListBase>,

package/src/shared/components/boundary/components/boundary-target.tsx

@@ -2,6 +2,10 @@ import type React from "react";
 import { memo, useLayoutEffect, useMemo } from "react";
 import type { View } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
+import {
+	useComposedSlotStyles,
+	useSlotLayoutStyles,
+} from "../../../providers/screen/styles";
 import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
 import { logger } from "../../../utils/logger";
 import { Portal } from "../portal/components/portal";
@@ -22,12 +26,20 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 	const registerTargetRef = rootContext?.registerTargetRef;
 	const unregisterTargetRef = rootContext?.unregisterTargetRef;
 	const isActiveTarget = rootContext?.activeTargetRef === targetAnimatedRef;
+	const portalRuntime = rootContext?.portalRuntime;
+	const shouldApplyAssociatedStyleInline =
+		isActiveTarget && portalRuntime?.enabled !== true;
+	const shouldApplyPortalLayoutStyle =
+		isActiveTarget && portalRuntime?.enabled === true;
+	const associatedTargetStyles = useComposedSlotStyles(
+		rootContext?.boundTag.tag,
+		style,
+	);
+	const portalLayoutStyle = useSlotLayoutStyles(rootContext?.boundTag.tag);
 	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-	// Portal'd content can be teleported into another screen's host; measuring
-	// it there would capture its CURRENT (destination) position as the source
-	// bounds. The portal placeholder keeps the layout slot at home, so it is
-	// the truthful measurement surface whenever a portal is configured.
-	const measurementRef = rootContext?.portal
+	// Teleported content can render outside its layout slot. The placeholder is
+	// the truthful measurement surface whenever runtime portal behavior is active.
+	const measurementRef = portalRuntime?.enabled
 		? placeholderAnimatedRef
 		: targetAnimatedRef;
 
@@ -54,7 +66,8 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 	return (
 		<Portal
 			id={rootContext?.boundTag.tag}
-			mode={rootContext?.portal}
+			handoff={portalRuntime?.handoff}
+			escapeClipping={portalRuntime?.escapeClipping}
 			placeholderRef={placeholderAnimatedRef}
 		>
 			<Animated.View
@@ -62,7 +75,8 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 				ref={targetAnimatedRef}
 				style={[
 					style,
-					isActiveTarget ? rootContext.associatedTargetStyles : undefined,
+					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
+					shouldApplyPortalLayoutStyle ? portalLayoutStyle : undefined,
 				]}
 				collapsable={false}
 			/>

package/src/shared/components/boundary/create-boundary-component.tsx

@@ -2,18 +2,22 @@ import {
 	type ComponentType,
 	forwardRef,
 	memo,
+	type ReactNode,
 	useImperativeHandle,
 	useMemo,
 } from "react";
-import Animated from "react-native-reanimated";
+import type { View } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import {
+	useComposedSlotStyles,
 	useSlotStackingStyles,
-	useSlotStyles,
 } from "../../providers/screen/styles";
 import { createBoundTag } from "../../stores/bounds/helpers/link-pairs.helpers";
 import { useBoundaryMeasurement } from "./hooks/use-boundary-measurement";
-import { resolveBoundaryPortal } from "./portal/resolve-portal";
+import { BoundaryLocalPortalHost } from "./portal/components/boundary-local-portal-host";
+import { Portal } from "./portal/components/portal";
+import { resolveBoundaryPortal } from "./portal/utils/resolve-portal";
 import {
 	BoundaryRootProvider,
 	useBoundaryRootState,
@@ -22,14 +26,29 @@ import type { BoundaryComponentProps } from "./types";
 
 interface CreateBoundaryComponentOptions {
 	alreadyAnimated?: boolean;
-	shouldAutoMeasure?: boolean;
 }
 
+const hasRenderableChildren = (children: ReactNode): boolean => {
+	if (
+		children === null ||
+		children === undefined ||
+		typeof children === "boolean"
+	) {
+		return false;
+	}
+
+	if (Array.isArray(children)) {
+		return children.some(hasRenderableChildren);
+	}
+
+	return true;
+};
+
 export function createBoundaryComponent<P extends object>(
 	Wrapped: ComponentType<P>,
 	options: CreateBoundaryComponentOptions = {},
 ) {
-	const { alreadyAnimated = false, shouldAutoMeasure = false } = options;
+	const { alreadyAnimated = false } = options;
 	const AnimatedComponent = alreadyAnimated
 		? Wrapped
 		: Animated.createAnimatedComponent(Wrapped);
@@ -48,7 +67,9 @@ export function createBoundaryComponent<P extends object>(
 			method,
 			style,
 			onPress,
-			portal: portalProp,
+			handoff,
+			escapeClipping,
+			children,
 			...rest
 		} = props as any;
 
@@ -56,7 +77,10 @@ export function createBoundaryComponent<P extends object>(
 			() => createBoundTag(String(id), group),
 			[id, group],
 		);
-		const portal = resolveBoundaryPortal(portalProp);
+		const portalRuntime = resolveBoundaryPortal({
+			handoff,
+			escapeClipping,
+		});
 
 		const currentScreenKey = useDescriptorsStore(
 			(s) => s.derivations.currentScreenKey,
@@ -68,9 +92,12 @@ export function createBoundaryComponent<P extends object>(
 		// Associated slot styles attach whenever the boundary is enabled,
 		// independent of whether an interpolator is configured for this transition.
 		const shouldAttachAssociatedStyles = enabled;
+		const canPortalRoot =
+			portalRuntime.enabled && hasRenderableChildren(children);
 
-		const associatedStyles = useSlotStyles(boundTag.tag);
+		const associatedStyles = useComposedSlotStyles(boundTag.tag, style);
 		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
+		const rootPlaceholderRef = useAnimatedRef<View>();
 
 		const {
 			ref,
@@ -80,13 +107,11 @@ export function createBoundaryComponent<P extends object>(
 			targetPreparedStyles,
 		} = useBoundaryRootState({
 			boundTag,
-			portal,
-			associatedTargetStyles: shouldAttachAssociatedStyles
-				? associatedStyles
-				: undefined,
+			portalRuntime,
+			rootMeasurementRef: canPortalRoot ? rootPlaceholderRef : undefined,
 		});
 
-		const { onPress: resolvedOnPress } = useBoundaryMeasurement({
+		useBoundaryMeasurement({
 			boundTag,
 			enabled,
 			runtimeEnabled,
@@ -94,40 +119,79 @@ export function createBoundaryComponent<P extends object>(
 			measuredRef,
 			style,
 			targetPreparedStyles,
-			portal,
-			shouldAutoMeasure,
+			handoff: portalRuntime.handoff,
+			escapeClipping: portalRuntime.escapeClipping,
 			config: { anchor, scaleMode, target, method },
-			onPress,
 		});
 
 		useImperativeHandle(forwardedRef, () => ref.current as any, [ref]);
 
+		const shouldPortalRoot = canPortalRoot && !hasActiveTarget;
 		// A nested active target takes the full associated style, so the root keeps
-		// only its stacking context; otherwise the root wears the full style.
+		// only its stacking context. Without a nested target, a portal'd root is the
+		// target, so its associated style is applied through the portal host instead
+		// of inline on the teleported element.
+		// Host-only handoff receivers still need the associated style: their local
+		// portal host is absolute-filled inside this root, so the root is the visual
+		// frame that animates the received payload.
 		const attachedStyle = shouldAttachAssociatedStyles
 			? hasActiveTarget
 				? associatedStackingStyles
-				: associatedStyles
+				: shouldPortalRoot
+					? undefined
+					: associatedStyles
 			: undefined;
+		const pressProps = typeof onPress === "function" ? { onPress } : undefined;
+
+		const localPortalHost = (
+			<BoundaryLocalPortalHost
+				boundaryId={boundTag.tag}
+				enabled={enabled && portalRuntime.handoff}
+				screenKey={currentScreenKey}
+			/>
+		);
+		const canInjectLocalPortalHost = typeof children !== "function";
+
+		const renderBoundaryRoot = (extraChildren?: ReactNode) => (
+			<AnimatedComponent
+				{...rest}
+				{...pressProps}
+				ref={ref}
+				style={[style, attachedStyle]}
+				collapsable={false}
+			>
+				{children}
+				{canInjectLocalPortalHost ? extraChildren : null}
+			</AnimatedComponent>
+		);
+		const boundaryRoot = renderBoundaryRoot(
+			shouldPortalRoot ? undefined : localPortalHost,
+		);
 
 		return (
 			<BoundaryRootProvider value={contextValue}>
-				<AnimatedComponent
-					{...rest}
-					ref={ref}
-					style={[style, attachedStyle]}
-					onPress={resolvedOnPress}
-					collapsable={false}
-				/>
+				{shouldPortalRoot ? (
+					<Portal
+						id={boundTag.tag}
+						handoff={portalRuntime.handoff}
+						escapeClipping={portalRuntime.escapeClipping}
+						placeholderRef={rootPlaceholderRef}
+						placeholderChildren={
+							portalRuntime.handoff ? localPortalHost : undefined
+						}
+					>
+						{boundaryRoot}
+					</Portal>
+				) : (
+					boundaryRoot
+				)}
 			</BoundaryRootProvider>
 		);
 	});
 
 	// The HOC's runtime identity (animated + memoized forwardRef) is not
 	// expressible against the public boundary props, so assert it here.
-	return memo(
-		Animated.createAnimatedComponent(Inner),
-	) as unknown as React.MemoExoticComponent<
+	return memo(Inner) as unknown as React.MemoExoticComponent<
 		React.ForwardRefExoticComponent<
 			BoundaryComponentProps<P> &
 				React.RefAttributes<React.ComponentRef<typeof Wrapped>>

package/src/shared/components/boundary/hooks/{use-boundary-presence.ts → lifecycles/use-boundary-presence.ts}

@@ -3,17 +3,26 @@ import { runOnUI } from "react-native-reanimated";
 import {
 	removeEntry,
 	setEntry,
-} from "../../../stores/bounds/internals/entries";
-import type { BoundTag } from "../../../stores/bounds/types";
-import type { BoundaryConfigProps } from "../types";
+} from "../../../../stores/bounds/internals/entries";
+import type { BoundTag } from "../../../../stores/bounds/types";
+import type { BoundaryConfigProps } from "../../types";
 
 export const useBoundaryPresence = (params: {
 	enabled: boolean;
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	boundaryConfig?: BoundaryConfigProps;
+	handoff?: boolean;
+	escapeClipping?: boolean;
 }) => {
-	const { enabled, boundTag, currentScreenKey, boundaryConfig } = params;
+	const {
+		enabled,
+		boundTag,
+		currentScreenKey,
+		boundaryConfig,
+		handoff,
+		escapeClipping,
+	} = params;
 	const { tag } = boundTag;
 
 	useLayoutEffect(() => {
@@ -21,10 +30,12 @@ export const useBoundaryPresence = (params: {
 
 		runOnUI(setEntry)(tag, currentScreenKey, {
 			boundaryConfig,
+			handoff: handoff ? true : null,
+			escapeClipping: escapeClipping ? true : null,
 		});
 
 		return () => {
 			runOnUI(removeEntry)(tag, currentScreenKey);
 		};
-	}, [enabled, tag, currentScreenKey, boundaryConfig]);
+	}, [enabled, tag, currentScreenKey, boundaryConfig, handoff, escapeClipping]);
 };