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

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

@@ -0,0 +1,65 @@
+import { type ComponentType, memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
+import type { ScreenSurfaceComponentProps } from "../../../types";
+import { usesLayerRenderProps } from "./render-component";
+
+type Props = {
+	children: React.ReactNode;
+	pointerEvents: "box-none" | undefined;
+};
+
+export const SurfaceLayer = memo(({ children, pointerEvents }: Props) => {
+	const SurfaceComponent = useDescriptorsStore(
+		(store) => store.options.surfaceComponent,
+	);
+
+	const AnimatedSurfaceComponent = useMemo(() => {
+		return SurfaceComponent && !usesLayerRenderProps(SurfaceComponent)
+			? Animated.createAnimatedComponent(SurfaceComponent as ComponentType<any>)
+			: null;
+	}, [SurfaceComponent]);
+
+	const animatedSurfaceStyle = useSlotStyles("surface");
+	const animatedSurfaceProps = useSlotProps("surface");
+	const surfaceStyles = [
+		styles.surface,
+		animatedSurfaceStyle,
+	] as ScreenSurfaceComponentProps["styles"];
+	const surfaceProps =
+		animatedSurfaceProps as ScreenSurfaceComponentProps["props"];
+
+	if (!SurfaceComponent) {
+		return children;
+	}
+
+	if (AnimatedSurfaceComponent) {
+		return (
+			<AnimatedSurfaceComponent
+				style={surfaceStyles}
+				animatedProps={animatedSurfaceProps}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</AnimatedSurfaceComponent>
+		);
+	}
+
+	return (
+		<SurfaceComponent
+			styles={surfaceStyles}
+			props={surfaceProps}
+			pointerEvents={pointerEvents}
+		>
+			{children}
+		</SurfaceComponent>
+	);
+});
+
+const styles = StyleSheet.create({
+	surface: {
+		flex: 1,
+	},
+});

package/src/components/screen-lifecycle/hooks/helpers/close-interception-rules.ts

@@ -0,0 +1,64 @@
+interface CloseInterceptionState {
+	enabled: boolean;
+	ownsAction: boolean;
+	ancestorDismissing: boolean;
+	routeIndex: number;
+	focusedIndex: number;
+}
+
+interface NavigationRouteLike {
+	key: string;
+	state?: NavigationStateLike;
+}
+
+interface NavigationStateLike {
+	key?: string;
+	routes: NavigationRouteLike[];
+}
+
+interface NavigationActionLike {
+	source?: unknown;
+	target?: unknown;
+}
+
+const containsRouteKey = (
+	routes: NavigationRouteLike[],
+	routeKey: string,
+): boolean =>
+	routes.some(
+		(route) =>
+			route.key === routeKey ||
+			(route.state ? containsRouteKey(route.state.routes, routeKey) : false),
+	);
+
+export const doesNavigatorOwnCloseAction = ({
+	state,
+	action,
+}: {
+	state: NavigationStateLike;
+	action: NavigationActionLike;
+}): boolean => {
+	if (typeof action.target === "string") {
+		return action.target === state.key;
+	}
+
+	if (typeof action.source === "string") {
+		return containsRouteKey(state.routes, action.source);
+	}
+
+	return true;
+};
+
+/** Only the focused removable route owns a stack close transition. */
+export const shouldInterceptClose = ({
+	enabled,
+	ownsAction,
+	ancestorDismissing,
+	routeIndex,
+	focusedIndex,
+}: CloseInterceptionState) =>
+	enabled &&
+	ownsAction &&
+	!ancestorDismissing &&
+	routeIndex > 0 &&
+	routeIndex === focusedIndex;

package/src/components/screen-lifecycle/hooks/use-close-completion.ts

@@ -0,0 +1,25 @@
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+export const useCloseCompletion = ({
+	closing,
+	animationProgress,
+	onComplete,
+}: {
+	closing: SharedValue<number>;
+	animationProgress: SharedValue<number>;
+	onComplete: () => void;
+}) => {
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return !!closing.get() && animationProgress.get() <= 0;
+		},
+		(complete, previouslyComplete) => {
+			"worklet";
+			if (complete && !previouslyComplete) {
+				scheduleOnRN(onComplete);
+			}
+		},
+	);
+};

package/src/components/screen-lifecycle/hooks/use-close-transition-intent.ts

@@ -1,65 +1,37 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: STACK_TYPE is stable per navigator */
 import { useLayoutEffect, useMemo, useRef } from "react";
+import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import useStableCallback from "../../../hooks/use-stable-callback";
-import {
-	type BaseDescriptor,
-	useDescriptorDerivations,
-} from "../../../providers/screen/descriptors";
-import { useBlankStackContext } from "../../../providers/stack/blank-stack.provider";
-import { useStackCoreContext } from "../../../providers/stack/core.provider";
+import { hasTransitionsEnabled } from "../../../providers/screen/animation/helpers/has-transitions-enabled";
+import type { BaseDescriptor } from "../../../providers/screen/descriptors";
+import { useCurrentScreenRelationships } from "../../../providers/screen/use-current-screen-relationships";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import { GestureStore } from "../../../stores/gesture.store";
 import {
-	LifecycleTransitionRequestKind,
-	type SystemStoreActions,
-	type SystemStoreMap,
-} from "../../../stores/system.store";
-import { StackType } from "../../../types/stack.types";
+	dispatchCloseAction,
+	isCloseActionReplay,
+} from "../../../utils/navigation/close-action-replay";
+import {
+	doesNavigatorOwnCloseAction,
+	shouldInterceptClose,
+} from "./helpers/close-interception-rules";
 import { resetStoresForScreen } from "./helpers/reset-stores-for-screen";
 
-interface CloseHookParams {
-	current: BaseDescriptor;
-	requestLifecycleTransition: SystemStoreActions["requestLifecycleTransition"];
-	resetStores: () => void;
-}
-
-const useBlankStackClose = ({
-	current,
-	requestLifecycleTransition,
-	resetStores,
-}: CloseHookParams) => {
-	const { handleCloseRoute } = useBlankStackContext();
-
-	useLayoutEffect(() => {
-		if (current.activity !== "closing") {
-			return;
-		}
-
-		requestLifecycleTransition(
-			LifecycleTransitionRequestKind.BlankStackClose,
-			0,
-		);
-	}, [current.activity, requestLifecycleTransition]);
-
-	const handleBlankStackCloseEnd = useStableCallback((finished: boolean) => {
-		if (!finished) return;
-		handleCloseRoute({ route: current.route });
-		requestAnimationFrame(() => {
-			resetStores();
-		});
-	});
-
-	return { handleBlankStackCloseEnd };
-};
-
-/**
- * Native stack close - listens to beforeRemove navigation event.
- */
-const useNativeStackClose = ({
-	current,
-	requestLifecycleTransition,
-	resetStores,
-}: CloseHookParams) => {
-	const { parentScreenKey } = useDescriptorDerivations();
+export function useCloseTransitionIntent(current: BaseDescriptor): {
+	completeClose: () => void;
+} {
+	const routeKey = current.route.key;
+	const transitionsAlwaysOn = useStackCoreStore(
+		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
+	);
+	const handleCloseRoute = useBlankStackStore(
+		(store) => store.handleCloseRoute,
+	);
+	const isBlankStackClosing = useBlankStackStore(
+		(store) => store.scenesByKey[routeKey]?.activity === "closing",
+	);
+	const { parentScreenKey } = useCurrentScreenRelationships();
+	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const pendingActionRef = useRef<any>(null);
 
 	const nearestAncestorDismissing = useMemo(() => {
@@ -68,76 +40,71 @@ const useNativeStackClose = ({
 		return GestureStore.peekBag(parentScreenKey)?.dismissing ?? null;
 	}, [parentScreenKey]);
 
-	const handleNativeCloseEnd = useStableCallback((finished: boolean) => {
-		if (!finished || !pendingActionRef.current) {
-			pendingActionRef.current = null;
-			return;
+	useLayoutEffect(() => {
+		if (isBlankStackClosing) {
+			requestDismiss();
 		}
+	}, [isBlankStackClosing, requestDismiss]);
 
-		current.navigation.dispatch(pendingActionRef.current);
+	const completeClose = useStableCallback(() => {
+		const pendingAction = pendingActionRef.current;
 		pendingActionRef.current = null;
-		requestAnimationFrame(() => {
-			resetStores();
-		});
+
+		if (pendingAction) {
+			dispatchCloseAction(pendingAction, (action) => {
+				current.navigation.dispatch(action);
+			});
+		} else if (handleCloseRoute) {
+			handleCloseRoute({ route: current.route });
+		} else {
+			dismissScreen();
+		}
+
+		resetStoresForScreen(routeKey);
 	});
 
-	const handleBeforeRemove = useStableCallback((e: any) => {
-		const options = current.options as { enableTransitions?: boolean };
-		const isEnabled = options.enableTransitions;
-		const navigation = current.navigation;
-		const routeKey = current.route.key;
-		const state = navigation.getState();
+	const handleBeforeRemove = useStableCallback((event: any) => {
+		if (isCloseActionReplay(event.data.action)) {
+			return;
+		}
+
+		const state = current.navigation.getState();
 		const routeIndex = state.routes.findIndex(
 			(route) => route.key === routeKey,
 		);
-		const isFirstScreen = routeIndex <= 0;
+		const action = event.data.action;
+		const ownsAction = doesNavigatorOwnCloseAction({
+			state,
+			action,
+		});
+		const shouldIntercept = shouldInterceptClose({
+			enabled: hasTransitionsEnabled(current.options, transitionsAlwaysOn),
+			ownsAction,
+			ancestorDismissing: !!nearestAncestorDismissing?.get(),
+			routeIndex,
+			focusedIndex: state.index,
+		});
 
-		if (!isEnabled || nearestAncestorDismissing?.get() || isFirstScreen) {
-			resetStores();
+		if (!shouldIntercept) {
 			return;
 		}
 
-		e.preventDefault();
-		pendingActionRef.current = e.data.action;
-		requestLifecycleTransition(LifecycleTransitionRequestKind.NativeClose, 0);
-	});
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: navigation listener should only rebind when the navigator instance changes
-	useLayoutEffect(() => {
-		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
-	}, [current.navigation]);
-
-	return { handleNativeCloseEnd };
-};
-
-/**
- * Handles close transition intent and returns finish callbacks for cleanup.
- */
-export function useCloseTransitionIntent(
-	current: BaseDescriptor,
-	system: SystemStoreMap,
-): {
-	handleBlankStackCloseEnd?: (finished: boolean) => void;
-	handleNativeCloseEnd?: (finished: boolean) => void;
-} {
-	const routeKey = current.route.key;
-	const { flags } = useStackCoreContext();
-	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
-	const { requestLifecycleTransition } = system.actions;
+		pendingActionRef.current ??= event.data.action;
+		if (!requestDismiss()) {
+			pendingActionRef.current = null;
+			return;
+		}
 
-	const resetStores = useStableCallback(() => {
-		resetStoresForScreen(routeKey);
+		event.preventDefault();
 	});
 
-	const closeParams: CloseHookParams = {
-		current,
-		requestLifecycleTransition,
-		resetStores,
-	};
+	useLayoutEffect(() => {
+		if (handleCloseRoute) {
+			return;
+		}
 
-	if (isNativeStack) {
-		return useNativeStackClose(closeParams);
-	}
+		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
+	}, [current.navigation, handleBeforeRemove, handleCloseRoute]);
 
-	return useBlankStackClose(closeParams);
+	return { completeClose };
 }

package/src/components/screen-lifecycle/hooks/use-open-transition-intent.ts

@@ -1,7 +1,7 @@
 import { useLayoutEffect } from "react";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
+	useDescriptorsStore,
 } from "../../../providers/screen/descriptors";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
 import {
@@ -41,7 +41,9 @@ export function useOpenTransitionIntent(
 	animations: AnimationStoreMap,
 	system: SystemStoreMap,
 ) {
-	const { isFirstKey } = useDescriptorDerivations();
+	const isFirstKey = useDescriptorsStore(
+		(store) => store.derivations.isFirstKey,
+	);
 	const { requestLifecycleTransition } = system.actions;
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
@@ -78,6 +80,7 @@ export function useOpenTransitionIntent(
 			return;
 		}
 
+		animations.entering.set(1);
 		requestLifecycleTransition(
 			LifecycleTransitionRequestKind.Open,
 			initialProgress ?? 1,

package/src/components/screen-lifecycle/hooks/use-transition-start-controller.ts

@@ -1,6 +1,7 @@
 import { useAnimatedReaction } from "react-native-reanimated";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
+import { GestureStore } from "../../../stores/gesture.store";
 import {
 	LifecycleTransitionRequestKind,
 	type SystemStoreMap,
@@ -11,23 +12,21 @@ export const useTransitionStartController = ({
 	current,
 	animations,
 	system,
-	onBlankStackCloseFinish,
-	onNativeCloseFinish,
 }: {
 	current: BaseDescriptor;
 	animations: AnimationStoreMap;
 	system: SystemStoreMap;
-	onBlankStackCloseFinish?: (finished: boolean) => void;
-	onNativeCloseFinish?: (finished: boolean) => void;
 }) => {
 	const {
 		targetProgress,
+		animationProgress,
 		pendingLifecycleRequestKind,
 		pendingLifecycleRequestTarget,
 		pendingLifecycleStartBlockCount,
 	} = system;
 	const { clearLifecycleTransitionRequest } = system.actions;
 	const transitionSpec = current.options.transitionSpec;
+	const isDragging = GestureStore.getValue(current.route.key, "dragging");
 
 	useAnimatedReaction(
 		() => {
@@ -50,19 +49,16 @@ export const useTransitionStartController = ({
 				return;
 			}
 
-			const onAnimationFinish =
-				kind === LifecycleTransitionRequestKind.BlankStackClose
-					? onBlankStackCloseFinish
-					: kind === LifecycleTransitionRequestKind.NativeClose
-						? onNativeCloseFinish
-						: undefined;
-
 			animateToProgress({
 				target,
 				spec: transitionSpec,
+				emitWillAnimate:
+					kind !== LifecycleTransitionRequestKind.Open ||
+					!animations.entering.get(),
 				animations,
 				targetProgress,
-				onAnimationFinish,
+				animationProgress,
+				isDragging,
 			});
 
 			clearLifecycleTransitionRequest();

package/src/components/screen-lifecycle/index.tsx

@@ -1,7 +1,8 @@
-import { useDescriptors } from "../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import { AnimationStore } from "../../stores/animation.store";
 import { SystemStore } from "../../stores/system.store";
 import { useScreenHistory } from "./hooks/history/use-screen-history";
+import { useCloseCompletion } from "./hooks/use-close-completion";
 import { useCloseTransitionIntent } from "./hooks/use-close-transition-intent";
 import { useOpenTransitionIntent } from "./hooks/use-open-transition-intent";
 import { useTransitionStartController } from "./hooks/use-transition-start-controller";
@@ -15,13 +16,13 @@ interface Props {
  * Reads current/previous descriptors from DescriptorsProvider context.
  */
 export const ScreenLifecycle = ({ children }: Props) => {
-	const { current, previous } = useDescriptors();
+	const current = useDescriptorsStore((store) => store.current);
+	const previous = useDescriptorsStore((store) => store.previous);
 
 	const animations = AnimationStore.getBag(current.route.key);
 	const system = SystemStore.getBag(current.route.key);
 
-	const { handleBlankStackCloseEnd, handleNativeCloseEnd } =
-		useCloseTransitionIntent(current, system);
+	const { completeClose } = useCloseTransitionIntent(current);
 
 	useOpenTransitionIntent(current, animations, system);
 
@@ -29,8 +30,12 @@ export const ScreenLifecycle = ({ children }: Props) => {
 		current,
 		animations,
 		system,
-		onBlankStackCloseFinish: handleBlankStackCloseEnd,
-		onNativeCloseFinish: handleNativeCloseEnd,
+	});
+
+	useCloseCompletion({
+		closing: animations.closing,
+		animationProgress: system.animationProgress,
+		onComplete: completeClose,
 	});
 
 	useScreenHistory(current, previous, animations);

package/src/components/stack-view.tsx

@@ -1,73 +1,110 @@
-import { memo } from "react";
-import { ActivityContainer, ActivityScreen } from "../components/activity";
-import { PortalProvider } from "../components/boundary/portal";
-import { Overlay } from "../components/overlay";
+import { memo, type ReactNode } from "react";
 import { NavigationScreenProvider } from "../providers/navigation/navigation-host.provider";
 import { ScreenComposer } from "../providers/screen/screen-composer";
-import { withBlankStack } from "../providers/stack/blank-stack.provider";
-import { withStackCore } from "../providers/stack/core.provider";
-import type {
-	BlankStackDescriptor,
-	BlankStackNavigationHelpers,
-} from "../types/blank-stack.types";
-import type { BaseStackScene } from "../types/stack.types";
+import {
+	BlankStackProvider,
+	useBlankStackStore,
+} from "../providers/stack/blank-stack.provider";
+import {
+	type StackCoreConfig,
+	StackCoreProvider,
+} from "../providers/stack/core.provider";
+import type { BlankStackProviderProps } from "../types/providers/blank-stack-provider.types";
+import { ActivityContainer, ActivityScreen } from "./activity";
+import { PortalProvider } from "./boundary/portal";
+import { Overlay } from "./overlay";
 
-interface BlankSceneRowProps {
-	scene: BaseStackScene<BlankStackDescriptor>;
-	paintDriverRouteKey?: string;
+interface RouteKeyProps {
+	routeKey: string;
 }
 
-const BlankSceneRow = memo(function BlankSceneRow({
-	scene,
-	paintDriverRouteKey,
-}: BlankSceneRowProps) {
-	const descriptor = scene.descriptor;
-	const route = scene.route;
+const BlankNavigationProvider = memo(function BlankNavigationProvider({
+	children,
+	routeKey,
+}: RouteKeyProps & { children: ReactNode }) {
+	const navigation = useBlankStackStore(
+		(store) => store.scenesByKey[routeKey]?.descriptor.navigation,
+	);
+	const route = useBlankStackStore(
+		(store) => store.scenesByKey[routeKey]?.route,
+	);
+
+	if (!navigation || !route) {
+		throw new Error(`Blank stack scene "${routeKey}" was not found.`);
+	}
 
 	return (
-		<NavigationScreenProvider navigation={descriptor.navigation} route={route}>
-			<ActivityScreen
-				activity={descriptor.activity}
-				inactiveBehavior={descriptor.options.inactiveBehavior}
-				paintDriverRouteKey={paintDriverRouteKey}
-				hasNestedState={"state" in route}
-			>
-				<ScreenComposer
-					previous={scene.previousDescriptor}
-					current={descriptor}
-					next={scene.nextDescriptor}
-				>
-					{descriptor.render?.()}
+		<NavigationScreenProvider navigation={navigation} route={route}>
+			{children}
+		</NavigationScreenProvider>
+	);
+});
+
+const BlankSceneContent = memo(function BlankSceneContent({
+	routeKey,
+}: RouteKeyProps) {
+	const render = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.descriptor.render,
+	);
+
+	return render?.() ?? null;
+});
+
+const BlankSceneRow = memo(function BlankSceneRow({ routeKey }: RouteKeyProps) {
+	return (
+		<BlankNavigationProvider routeKey={routeKey}>
+			<ActivityScreen routeKey={routeKey}>
+				<ScreenComposer routeKey={routeKey}>
+					<BlankSceneContent routeKey={routeKey} />
 				</ScreenComposer>
 			</ActivityScreen>
-		</NavigationScreenProvider>
+		</BlankNavigationProvider>
 	);
 });
 
-export const StackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: false },
-	withBlankStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
-		({ scenes, shouldShowFloatOverlay }) => {
-			return (
-				<PortalProvider>
-					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+const EMPTY_ROUTE_KEYS: string[] = [];
+
+const StackViewContent = memo(function StackViewContent() {
+	const routeKeys = useBlankStackStore(
+		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
+	);
+
+	return (
+		<PortalProvider>
+			<Overlay.Float />
+
+			<ActivityContainer>
+				{routeKeys.map((routeKey) => (
+					<BlankSceneRow key={routeKey} routeKey={routeKey} />
+				))}
+			</ActivityContainer>
+		</PortalProvider>
+	);
+});
 
-					<ActivityContainer>
-						{scenes.map((scene, index) => {
-							const route = scene.route;
-							const paintDriverRouteKey = scenes[index + 2]?.route.key;
+type StackViewProps = BlankStackProviderProps & StackCoreConfig;
 
-							return (
-								<BlankSceneRow
-									key={route.key}
-									scene={scene}
-									paintDriverRouteKey={paintDriverRouteKey}
-								/>
-							);
-						})}
-					</ActivityContainer>
-				</PortalProvider>
-			);
-		},
-	),
-);
+export const StackView = memo(function StackView({
+	TRANSITIONS_ALWAYS_ON,
+	state,
+	navigation,
+	descriptors,
+	describe,
+}: StackViewProps) {
+	return (
+		<StackCoreProvider
+			config={{
+				TRANSITIONS_ALWAYS_ON: TRANSITIONS_ALWAYS_ON ?? true,
+			}}
+		>
+			<BlankStackProvider
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			>
+				<StackViewContent />
+			</BlankStackProvider>
+		</StackCoreProvider>
+	);
+});