react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

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

@@ -1,110 +0,0 @@
-import { type ComponentType, memo, useMemo } from "react";
-import { StyleSheet, View } from "react-native";
-import { GestureDetector } from "react-native-gesture-handler";
-import Animated from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { useScreenGestureStore } from "../../../providers/screen/gestures";
-import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
-import type { ScreenContentComponentProps } from "../../../types";
-import { ScreenFallbackHost } from "../../boundary/portal/components/boundary-portal/components/host";
-import { useContentLayout } from "../hooks/use-content-layout";
-import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
-import { usesLayerRenderProps } from "./render-component";
-import { SurfaceLayer } from "./surface";
-
-type Props = {
-	children: React.ReactNode;
-	pointerEvents: "box-none" | undefined;
-	isBackdropActive: boolean;
-};
-
-export const ContentLayer = memo(
-	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const gestureContext = useScreenGestureStore();
-		const ContentComponent = useDescriptorsStore(
-			(store) => store.options.contentComponent,
-		);
-		const isNavigationMaskEnabled = useDescriptorsStore(
-			(store) => !!store.options.navigationMaskEnabled,
-		);
-		const hasAutoSnapPoint = useDescriptorsStore(
-			(store) => store.options.snapPoints?.includes("auto") ?? false,
-		);
-		const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
-
-		const AnimatedContentComponent = useMemo(() => {
-			return ContentComponent && !usesLayerRenderProps(ContentComponent)
-				? Animated.createAnimatedComponent(
-						ContentComponent as ComponentType<any>,
-					)
-				: null;
-		}, [ContentComponent]);
-
-		const handleContentLayout = useContentLayout();
-
-		const animatedContentStyle = useSlotStyles("content");
-		const animatedContentProps = useSlotProps("content");
-		const contentStyles = [
-			styles.content,
-			animatedContentStyle,
-		] as ScreenContentComponentProps["styles"];
-		const contentProps =
-			animatedContentProps as ScreenContentComponentProps["props"];
-
-		const screenChildren = hasAutoSnapPoint ? (
-			<View collapsable={false} onLayout={handleContentLayout}>
-				{children}
-			</View>
-		) : (
-			children
-		);
-
-		const contentChildren = (
-			<MaybeMaskedNavigationContainer
-				pointerEvents={contentPointerEvents}
-				enabled={isNavigationMaskEnabled}
-			>
-				<SurfaceLayer pointerEvents={contentPointerEvents}>
-					{screenChildren}
-				</SurfaceLayer>
-				<ScreenFallbackHost />
-			</MaybeMaskedNavigationContainer>
-		);
-
-		return (
-			<GestureDetector gesture={gestureContext.detectorGesture}>
-				{AnimatedContentComponent ? (
-					<AnimatedContentComponent
-						style={contentStyles}
-						animatedProps={animatedContentProps}
-						pointerEvents={contentPointerEvents}
-					>
-						{contentChildren}
-					</AnimatedContentComponent>
-				) : ContentComponent ? (
-					<ContentComponent
-						styles={contentStyles}
-						props={contentProps}
-						pointerEvents={contentPointerEvents}
-					>
-						{contentChildren}
-					</ContentComponent>
-				) : (
-					<Animated.View
-						style={contentStyles}
-						animatedProps={animatedContentProps}
-						pointerEvents={contentPointerEvents}
-					>
-						{contentChildren}
-					</Animated.View>
-				)}
-			</GestureDetector>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	content: {
-		flex: 1,
-	},
-});

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

@@ -1,113 +0,0 @@
-import { memo, useCallback } from "react";
-import { I18nManager, StyleSheet, View, type ViewProps } from "react-native";
-import Animated from "react-native-reanimated";
-import {
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../constants";
-import { useSlotStyles } from "../../../providers/screen/styles";
-import { logger } from "../../../utils/logger";
-
-type Props = {
-	enabled: boolean;
-	children: React.ReactNode;
-	pointerEvents: ViewProps["pointerEvents"];
-};
-
-let LazyMaskedView = View;
-
-try {
-	LazyMaskedView = require("@react-native-masked-view/masked-view").default;
-} catch (_) {
-	// optional peer dependency
-}
-
-let hasWarnedMissingMaskedView = false;
-
-export const MaybeMaskedNavigationContainer = memo(
-	({ enabled, children, pointerEvents }: Props) => {
-		if (!enabled || LazyMaskedView === View) {
-			return children;
-		}
-
-		return (
-			<MaskedNavigationContainer pointerEvents={pointerEvents}>
-				{children}
-			</MaskedNavigationContainer>
-		);
-	},
-);
-
-const MaskedNavigationContainer = memo(
-	({
-		children,
-		pointerEvents,
-	}: {
-		children: React.ReactNode;
-		pointerEvents: ViewProps["pointerEvents"];
-	}) => {
-		const maybeLogWarning = useCallback(() => {
-			if (LazyMaskedView !== View) return;
-			if (hasWarnedMissingMaskedView) return;
-
-			hasWarnedMissingMaskedView = true;
-			logger.warn(
-				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
-			);
-		}, []);
-
-		const animatedNavigationMaskStyle = useSlotStyles(
-			NAVIGATION_MASK_ELEMENT_STYLE_ID,
-		);
-		const animatedNavigationMaskContainerStyle = useSlotStyles(
-			NAVIGATION_MASK_CONTAINER_STYLE_ID,
-		);
-
-		return (
-			<LazyMaskedView
-				style={styles.navigationMaskedRoot}
-				// @ts-expect-error masked-view package types are too strict here
-				maskElement={
-					<Animated.View
-						style={[styles.navigationMaskElement, animatedNavigationMaskStyle]}
-						pointerEvents="none"
-					/>
-				}
-				pointerEvents={pointerEvents}
-				onLayout={maybeLogWarning}
-			>
-				<Animated.View
-					style={[
-						styles.navigationContainer,
-						animatedNavigationMaskContainerStyle,
-					]}
-					collapsable={false}
-				>
-					{children}
-				</Animated.View>
-			</LazyMaskedView>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	navigationMaskedRoot: {
-		flex: 1,
-	},
-	navigationContainer: {
-		flex: 1,
-	},
-	// The mask rect's translate math assumes a physical top-left base. Under
-	// native RTL a fixed-width flex child anchors to the right edge, so pin it
-	// to the physical left (`end` = left edge in RTL).
-	navigationMaskElement: I18nManager.isRTL
-		? {
-				backgroundColor: "white",
-				end: 0,
-				position: "absolute",
-				top: 0,
-			}
-		: {
-				backgroundColor: "white",
-			},
-});

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

@@ -1,65 +0,0 @@
-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/reset-stores-for-screen.ts

@@ -1,15 +0,0 @@
-import { scheduleOnUI } from "react-native-worklets";
-import { AnimationStore } from "../../../../stores/animation.store";
-import { clear } from "../../../../stores/bounds/internals/clear";
-import { GestureStore } from "../../../../stores/gesture.store";
-import { ScrollStore } from "../../../../stores/scroll.store";
-import { SystemStore } from "../../../../stores/system.store";
-
-export function resetStoresForScreen(routeKey: string) {
-	AnimationStore.clearBag(routeKey);
-	GestureStore.clearBag(routeKey);
-	ScrollStore.clearBag(routeKey);
-	SystemStore.clearBag(routeKey);
-
-	scheduleOnUI(clear, routeKey);
-}

package/src/components/screen-lifecycle/hooks/history/use-screen-history.ts

@@ -1,90 +0,0 @@
-import { useEffect } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import useStableCallback from "../../../../hooks/use-stable-callback";
-import type { BaseDescriptor } from "../../../../providers/screen/descriptors";
-import type { AnimationStoreMap } from "../../../../stores/animation.store";
-import { HistoryStore } from "../../../../stores/history.store";
-import {
-	registerMountedRoute,
-	unregisterMountedRoute,
-} from "./navigator-route-registry";
-
-function hasSnapPoints(descriptor: BaseDescriptor): boolean {
-	const snapPoints = descriptor.options?.snapPoints;
-	return Boolean(snapPoints && snapPoints.length > 0);
-}
-
-/**
- * Check if a screen is a leaf (renders visible content) vs a navigator container.
- * Navigator containers have nested state with routes.
- */
-function isLeafScreen(navigation: BaseDescriptor["navigation"]): boolean {
-	const state = navigation.getState();
-	const index = state?.index ?? -1;
-	const currentRoute = state?.routes?.[index];
-	if (!currentRoute) return false;
-	return !("state" in currentRoute);
-}
-
-function shouldTrackInHistory(descriptor: BaseDescriptor): boolean {
-	return hasSnapPoints(descriptor) || isLeafScreen(descriptor.navigation);
-}
-
-/**
- * Keeps navigator route registration and screen history in sync.
- */
-export function useScreenHistory(
-	current: BaseDescriptor,
-	previous: BaseDescriptor | undefined,
-	animations: AnimationStoreMap,
-) {
-	const navigatorKey = current.navigation.getState()?.key ?? "";
-	const routeKey = current.route.key;
-
-	useEffect(() => {
-		registerMountedRoute(navigatorKey, routeKey);
-
-		return () => {
-			const shouldClearNavigator = unregisterMountedRoute(
-				navigatorKey,
-				routeKey,
-			);
-			if (shouldClearNavigator) {
-				HistoryStore.clearNavigator(navigatorKey);
-			}
-		};
-	}, [navigatorKey, routeKey]);
-
-	// Track history via focus listener - waits for nested navigators to initialize
-	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
-	useEffect(() => {
-		if (shouldTrackInHistory(current)) {
-			HistoryStore.focus(current, navigatorKey);
-		}
-
-		const unsubscribe = current.navigation.addListener?.("focus", () => {
-			if (shouldTrackInHistory(current)) {
-				HistoryStore.focus(current, navigatorKey);
-			}
-		});
-
-		return () => unsubscribe?.();
-	}, []);
-
-	const handleBlur = useStableCallback(() => {
-		if (previous && shouldTrackInHistory(previous)) {
-			const prevNavigatorKey = previous.navigation.getState()?.key ?? "";
-			HistoryStore.focus(previous, prevNavigatorKey);
-		}
-	});
-
-	useAnimatedReaction(
-		() => animations.closing.get(),
-		(closing, prevClosing) => {
-			if (closing && !prevClosing) {
-				scheduleOnRN(handleBlur);
-			}
-		},
-	);
-}

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

@@ -1,25 +0,0 @@
-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,110 +0,0 @@
-import { useLayoutEffect, useMemo, useRef } from "react";
-import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
-import useStableCallback from "../../../hooks/use-stable-callback";
-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 {
-	dispatchCloseAction,
-	isCloseActionReplay,
-} from "../../../utils/navigation/close-action-replay";
-import {
-	doesNavigatorOwnCloseAction,
-	shouldInterceptClose,
-} from "./helpers/close-interception-rules";
-import { resetStoresForScreen } from "./helpers/reset-stores-for-screen";
-
-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(() => {
-		if (!parentScreenKey) return null;
-
-		return GestureStore.peekBag(parentScreenKey)?.dismissing ?? null;
-	}, [parentScreenKey]);
-
-	useLayoutEffect(() => {
-		if (isBlankStackClosing) {
-			requestDismiss();
-		}
-	}, [isBlankStackClosing, requestDismiss]);
-
-	const completeClose = useStableCallback(() => {
-		const pendingAction = pendingActionRef.current;
-		pendingActionRef.current = null;
-
-		if (pendingAction) {
-			dispatchCloseAction(pendingAction, (action) => {
-				current.navigation.dispatch(action);
-			});
-		} else if (handleCloseRoute) {
-			handleCloseRoute({ route: current.route });
-		} else {
-			dismissScreen();
-		}
-
-		resetStoresForScreen(routeKey);
-	});
-
-	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 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 (!shouldIntercept) {
-			return;
-		}
-
-		pendingActionRef.current ??= event.data.action;
-		if (!requestDismiss()) {
-			pendingActionRef.current = null;
-			return;
-		}
-
-		event.preventDefault();
-	});
-
-	useLayoutEffect(() => {
-		if (handleCloseRoute) {
-			return;
-		}
-
-		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
-	}, [current.navigation, handleBeforeRemove, handleCloseRoute]);
-
-	return { completeClose };
-}

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

@@ -1,89 +0,0 @@
-import { useLayoutEffect } from "react";
-import {
-	type BaseDescriptor,
-	useDescriptorsStore,
-} from "../../../providers/screen/descriptors";
-import type { AnimationStoreMap } from "../../../stores/animation.store";
-import {
-	LifecycleTransitionRequestKind,
-	type SystemStoreMap,
-} from "../../../stores/system.store";
-import type { SnapPoint } from "../../../types/screen.types";
-
-/**
- * Calculates the initial progress value based on snap points configuration.
- * Returns `'auto'` if the initial snap point is the `'auto'` keyword
- * (meaning the animation must be deferred until content is measured).
- */
-function getInitialProgress({
-	snapPoints,
-	initialSnapIndex,
-}: {
-	snapPoints?: SnapPoint[];
-	initialSnapIndex: number;
-}): number | "auto" | undefined {
-	if (!snapPoints) {
-		return undefined;
-	}
-
-	const clampedIndex = Math.min(
-		Math.max(0, initialSnapIndex),
-		snapPoints.length - 1,
-	);
-	return snapPoints[clampedIndex];
-}
-
-/**
- * Handles opening transition intent on mount.
- */
-export function useOpenTransitionIntent(
-	current: BaseDescriptor,
-	animations: AnimationStoreMap,
-	system: SystemStoreMap,
-) {
-	const isFirstKey = useDescriptorsStore(
-		(store) => store.derivations.isFirstKey,
-	);
-	const { requestLifecycleTransition } = system.actions;
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
-	useLayoutEffect(() => {
-		const {
-			snapPoints,
-			initialSnapIndex = 0,
-			experimental_animateOnInitialMount,
-		} = current.options;
-
-		const initialProgress = getInitialProgress({
-			snapPoints,
-			initialSnapIndex,
-		});
-
-		if (isFirstKey && !experimental_animateOnInitialMount) {
-			if (initialProgress === "auto") {
-				system.targetProgress.set(0);
-				animations.transitionProgress.set(0);
-			} else {
-				const target = initialProgress ?? 1;
-				system.targetProgress.set(target);
-				animations.transitionProgress.set(target);
-			}
-			animations.progressAnimating.set(0);
-			animations.closing.set(0);
-			animations.entering.set(0);
-			return;
-		}
-
-		// When the initial snap point is 'auto', defer the opening animation until
-		// ScreenContainer has measured the content and set resolvedAutoSnapPoint.
-		if (initialProgress === "auto") {
-			return;
-		}
-
-		animations.entering.set(1);
-		requestLifecycleTransition(
-			LifecycleTransitionRequestKind.Open,
-			initialProgress ?? 1,
-		);
-	}, []);
-}

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

@@ -1,67 +0,0 @@
-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,
-} from "../../../stores/system.store";
-import { animateToProgress } from "../../../utils/animation/animate-to-progress";
-
-export const useTransitionStartController = ({
-	current,
-	animations,
-	system,
-}: {
-	current: BaseDescriptor;
-	animations: AnimationStoreMap;
-	system: SystemStoreMap;
-}) => {
-	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(
-		() => {
-			"worklet";
-			return [
-				pendingLifecycleRequestKind.get(),
-				pendingLifecycleRequestTarget.get(),
-				pendingLifecycleStartBlockCount.get(),
-			] as const;
-		},
-		(next) => {
-			"worklet";
-			const [kind, target, blockCount] = next;
-
-			if (kind === LifecycleTransitionRequestKind.None) {
-				return;
-			}
-
-			if (blockCount > 0) {
-				return;
-			}
-
-			animateToProgress({
-				target,
-				spec: transitionSpec,
-				emitWillAnimate:
-					kind !== LifecycleTransitionRequestKind.Open ||
-					!animations.entering.get(),
-				animations,
-				targetProgress,
-				animationProgress,
-				isDragging,
-			});
-
-			clearLifecycleTransitionRequest();
-		},
-	);
-};