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

package/src/components/screen/container/hooks/use-backdrop-pointer-events.ts

@@ -1,51 +0,0 @@
-import { useState } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { useBuilderStore } from "../../../../providers/screen/builder";
-import { useMotionStore } from "../../../../providers/screen/motion";
-import type { BackdropBehavior } from "../../../../types/screen.types";
-
-interface BackdropPointerEventsResult {
-	pointerEvents: "box-none" | undefined;
-	backdropBehavior: BackdropBehavior;
-	isBackdropActive: boolean;
-}
-
-/**
- * Returns pointer events and backdrop behavior based on screen options.
- *
- * - Runtime interpolator `backdropBehavior` takes precedence
- * - Explicit descriptor `backdropBehavior` option is next
- * - Otherwise defaults to 'block' (undefined = normal touch handling)
- */
-export function useBackdropPointerEvents(): BackdropPointerEventsResult {
-	const screenOptions = useMotionStore((store) => store.options);
-	const descriptorBackdropBehavior = useBuilderStore(
-		(store) => store.options.backdropBehavior,
-	);
-	const [runtimeBackdropBehavior, setRuntimeBackdropBehavior] = useState<
-		BackdropBehavior | undefined
-	>(undefined);
-
-	useAnimatedReaction(
-		() => screenOptions.get().backdropBehavior,
-		(next, previous) => {
-			"worklet";
-			if (next !== previous) {
-				scheduleOnRN(setRuntimeBackdropBehavior, next);
-			}
-		},
-		[screenOptions],
-	);
-
-	const backdropBehavior: BackdropBehavior =
-		runtimeBackdropBehavior ?? descriptorBackdropBehavior ?? "block";
-
-	const pointerEvents =
-		backdropBehavior === "passthrough" ? "box-none" : undefined;
-
-	const isBackdropActive =
-		backdropBehavior === "dismiss" || backdropBehavior === "collapse";
-
-	return { pointerEvents, backdropBehavior, isBackdropActive };
-}

package/src/components/screen/container/hooks/use-content-layout.ts

@@ -1,84 +0,0 @@
-import { useCallback } from "react";
-import { type LayoutChangeEvent, useWindowDimensions } from "react-native";
-import { scheduleOnUI } from "react-native-worklets";
-import { useOptionalBuilderStore } from "../../../../providers/screen/builder";
-import { useOptionalMotionStore } from "../../../../providers/screen/motion";
-import { LifecycleTransitionRequestKind } from "../../../../providers/screen/motion/hooks/use-transition-values";
-
-/** "content" identifies the full content wrapper and is reserved internally. */
-export function useContentLayout(styleId: string | undefined) {
-	const isContent = styleId === "content";
-	const builder = useOptionalBuilderStore((store) =>
-		isContent ||
-		(styleId !== undefined && store?.options.snapPoints?.includes(styleId))
-			? store
-			: null,
-	);
-	const { height: screenHeight } = useWindowDimensions();
-	const animations = useOptionalMotionStore((store) =>
-		builder ? store?.state : undefined,
-	);
-	const isFirstKey = builder?.derivations.isFirstKey;
-	const experimental_animateOnInitialMount =
-		builder?.options.experimental_animateOnInitialMount;
-	const snapPoint = isContent ? "auto" : styleId;
-	const measureSnap =
-		snapPoint !== undefined && builder?.options.snapPoints?.includes(snapPoint);
-
-	const handleLayout = useCallback(
-		(event: LayoutChangeEvent) => {
-			if (!animations) return;
-			const { targetProgress, resolvedAutoSnapPoint, measuredContentLayout } =
-				animations;
-			const { requestLifecycleTransition } = animations.actions;
-			const { width, height } = event.nativeEvent.layout;
-			if (width <= 0 || height <= 0) return;
-
-			const fraction = Math.min(height / screenHeight, 1);
-
-			scheduleOnUI(
-				(nextWidth: number, nextHeight: number, nextFraction: number) => {
-					"worklet";
-					if (isContent) {
-						measuredContentLayout.set({ width: nextWidth, height: nextHeight });
-					}
-					if (!measureSnap) return;
-
-					const isFirstMeasurement = resolvedAutoSnapPoint.get() <= 0;
-					resolvedAutoSnapPoint.set(nextFraction);
-
-					if (
-						!isFirstMeasurement ||
-						animations.transitionProgress.get() !== 0 ||
-						animations.progressAnimating.get() !== 0
-					) {
-						return;
-					}
-
-					if (isFirstKey && !experimental_animateOnInitialMount) {
-						targetProgress.set(nextFraction);
-						animations.transitionProgress.set(nextFraction);
-						return;
-					}
-
-					requestLifecycleTransition(
-						LifecycleTransitionRequestKind.Open,
-						nextFraction,
-					);
-				},
-				width,
-				height,
-				fraction,
-			);
-		},
-		[
-			animations,
-			isContent,
-			measureSnap,
-			isFirstKey,
-			screenHeight,
-			experimental_animateOnInitialMount,
-		],
-	);
-	return isContent || measureSnap ? handleLayout : undefined;
-}

package/src/components/screen/container/index.tsx

@@ -1,39 +0,0 @@
-import { memo } from "react";
-import { StyleSheet, View } from "react-native";
-import { useBackdropPointerEvents } from "./hooks/use-backdrop-pointer-events";
-import { BackdropLayer } from "./layers/backdrop";
-import { ContentLayer } from "./layers/content";
-
-export type ScreenContainerProps = {
-	children: React.ReactNode;
-	onDismissRequest?: () => void;
-};
-
-export const ScreenContainer = memo(
-	({ children, onDismissRequest }: ScreenContainerProps) => {
-		const { pointerEvents, isBackdropActive, backdropBehavior } =
-			useBackdropPointerEvents();
-
-		return (
-			<View style={styles.container} pointerEvents={pointerEvents}>
-				<BackdropLayer
-					onDismissRequest={onDismissRequest}
-					isBackdropActive={isBackdropActive}
-					backdropBehavior={backdropBehavior}
-				/>
-				<ContentLayer
-					pointerEvents={pointerEvents}
-					isBackdropActive={isBackdropActive}
-				>
-					{children}
-				</ContentLayer>
-			</View>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-});

package/src/components/screen/container/layers/backdrop.tsx

@@ -1,163 +0,0 @@
-import { type ComponentType, memo, useCallback, useMemo } from "react";
-import { Pressable, StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
-import { DefaultSnapSpec } from "../../../../configs/specs";
-import { useBuilderStore } from "../../../../providers/screen/builder";
-import { useMotionStore } from "../../../../providers/screen/motion";
-import {
-	useSlotProps,
-	useSlotStyles,
-} from "../../../../providers/screen/orchestrator/styles";
-import type {
-	BackdropBehavior,
-	ScreenBackdropComponentProps,
-} from "../../../../types/screen.types";
-import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
-import { findCollapseTarget } from "../helpers/find-collapse-target";
-import { usesLayerRenderProps } from "./render-component";
-
-export const BackdropLayer = memo(function BackdropLayer({
-	backdropBehavior,
-	isBackdropActive,
-	onDismissRequest,
-}: {
-	backdropBehavior: BackdropBehavior;
-	isBackdropActive: boolean;
-	onDismissRequest?: () => void;
-}) {
-	const BackdropComponent = useBuilderStore(
-		(store) => store.options.backdropComponent,
-	);
-	const rawSnapPoints = useBuilderStore((store) => store.options.snapPoints);
-	const isGestureDismissEnabled = useBuilderStore(
-		(store) => store.options.gestureEnabled !== false,
-	);
-	const canDismiss = isGestureDismissEnabled;
-	const transitionSpec = useBuilderStore(
-		(store) => store.options.transitionSpec,
-	);
-	const animations = useMotionStore((store) => store.state);
-	const { targetProgress, animationProgress, resolvedAutoSnapPoint } =
-		animations;
-
-	const AnimatedBackdropComponent = useMemo(
-		() =>
-			BackdropComponent && !usesLayerRenderProps(BackdropComponent)
-				? Animated.createAnimatedComponent(
-						BackdropComponent as ComponentType<any>,
-					)
-				: null,
-		[BackdropComponent],
-	);
-
-	const handleBackdropPress = useCallback(() => {
-		if (backdropBehavior === "dismiss") {
-			onDismissRequest?.();
-			return;
-		}
-
-		if (backdropBehavior === "collapse") {
-			// No snap points → fallback to dismiss
-			if (!rawSnapPoints || rawSnapPoints.length === 0) {
-				onDismissRequest?.();
-				return;
-			}
-
-			const gestures = animations;
-
-			scheduleOnUI(() => {
-				"worklet";
-				const resolvedSnaps: number[] = [];
-
-				for (let i = 0; i < rawSnapPoints.length; i++) {
-					const point = rawSnapPoints[i];
-					const resolvedPoint =
-						typeof point === "string" ? resolvedAutoSnapPoint.get() : point;
-
-					if (typeof resolvedPoint === "number") {
-						resolvedSnaps.push(resolvedPoint);
-					}
-				}
-
-				const { target, shouldDismiss } = findCollapseTarget(
-					animations.transitionProgress.get(),
-					resolvedSnaps,
-					canDismiss,
-				);
-
-				// If already dismissing, skip
-				if (gestures.dismissing.get()) return;
-
-				gestures.dismissing.set(shouldDismiss ? 1 : 0);
-
-				const spec = shouldDismiss
-					? transitionSpec
-					: {
-							open: transitionSpec?.expand ?? DefaultSnapSpec,
-							close: transitionSpec?.collapse ?? DefaultSnapSpec,
-						};
-
-				animateToProgress({
-					target,
-					markEntering: false,
-					spec,
-					animations,
-					targetProgress,
-					animationProgress,
-				});
-
-				if (shouldDismiss) {
-					if (onDismissRequest) scheduleOnRN(onDismissRequest);
-				}
-			});
-		}
-	}, [
-		animations,
-		targetProgress,
-		animationProgress,
-		resolvedAutoSnapPoint,
-		backdropBehavior,
-		rawSnapPoints,
-		canDismiss,
-		transitionSpec,
-		onDismissRequest,
-	]);
-
-	const animatedBackdropStyle = useSlotStyles("backdrop");
-	const animatedBackdropProps = useSlotProps("backdrop");
-	const backdropPointerEvents = isBackdropActive ? "auto" : "none";
-	const backdropStyles = [
-		StyleSheet.absoluteFill,
-		animatedBackdropStyle,
-	] as ScreenBackdropComponentProps["styles"];
-	const backdropProps =
-		animatedBackdropProps as ScreenBackdropComponentProps["props"];
-
-	return (
-		<Pressable
-			style={StyleSheet.absoluteFill}
-			pointerEvents={backdropBehavior === "passthrough" ? "none" : "auto"}
-			onPress={isBackdropActive ? handleBackdropPress : undefined}
-		>
-			{AnimatedBackdropComponent ? (
-				<AnimatedBackdropComponent
-					style={backdropStyles}
-					animatedProps={animatedBackdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : BackdropComponent ? (
-				<BackdropComponent
-					styles={backdropStyles}
-					props={backdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : (
-				<Animated.View
-					style={backdropStyles}
-					pointerEvents={backdropPointerEvents}
-				/>
-			)}
-		</Pressable>
-	);
-});

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

@@ -1,113 +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 { useBuilderStore } from "../../../../providers/screen/builder";
-import { useMotionStore } from "../../../../providers/screen/motion";
-import {
-	useSlotProps,
-	useSlotStyles,
-} from "../../../../providers/screen/orchestrator/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 = useMotionStore((store) => store.gestures);
-		const ContentComponent = useBuilderStore(
-			(store) => store.options.contentComponent,
-		);
-		const isNavigationMaskEnabled = useBuilderStore(
-			(store) => !!store.options.navigationMaskEnabled,
-		);
-		const hasAutoSnapPoint = useBuilderStore(
-			(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("content");
-
-		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/orchestrator/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,68 +0,0 @@
-import { type ComponentType, memo, useMemo } from "react";
-import { StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import { useBuilderStore } from "../../../../providers/screen/builder";
-import {
-	useSlotProps,
-	useSlotStyles,
-} from "../../../../providers/screen/orchestrator/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 = useBuilderStore(
-		(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/blank-stack.tsx

@@ -1,18 +0,0 @@
-import { useBuilderStore } from "../../../providers/screen/builder";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
-import { useCloseTransitionIntent } from "./hooks/use-close-transition-intent";
-import { useScreenLifecycle } from "./use-screen-lifecycle";
-
-export function BlankStackLifecycle() {
-	const current = useBuilderStore((store) => store.descriptors.current);
-	const handleOpenRoute = useBlankStackStore((store) => store.handleOpenRoute);
-
-	const { completeClose } = useCloseTransitionIntent(current);
-
-	useScreenLifecycle({
-		completeClose,
-		completeOpen: () => handleOpenRoute?.({ route: current.route }),
-	});
-
-	return null;
-}

package/src/components/screen/lifecycle/hooks/helpers/reset-stores-for-screen.ts

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