react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

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 {
-	useStackCoreContext,
-	withStackCore,
-} 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;
@@ -102,11 +95,16 @@ function buildTransitionStackState({
 		}
 
 		scenes.push({
+			activity:
+				sceneIndex === state.index
+					? "active"
+					: sceneIndex === state.index - 1
+						? "inert"
+						: "inactive",
 			route,
 			descriptor: normalizedDescriptor,
 			previousDescriptor,
 		});
-		routeKeys.push(route.key);
 		routeIndexByKey.set(route.key, sceneIndex);
 
 		if (
@@ -137,7 +135,6 @@ function ScreenTransitionsStackContent({
 	layout,
 	layoutArgs,
 }: ScreenTransitionsStackContentProps) {
-	const { flags } = useStackCoreContext();
 	const transitionState = useMemo(
 		() =>
 			buildTransitionStackState({
@@ -146,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,
@@ -171,22 +150,43 @@ 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>
 	);
 }
 
-export const ScreenTransitionsStackLayout = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE },
-	ScreenTransitionsStackContent,
-);
+export function ScreenTransitionsStackLayout(
+	props: ScreenTransitionsStackContentProps,
+) {
+	return (
+		<StackCoreProvider config={{ TRANSITIONS_ALWAYS_ON: false }}>
+			<ScreenTransitionsStackContent {...props} />
+		</StackCoreProvider>
+	);
+}
 
 export function ScreenTransitionsScreenLayout({
 	screenLayout,

package/src/animation/snap-to.ts

@@ -49,6 +49,10 @@ export function snapDescriptorToIndex(
 		descriptor.route.key,
 		"targetProgress",
 	);
+	const animationProgressValue = SystemStore.getValue(
+		descriptor.route.key,
+		"animationProgress",
+	);
 
 	scheduleOnUI(() => {
 		"worklet";
@@ -56,8 +60,10 @@ export function snapDescriptorToIndex(
 
 		animateToProgress({
 			target: targetProgress,
+			markEntering: false,
 			animations,
 			targetProgress: targetProgressValue,
+			animationProgress: animationProgressValue,
 			spec: resolveSnapTransitionSpec(
 				descriptor.options.transitionSpec,
 				targetProgress < currentProgress ? "collapse" : "expand",

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,22 +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",
@@ -26,23 +17,34 @@ const PointerEventsByActivity = {
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
-	activity: StackSceneActivity;
 	children: React.ReactNode;
 	inactiveBehavior?: InactiveBehavior;
 	paintDriverRouteKey?: string;
 	hasNestedState?: boolean;
+	routeKey: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
-	activity,
 	children,
-	inactiveBehavior = DEFAULT_INACTIVE_BEHAVIOR,
+	inactiveBehavior,
 	paintDriverRouteKey,
 	hasNestedState,
+	routeKey,
 }: ActivityScreenProps) {
-	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
-	const paintDriverAnimations = paintDriverRouteKey
-		? AnimationStore.getBag(paintDriverRouteKey)
+	const scene = useBlankStackStore((store) => store.scenesByKey[routeKey]);
+	const stackPaintDriverRouteKey = useBlankStackStore((store) =>
+		store.paintDriverRouteKeyByRouteKey.get(routeKey),
+	);
+	const stackInactiveBehavior = (
+		scene.descriptor.options as { inactiveBehavior?: InactiveBehavior }
+	).inactiveBehavior;
+	const resolvedInactiveBehavior =
+		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
+	const resolvedPaintDriverRouteKey =
+		paintDriverRouteKey ?? stackPaintDriverRouteKey;
+	const resolvedHasNestedState = hasNestedState ?? "state" in scene.route;
+	const paintDriverAnimations = resolvedPaintDriverRouteKey
+		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
 		: undefined;
 
 	/**
@@ -64,77 +66,41 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
 
-	let activityState: ActivityState = ActivityStateByActivity[activity];
-	let shouldFreeze = false;
-	let visible = activity !== "inactive";
-
-	const shouldWaitForPaintDriver = !isPaintDriverSettledOnJS;
+	let activityViewMode: ActivityViewMode =
+		scene.activity === "active" ? "normal" : "inert";
+	let visible = scene.activity !== "inactive";
 
-	if (activity === "inactive") {
-		if (inactiveBehavior === "keep") {
-			activityState = 1;
+	if (scene.activity === "inactive") {
+		if (resolvedInactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
 			visible = true;
-		} else if (shouldWaitForPaintDriver) {
-			// Delay hiding until the paint driver has settled to avoid
-			// a blank frame during the transition.
-			activityState = 1;
-			visible = true;
-		} else if (inactiveBehavior === "pause") {
-			activityState = 1;
-			shouldFreeze = true;
+		} else if (resolvedInactiveBehavior === "pause") {
+			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 =
-		inactiveBehavior === "unmount" &&
-		activity === "inactive" &&
-		!hasNestedState &&
+		resolvedInactiveBehavior === "unmount" &&
+		scene.activity === "inactive" &&
+		!resolvedHasNestedState &&
 		isPaintDriverSettledOnJS;
 
-	const pointerEvents = PointerEventsByActivity[activity];
-
 	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-lifecycle.tsx

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import type { View } from "react-native";
+import type { AnimatedRef } from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import type { BoundTag } from "../../../stores/bounds/types";
+import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import type {
+	BoundaryConfigProps,
+	BoundaryLocalMeasurementValue,
+} from "../types";
+
+interface BoundaryLifecycleProps {
+	boundTag: BoundTag;
+	config: BoundaryConfigProps;
+	currentScreenKey: string;
+	enabled: boolean;
+	escapeClipping: boolean;
+	handoff: boolean;
+	localMeasurement: BoundaryLocalMeasurementValue;
+	measuredRef: AnimatedRef<View>;
+	style?: unknown;
+}
+
+export const BoundaryLifecycle = memo(function BoundaryLifecycle({
+	boundTag,
+	config,
+	currentScreenKey,
+	enabled,
+	escapeClipping,
+	handoff,
+	localMeasurement,
+	measuredRef,
+	style,
+}: BoundaryLifecycleProps) {
+	const hasConfiguredInterpolator = useDescriptorsStore(
+		(s) => s.derivations.hasConfiguredInterpolator,
+	);
+
+	useBoundaryMeasurement({
+		boundTag,
+		enabled,
+		runtimeEnabled: enabled && hasConfiguredInterpolator,
+		currentScreenKey,
+		measuredRef,
+		style,
+		handoff,
+		escapeClipping,
+		localMeasurement,
+		config,
+	});
+
+	return null;
+});

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

@@ -1,19 +1,20 @@
 import type React from "react";
-import { memo, useMemo } from "react";
-import type { View } from "react-native";
-import Animated, { useAnimatedRef } from "react-native-reanimated";
+import { memo, useLayoutEffect } from "react";
+import Animated from "react-native-reanimated";
 import {
 	useComposedSlotStyles,
 	useSlotLayoutStyles,
 } from "../../../providers/screen/styles";
-import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
-import { useRegisterTarget } from "../hooks/use-register-target";
+import { logger } from "../../../utils/logger";
 import {
 	BoundaryContentPortal,
 	BoundaryContentPortalHost,
 } from "../portal/components/boundary-content-portal";
 import { BoundaryPortal } from "../portal/components/boundary-portal";
-import { useBoundaryRootContext } from "../providers/boundary-root.provider";
+import {
+	TARGET_OUTSIDE_ROOT_WARNING,
+	useOptionalBoundaryRootStore,
+} from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
 	React.ComponentProps<typeof Animated.View>,
@@ -22,19 +23,26 @@ type BoundaryTargetProps = Omit<
 	children?: React.ReactNode;
 };
 
-export const BoundaryTarget = memo(function BoundaryTarget(
-	props: BoundaryTargetProps,
-) {
-	const { children, pointerEvents, style, ...rest } = props;
-	const targetAnimatedRef = useAnimatedRef<View>();
-	const targetEscapePlaceholderRef = useAnimatedRef<View>();
-	const rootContext = useBoundaryRootContext();
+export const BOUNDARY_TARGET_ACTIVE_PROP = "__boundaryTargetActive" as const;
+type InternalBoundaryTargetProps = BoundaryTargetProps & {
+	[BOUNDARY_TARGET_ACTIVE_PROP]?: boolean;
+};
+
+const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
+	const {
+		[BOUNDARY_TARGET_ACTIVE_PROP]: active,
+		children,
+		pointerEvents,
+		style,
+		...rest
+	} = props;
+	const rootContext = useOptionalBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
-	const isActiveTarget = rootContext?.activeTargetRef === targetAnimatedRef;
+	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;
 	const handoffEnabled = isActiveTarget && rootContext?.handoffEnabled === true;
 	const shouldEscapeTargetToScreenHost =
-		portalRuntime?.escapeClipping === true && boundaryId !== undefined;
+		isActiveTarget && portalRuntime?.escapeClipping === true;
 
 	const shouldApplyAssociatedStyleInline =
 		isActiveTarget && portalRuntime?.escapeClipping !== true;
@@ -46,24 +54,26 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 		style,
 	);
 	const portalLayoutStyle = useSlotLayoutStyles(rootContext?.boundTag.tag);
-	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-	const measurementRef = shouldEscapeTargetToScreenHost
-		? targetEscapePlaceholderRef
-		: targetAnimatedRef;
+	const measurementRef = isActiveTarget
+		? rootContext.measurementRef
+		: undefined;
 
-	useRegisterTarget({ preparedStyles, measurementRef, targetAnimatedRef });
+	useLayoutEffect(() => {
+		if (__DEV__ && rootContext === null) {
+			logger.warn(TARGET_OUTSIDE_ROOT_WARNING);
+		}
+	}, [rootContext]);
 
 	return (
 		<BoundaryPortal
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
-			placeholderRef={targetEscapePlaceholderRef}
+			placeholderRef={measurementRef}
 		>
 			<Animated.View
 				{...rest}
 				pointerEvents={pointerEvents}
-				ref={targetAnimatedRef}
+				ref={shouldEscapeTargetToScreenHost ? undefined : measurementRef}
 				style={[
 					style,
 					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
@@ -86,4 +96,8 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 			</Animated.View>
 		</BoundaryPortal>
 	);
-});
+};
+
+export const BoundaryTarget = memo(
+	BoundaryTargetInner,
+) as React.NamedExoticComponent<BoundaryTargetProps>;