react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.8

package/src/adapters/with-screen-transitions/options.ts

@@ -30,14 +30,9 @@ const ADAPTER_GESTURE_ENABLED_RESTORE = Symbol(
 const ADAPTER_GESTURE_DIRECTION_RESTORE = Symbol(
 	"react-native-screen-transitions.adapterGestureDirectionRestore",
 );
-const ADAPTER_GESTURE_RESPONSE_DISTANCE_RESTORE = Symbol(
-	"react-native-screen-transitions.adapterGestureResponseDistanceRestore",
-);
-
 type OptionsWithTransitionRestore = Record<string, unknown> & {
 	[ADAPTER_GESTURE_ENABLED_RESTORE]?: ScreenTransitionConfig["gestureEnabled"];
 	[ADAPTER_GESTURE_DIRECTION_RESTORE]?: ScreenTransitionConfig["gestureDirection"];
-	[ADAPTER_GESTURE_RESPONSE_DISTANCE_RESTORE]?: ScreenTransitionConfig["gestureResponseDistance"];
 };
 
 export type NativeStackAdapterOptionInput =
@@ -94,13 +89,6 @@ export function adaptNativeStackTransitionOptions<
 			nativeOptions.gestureDirection as ScreenTransitionConfig["gestureDirection"];
 	}
 
-	if (hasOwnOption(nativeOptions, "gestureResponseDistance")) {
-		(adaptedOptions as OptionsWithTransitionRestore)[
-			ADAPTER_GESTURE_RESPONSE_DISTANCE_RESTORE
-		] =
-			nativeOptions.gestureResponseDistance as ScreenTransitionConfig["gestureResponseDistance"];
-	}
-
 	return adaptedOptions as TOptions;
 }
 
@@ -116,16 +104,7 @@ export function resolveAdapterTransitionOptions<
 		optionRecord,
 		ADAPTER_GESTURE_DIRECTION_RESTORE,
 	);
-	const hasGestureResponseDistanceRestore = hasOwnOption(
-		optionRecord,
-		ADAPTER_GESTURE_RESPONSE_DISTANCE_RESTORE,
-	);
-
-	if (
-		!hasGestureEnabledRestore &&
-		!hasGestureDirectionRestore &&
-		!hasGestureResponseDistanceRestore
-	) {
+	if (!hasGestureEnabledRestore && !hasGestureDirectionRestore) {
 		return options;
 	}
 
@@ -139,9 +118,6 @@ export function resolveAdapterTransitionOptions<
 	delete (resolvedOptions as OptionsWithTransitionRestore)[
 		ADAPTER_GESTURE_DIRECTION_RESTORE
 	];
-	delete (resolvedOptions as OptionsWithTransitionRestore)[
-		ADAPTER_GESTURE_RESPONSE_DISTANCE_RESTORE
-	];
 
 	if (hasGestureEnabledRestore) {
 		resolvedOptions.gestureEnabled =
@@ -157,12 +133,5 @@ export function resolveAdapterTransitionOptions<
 		delete resolvedOptions.gestureDirection;
 	}
 
-	if (hasGestureResponseDistanceRestore) {
-		resolvedOptions.gestureResponseDistance =
-			optionRecord[ADAPTER_GESTURE_RESPONSE_DISTANCE_RESTORE];
-	} else {
-		delete resolvedOptions.gestureResponseDistance;
-	}
-
 	return resolvedOptions;
 }

package/src/adapters/with-screen-transitions/stack-layout.tsx

@@ -1,17 +1,10 @@
 import type { NavigationState, Route } from "@react-navigation/native";
 import { useMemo } from "react";
 import { Overlay } from "../../components/overlay";
-import {
-	type StackContextValue,
-	StackProvider,
-} from "../../hooks/navigation/use-stack";
 import { ScreenComposer } from "../../providers/screen/screen-composer";
-import {
-	StackCoreProvider,
-	useStackCoreStore,
-} from "../../providers/stack/core.provider";
+import { BlankStackStoreProvider } from "../../providers/stack/blank-stack.provider";
+import { StackCoreProvider } from "../../providers/stack/core.provider";
 import type { BaseStackDescriptor, BaseStackRoute } from "../../types";
-import { StackType } from "../../types/stack.types";
 import { isOverlayVisible } from "../../utils/overlay/visibility";
 import {
 	ScreenTransitionsAdapterProvider,
@@ -73,7 +66,7 @@ function buildTransitionStackState({
 	const routes = state.routes as BaseStackRoute[];
 	const preloadedRoutes = getPreloadedRoutes(state) as BaseStackRoute[];
 	const allRoutes = routes.concat(preloadedRoutes);
-	const routeKeys: string[] = [];
+	const routeKeys = routes.map((route) => route.key);
 	const scenes: ScreenTransitionsAdapterScene[] = [];
 	const routeIndexByKey = new Map<string, number>();
 	let shouldShowFloatOverlay = false;
@@ -112,7 +105,6 @@ function buildTransitionStackState({
 			descriptor: normalizedDescriptor,
 			previousDescriptor,
 		});
-		routeKeys.push(route.key);
 		routeIndexByKey.set(route.key, sceneIndex);
 
 		if (
@@ -143,7 +135,6 @@ function ScreenTransitionsStackContent({
 	layout,
 	layoutArgs,
 }: ScreenTransitionsStackContentProps) {
-	const flags = useStackCoreStore((store) => store.flags);
 	const transitionState = useMemo(
 		() =>
 			buildTransitionStackState({
@@ -152,24 +143,6 @@ function ScreenTransitionsStackContent({
 			}),
 		[layoutArgs.state, layoutArgs.descriptors],
 	);
-	const stackContextValue = useMemo<StackContextValue>(
-		() => ({
-			flags,
-			navigatorKey: layoutArgs.state.key,
-			routeKeys: transitionState.routeKeys,
-			routes: transitionState.routes as Route<string>[],
-			scenes: transitionState.scenes,
-			focusedIndex: layoutArgs.state.index,
-		}),
-		[
-			flags,
-			layoutArgs.state.key,
-			layoutArgs.state.index,
-			transitionState.routeKeys,
-			transitionState.routes,
-			transitionState.scenes,
-		],
-	);
 	const adapterContextValue = useMemo(
 		() => ({
 			routeIndexByKey: transitionState.routeIndexByKey,
@@ -177,14 +150,30 @@ function ScreenTransitionsStackContent({
 		}),
 		[transitionState.routeIndexByKey, transitionState.scenes],
 	);
+	const blankStackValue = useMemo(() => {
+		const scenesByKey = Object.fromEntries(
+			transitionState.scenes.map((scene) => [scene.route.key, scene]),
+		);
+
+		return {
+			navigatorKey: layoutArgs.state.key,
+			routeKeys: transitionState.routeKeys,
+			routes: transitionState.routes,
+			scenes: transitionState.scenes,
+			scenesByKey,
+			paintDriverRouteKeyByRouteKey: new Map<string, string>(),
+			focusedIndex: layoutArgs.state.index,
+			shouldShowFloatOverlay: transitionState.shouldShowFloatOverlay,
+		};
+	}, [layoutArgs.state.key, layoutArgs.state.index, transitionState]);
 	const children = layout ? layout(layoutArgs) : layoutArgs.children;
 
 	return (
 		<ScreenTransitionsAdapterProvider value={adapterContextValue}>
-			<StackProvider value={stackContextValue}>
-				{transitionState.shouldShowFloatOverlay ? <Overlay.Float /> : null}
+			<BlankStackStoreProvider value={blankStackValue}>
+				<Overlay.Float />
 				{children}
-			</StackProvider>
+			</BlankStackStoreProvider>
 		</ScreenTransitionsAdapterProvider>
 	);
 }
@@ -193,9 +182,7 @@ export function ScreenTransitionsStackLayout(
 	props: ScreenTransitionsStackContentProps,
 ) {
 	return (
-		<StackCoreProvider
-			config={{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE }}
-		>
+		<StackCoreProvider config={{ TRANSITIONS_ALWAYS_ON: false }}>
 			<ScreenTransitionsStackContent {...props} />
 		</StackCoreProvider>
 	);

package/src/components/activity/activity-view.tsx

@@ -0,0 +1,93 @@
+import { Activity, type ReactNode } from "react";
+import {
+	type HostComponent,
+	NativeComponentRegistry,
+	type ViewProps,
+} from "react-native";
+
+export type ActivityViewMode = "normal" | "inert" | "paused";
+
+interface ActivityViewProps {
+	children: ReactNode;
+	mode: ActivityViewMode;
+	visible: boolean;
+}
+
+/**
+ * Separates React lifecycle activity from native presentation.
+ *
+ * A paused Activity tears down effects and deprioritizes updates. Keeping an
+ * explicit display value on its host view lets `pause` preserve the last paint,
+ * while `hide` can pause the same subtree and remove its presentation.
+ */
+export function ActivityView({ children, mode, visible }: ActivityViewProps) {
+	const activityMode = mode === "paused" ? "hidden" : "visible";
+	const display = visible ? "contents" : "none";
+	const { ContentView, PaintView } = getNativeActivityViews();
+
+	return (
+		<Activity mode={activityMode}>
+			<ContentView style={{ display: "contents" }}>
+				<PaintView style={{ display }}>{children}</PaintView>
+			</ContentView>
+		</Activity>
+	);
+}
+
+const ACTIVITY_CONTENT_STYLE: Record<
+	string,
+	true | { process?: (value: unknown) => unknown }
+> = {
+	display: {
+		// Activity writes display:none to its nearest host child. Preserve the
+		// native paint while React pauses the subtree.
+		process: () => "contents",
+	},
+};
+
+const ACTIVITY_PAINT_STYLE: Record<
+	string,
+	true | { process?: (value: unknown) => unknown }
+> = {
+	display: {
+		process: (value: unknown) => (value === "none" ? "none" : "contents"),
+	},
+};
+
+const ACTIVITY_CONTENT_VIEW_CONFIG = {
+	uiViewClassName: "RCTView",
+	validAttributes: { style: ACTIVITY_CONTENT_STYLE },
+};
+
+const ACTIVITY_PAINT_VIEW_CONFIG = {
+	uiViewClassName: "RCTView",
+	validAttributes: { style: ACTIVITY_PAINT_STYLE },
+};
+
+type NativeActivityViewProps = Omit<ViewProps, "style"> & {
+	style?: { display?: "contents" | "none" };
+};
+
+let nativeActivityViews:
+	| {
+			ContentView: HostComponent<NativeActivityViewProps>;
+			PaintView: HostComponent<NativeActivityViewProps>;
+	  }
+	| undefined;
+
+function getNativeActivityViews() {
+	if (!nativeActivityViews) {
+		nativeActivityViews = {
+			ContentView: NativeComponentRegistry.get<NativeActivityViewProps>(
+				"ScreenTransitionsActivityContentView",
+				() => ACTIVITY_CONTENT_VIEW_CONFIG,
+			),
+			PaintView: NativeComponentRegistry.get<NativeActivityViewProps>(
+				"ScreenTransitionsActivityPaintView",
+				() => ACTIVITY_PAINT_VIEW_CONFIG,
+			),
+		};
+	}
+
+	return nativeActivityViews;
+}

package/src/components/activity/activity-view.web.tsx

@@ -0,0 +1,79 @@
+/// <reference lib="dom" />
+
+import { Activity, type ReactNode, useCallback } from "react";
+import { StyleSheet, View } from "react-native";
+
+export type ActivityViewMode = "normal" | "inert" | "paused";
+
+interface ActivityViewProps {
+	children: ReactNode;
+	mode: ActivityViewMode;
+	visible: boolean;
+}
+
+/**
+ * Web Activity writes display:none directly to its host child. Observe that
+ * write so lifecycle pausing and retained paint remain independent there too.
+ */
+export function ActivityView({ children, mode, visible }: ActivityViewProps) {
+	const display = visible ? "flex" : "none";
+	const activityMode = mode === "paused" ? "hidden" : "visible";
+	const onRef = useCallback(
+		(node: React.ComponentRef<typeof View> | null) => {
+			if (!(node instanceof HTMLElement)) {
+				return;
+			}
+
+			const childObservers: MutationObserver[] = [];
+			const observeChildren = () => {
+				for (const observer of childObservers) {
+					observer.disconnect();
+				}
+				childObservers.length = 0;
+
+				node.childNodes.forEach((child) => {
+					if (!(child instanceof HTMLElement)) {
+						return;
+					}
+
+					child.style.display = display;
+					const observer = new MutationObserver(() => {
+						child.style.display = display;
+					});
+					observer.observe(child, {
+						attributes: true,
+						attributeFilter: ["style"],
+					});
+					childObservers.push(observer);
+				});
+			};
+
+			observeChildren();
+			const observer = new MutationObserver(observeChildren);
+			observer.observe(node, { childList: true });
+
+			return () => {
+				observer.disconnect();
+				for (const childObserver of childObservers) {
+					childObserver.disconnect();
+				}
+			};
+		},
+		[display],
+	);
+
+	return (
+		<View ref={onRef} collapsable={false} style={styles.contents}>
+			<Activity mode={activityMode}>
+				<View collapsable={false} style={[styles.content, { display }]}>
+					{children}
+				</View>
+			</Activity>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	contents: { display: "contents" },
+	content: { flex: 1 },
+});

package/src/components/activity/variants/activity-container.tsx

@@ -1,25 +1,13 @@
 import { StyleSheet, View } from "react-native";
 
-import { ScreenContainer } from "react-native-screens";
-import { IS_WEB } from "../../../constants";
-import { useStack } from "../../../hooks/navigation/use-stack";
-
 interface Props {
 	children: React.ReactNode;
 }
 
 export const ActivityContainer = ({ children }: Props) => {
-	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
-	const Component = IS_WEB || nativeScreenDisabled ? View : ScreenContainer;
 	return (
-		<Component collapsable={false} style={styles.container}>
+		<View collapsable={false} style={StyleSheet.absoluteFill}>
 			{children}
-		</Component>
+		</View>
 	);
 };
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-});

package/src/components/activity/variants/activity-screen.tsx

@@ -2,23 +2,13 @@ import type * as React from "react";
 import { memo } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
-import { Screen } from "react-native-screens";
-import { IS_WEB } from "../../../constants";
-import { useStack } from "../../../hooks/navigation/use-stack";
 import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../stores/animation.store";
 import type { StackSceneActivity } from "../../../types/stack.types";
+import { ActivityView, type ActivityViewMode } from "../activity-view";
 import { DEFAULT_INACTIVE_BEHAVIOR, type InactiveBehavior } from "../helpers";
 
-type ActivityState = 0 | 1 | 2;
-const ActivityStateByActivity = {
-	active: 2,
-	inert: 1,
-	inactive: 0,
-	closing: 1,
-} satisfies Record<StackSceneActivity, ActivityState>;
-
 const PointerEventsByActivity = {
 	active: "auto",
 	inert: "auto",
@@ -27,53 +17,32 @@ const PointerEventsByActivity = {
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
-	activity?: StackSceneActivity;
 	children: React.ReactNode;
 	inactiveBehavior?: InactiveBehavior;
 	paintDriverRouteKey?: string;
 	hasNestedState?: boolean;
-	routeKey?: string;
+	routeKey: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
-	activity,
 	children,
 	inactiveBehavior,
 	paintDriverRouteKey,
 	hasNestedState,
 	routeKey,
 }: ActivityScreenProps) {
-	const stackActivity = useBlankStackStore((store) =>
-		routeKey ? store?.scenesByKey[routeKey]?.activity : undefined,
-	);
-	const stackInactiveBehavior = useBlankStackStore((store) =>
-		routeKey
-			? (
-					store?.scenesByKey[routeKey]?.descriptor.options as
-						| { inactiveBehavior?: InactiveBehavior }
-						| undefined
-				)?.inactiveBehavior
-			: undefined,
+	const scene = useBlankStackStore((store) => store.scenesByKey[routeKey]);
+	const stackPaintDriverRouteKey = useBlankStackStore((store) =>
+		store.paintDriverRouteKeyByRouteKey.get(routeKey),
 	);
-	const stackRoute = useBlankStackStore((store) =>
-		routeKey ? store?.scenesByKey[routeKey]?.route : undefined,
-	);
-	const stackPaintDriverRouteKey = useBlankStackStore((store) => {
-		if (!routeKey || !store) {
-			return undefined;
-		}
-
-		const routeIndex = store.routeKeys.indexOf(routeKey);
-		return store.routeKeys[routeIndex + 2];
-	});
-	const resolvedActivity = activity ?? stackActivity ?? "active";
+	const stackInactiveBehavior = (
+		scene.descriptor.options as { inactiveBehavior?: InactiveBehavior }
+	).inactiveBehavior;
 	const resolvedInactiveBehavior =
 		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
 	const resolvedPaintDriverRouteKey =
 		paintDriverRouteKey ?? stackPaintDriverRouteKey;
-	const resolvedHasNestedState =
-		hasNestedState ?? (stackRoute ? "state" in stackRoute : false);
-	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
+	const resolvedHasNestedState = hasNestedState ?? "state" in scene.route;
 	const paintDriverAnimations = resolvedPaintDriverRouteKey
 		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
 		: undefined;
@@ -97,77 +66,41 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
 
-	let activityState: ActivityState = ActivityStateByActivity[resolvedActivity];
-	let shouldFreeze = false;
-	let visible = resolvedActivity !== "inactive";
+	let activityViewMode: ActivityViewMode =
+		scene.activity === "active" ? "normal" : "inert";
+	let visible = scene.activity !== "inactive";
 
-	const shouldWaitForPaintDriver = !isPaintDriverSettledOnJS;
-
-	if (resolvedActivity === "inactive") {
-		if (resolvedInactiveBehavior === "keep") {
-			activityState = 1;
-			visible = true;
-		} else if (shouldWaitForPaintDriver) {
-			// Delay hiding until the paint driver has settled to avoid
-			// a blank frame during the transition.
-			activityState = 1;
+	if (scene.activity === "inactive") {
+		if (resolvedInactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
 			visible = true;
 		} else if (resolvedInactiveBehavior === "pause") {
-			activityState = 1;
-			shouldFreeze = true;
+			activityViewMode = "paused";
 			visible = true;
 		} else {
-			// `hide` freezes and hides native presentation. Non-nested
-			// `unmount` removes the React subtree through the JS guard below.
-			activityState = 0;
-			shouldFreeze = true;
+			activityViewMode = "paused";
 			visible = false;
 		}
 	}
 
 	const shouldUnmount =
 		resolvedInactiveBehavior === "unmount" &&
-		resolvedActivity === "inactive" &&
+		scene.activity === "inactive" &&
 		!resolvedHasNestedState &&
 		isPaintDriverSettledOnJS;
 
-	const pointerEvents = PointerEventsByActivity[resolvedActivity];
-
 	if (shouldUnmount) {
 		return null;
 	}
 
-	const style = [StyleSheet.absoluteFill, visible ? undefined : styles.hidden];
-
-	if (IS_WEB || nativeScreenDisabled) {
-		return (
-			<View style={style} pointerEvents={pointerEvents} collapsable={false}>
-				{children}
-			</View>
-		);
-	}
-
 	return (
-		<Screen
-			style={style}
-			activityState={activityState}
-			shouldFreeze={shouldFreeze}
-			pointerEvents={pointerEvents}
+		<View
+			style={StyleSheet.absoluteFill}
+			pointerEvents={PointerEventsByActivity[scene.activity]}
 			collapsable={false}
 		>
-			{children}
-		</Screen>
+			<ActivityView mode={activityViewMode} visible={visible}>
+				{children}
+			</ActivityView>
+		</View>
 	);
 });
-
-const HIDDEN_SCREEN_OFFSET = 10_000;
-const styles = StyleSheet.create({
-	hidden: {
-		// NOTE:
-		// When setting a screen to display:"none", the gesture detector will not recognize anymore. Since I believe
-		// rngh is attaching itself to its nearest native view, this of course would kill the detector.
-		// To avoid this, we use a transform to move the screen off-screen instead of display: "none". This isn't my favorite approach,
-		// but i'm hoping react 19's activity could mitigate this better and avoid dependence on rns.
-		transform: [{ translateY: HIDDEN_SCREEN_OFFSET }],
-	},
-});

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

@@ -13,7 +13,7 @@ import {
 import { BoundaryPortal } from "../portal/components/boundary-portal";
 import {
 	TARGET_OUTSIDE_ROOT_WARNING,
-	useBoundaryRootStore,
+	useOptionalBoundaryRootStore,
 } from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
@@ -36,7 +36,7 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		style,
 		...rest
 	} = props;
-	const rootContext = useBoundaryRootStore();
+	const rootContext = useOptionalBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
 	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;
@@ -68,7 +68,6 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		<BoundaryPortal
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
-			localMeasurement={rootContext?.localMeasurement}
 			placeholderRef={measurementRef}
 		>
 			<Animated.View

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

@@ -78,7 +78,6 @@ export function createBoundaryComponent<P extends object>(
 					<BoundaryPortal
 						boundaryId={root.boundTag.tag}
 						enabled={root.shouldRenderBoundaryRootThroughPortal}
-						localMeasurement={root.localMeasurement}
 						placeholderRef={root.measurementRef}
 					>
 						<AnimatedComponent

package/src/components/boundary/hooks/lifecycles/use-initial-destination-measurement.ts

@@ -7,8 +7,8 @@ import {
 	withTiming,
 } from "react-native-reanimated";
 import { scheduleOnUI } from "react-native-worklets";
-import { useStack } from "../../../../hooks/navigation/use-stack";
 import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useBlankStackStore } from "../../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../../stores/animation.store";
 import {
 	createScreenPairKey,
@@ -60,7 +60,7 @@ export const useInitialDestinationMeasurement = ({
 	const preferredSourceScreenKey = destinationPairKey
 		? getSourceScreenKeyFromPairKey(destinationPairKey)
 		: undefined;
-	const stackScenes = useStack((store) => store.scenes);
+	const stackScenes = useBlankStackStore((store) => store.scenes);
 	// A retained closing screen can still have registered boundaries, but it
 	// cannot own a new transition link.
 	const closingSourceScreenKeys = useMemo(

package/src/components/boundary/hooks/use-measurer.ts

@@ -3,7 +3,7 @@ import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
 import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
-import { useScreenSlots } from "../../../providers/screen/styles";
+import { useScreenSlotStore } from "../../../providers/screen/styles";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
 import { SystemStore } from "../../../stores/system.store";
@@ -46,7 +46,9 @@ export const useMeasurer = ({
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
 	);
-	const { visibilityBlocked } = useScreenSlots();
+	const visibilityBlocked = useScreenSlotStore(
+		(store) => store.visibilityBlocked,
+	);
 
 	return useCallback(
 		(target) => {

package/src/components/boundary/index.tsx

@@ -24,11 +24,7 @@ const BoundaryPrimitive = forwardRef<View, BoundaryPrimitiveProps>(
 BoundaryPrimitive.displayName = "Transition.Boundary.Primitive";
 
 const BoundaryRoot = createBoundaryComponent(BoundaryPrimitive);
-const BoundaryView = createBoundaryComponent(View);
-const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryRoot.displayName = "Transition.Boundary";
-BoundaryView.displayName = "Transition.Boundary.View";
-BoundaryTrigger.displayName = "Transition.Boundary.Trigger";
 BoundaryTarget.displayName = "Transition.Boundary.Target";
 Host.displayName = "Transition.Boundary.Host";
 
@@ -60,14 +56,6 @@ export interface BoundaryComponent extends BoundaryRootComponent {
 	 * Explicit host for clipping-escape placement.
 	 */
 	Host: typeof Host;
-	/**
-	 * @deprecated Use `Transition.Boundary` without `onPress`.
-	 */
-	View: typeof BoundaryView;
-	/**
-	 * @deprecated Use `Transition.Boundary` with `onPress`.
-	 */
-	Trigger: typeof BoundaryTrigger;
 }
 
 export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
@@ -75,6 +63,4 @@ export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
 export const Boundary = Object.assign(BoundaryRoot, {
 	Target: BoundaryTarget,
 	Host,
-	View: BoundaryView,
-	Trigger: BoundaryTrigger,
 }) as BoundaryComponent;