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

package/src/shared/components/boundary/portal/components/boundary-portal/hooks/use-boundary-portal-attachment.ts

@@ -1,254 +0,0 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import {
-	runOnJS,
-	useAnimatedProps,
-	useAnimatedReaction,
-	useSharedValue,
-} from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { pairs } from "../../../../../../stores/bounds/internals/state";
-import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import {
-	type PortalOwnershipSignal,
-	resolveBoundaryPortalOwnership,
-} from "../../../utils/ownership";
-import { shallowEqual } from "../../../utils/shallow-equal";
-import { shouldAttachBoundaryPortal } from "../../../utils/teleport-control";
-import { resolveNextVisiblePortalHostName } from "../../../utils/visible-host";
-import { createBoundaryPortalHostName } from "../helpers/host-name";
-import { useActiveHostKey } from "../stores/host-registry.store";
-import {
-	dropStalePortalBoundaryHosts,
-	mountPortalBoundaryHost,
-	unmountPortalBoundaryHostByName,
-} from "../stores/portal-boundary-host.store";
-
-interface UseBoundaryPortalAttachmentParams {
-	boundaryId: string;
-	enabled: boolean;
-}
-
-export const useBoundaryPortalAttachment = ({
-	boundaryId,
-	enabled,
-}: UseBoundaryPortalAttachmentParams) => {
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
-	const currentScreenKey = useDescriptorsStore(
-		(s) => s.derivations.currentScreenKey,
-	);
-	const { localStylesMaps, nextInterpolatorReady, slotsMap } = useScreenSlots();
-	const [ownership, setOwnership] = useState<Extract<
-		PortalOwnershipSignal,
-		{ status: "complete" }
-	> | null>(null);
-	const requestedPortalHostName = useSharedValue<string | null>(null);
-	const visiblePortalHostName = useSharedValue<string | null>(null);
-	const mountedPortalBoundaryHostNamesRef = useRef(new Set<string>());
-	const escapeHostKey = useActiveHostKey(enabled ? currentScreenKey : null);
-
-	const updatePortalOwnership = useCallback(
-		(
-			hostScreenKey: string | null,
-			ownerPairKey?: string,
-			ownerScreenKey?: string,
-		) => {
-			if (hostScreenKey && ownerPairKey && ownerScreenKey) {
-				setOwnership((current) => {
-					if (
-						current?.hostScreenKey === hostScreenKey &&
-						current.ownerPairKey === ownerPairKey &&
-						current.ownerScreenKey === ownerScreenKey
-					) {
-						return current;
-					}
-
-					return {
-						hostScreenKey,
-						ownerPairKey,
-						ownerScreenKey,
-						status: "complete",
-					};
-				});
-				return;
-			}
-
-			setOwnership((current) => (current ? null : current));
-		},
-		[],
-	);
-
-	const unmountOwnedPortalBoundaryHosts = useCallback(() => {
-		for (const portalHostName of mountedPortalBoundaryHostNamesRef.current) {
-			unmountPortalBoundaryHostByName(portalHostName);
-		}
-
-		mountedPortalBoundaryHostNamesRef.current.clear();
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!enabled || !ownership || !escapeHostKey) {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			unmountOwnedPortalBoundaryHosts();
-			return;
-		}
-
-		const portalHostName = createBoundaryPortalHostName(
-			escapeHostKey,
-			boundaryId,
-			ownership.ownerPairKey,
-		);
-
-		mountPortalBoundaryHost({
-			boundaryId,
-			escapeClipping: true,
-			hostKey: escapeHostKey,
-			localStylesMaps,
-			pairKey: ownership.ownerPairKey,
-			portalHostName,
-			screenKey: currentScreenKey,
-			slotsMap,
-		});
-		mountedPortalBoundaryHostNamesRef.current.add(portalHostName);
-
-		// Request the new receiver immediately, but keep the currently visible
-		// receiver until the new interpolator is ready. This avoids a no-host gap
-		// during rapid close/open retargets.
-		requestedPortalHostName.set(portalHostName);
-	}, [
-		boundaryId,
-		currentScreenKey,
-		enabled,
-		escapeHostKey,
-		localStylesMaps,
-		ownership,
-		requestedPortalHostName,
-		slotsMap,
-		unmountOwnedPortalBoundaryHosts,
-		visiblePortalHostName,
-	]);
-
-	useLayoutEffect(() => {
-		return () => {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			unmountOwnedPortalBoundaryHosts();
-		};
-	}, [
-		requestedPortalHostName,
-		unmountOwnedPortalBoundaryHosts,
-		visiblePortalHostName,
-	]);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!enabled || !sourcePairKey) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			return resolveBoundaryPortalOwnership({
-				boundaryId,
-				currentScreenKey,
-				handoff: false,
-				pairsState: pairs.get(),
-				sourcePairKey,
-			});
-		},
-		(signal, previousSignal) => {
-			"worklet";
-			if (shallowEqual(previousSignal, signal)) {
-				return;
-			}
-
-			runOnJS(updatePortalOwnership)(
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const slot = slotsMap.get()[boundaryId];
-			const teleport = slot?.props?.teleport;
-			const shouldTeleport = shouldAttachBoundaryPortal({
-				enabled,
-				teleport,
-			});
-			const requestedName = requestedPortalHostName.get();
-			const visibleName = visiblePortalHostName.get();
-			const isInterpolatorReady = nextInterpolatorReady.get();
-			const nextVisibleName = resolveNextVisiblePortalHostName({
-				isInterpolatorReady: isInterpolatorReady === 1,
-				requestedName,
-				shouldTeleport,
-				visibleName,
-			});
-
-			return {
-				isInterpolatorReady,
-				nextVisibleName,
-				requestedName,
-				shouldTeleport,
-				teleport,
-				visibleName,
-			};
-		},
-		(state, previousState) => {
-			"worklet";
-			if (shallowEqual(previousState, state)) {
-				return;
-			}
-
-			if (state.nextVisibleName !== state.visibleName) {
-				visiblePortalHostName.set(state.nextVisibleName);
-				return;
-			}
-
-			if (state.visibleName && state.visibleName === state.requestedName) {
-				runOnJS(dropStalePortalBoundaryHosts)({
-					boundaryId,
-					keepPortalHostName: state.visibleName,
-				});
-			}
-		},
-	);
-
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
-
-		const slot = slotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			teleport,
-			...slotProps
-		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
-
-		return {
-			...slotProps,
-			hostName:
-				shouldTeleport && visibleName
-					? visibleName
-					: PORTAL_HOST_NAME_RESET_VALUE,
-		};
-	});
-
-	return {
-		teleportProps,
-		visiblePortalHostName,
-	};
-};

package/src/shared/components/boundary/portal/components/boundary-portal/hooks/use-host-measurement.ts

@@ -1,153 +0,0 @@
-import { useLayoutEffect, useState } from "react";
-import type { View } from "react-native";
-import {
-	cancelAnimation,
-	measure,
-	runOnJS,
-	runOnUI,
-	type SharedValue,
-	useAnimatedReaction,
-	useAnimatedRef,
-	useSharedValue,
-	withDelay,
-	withTiming,
-} from "react-native-reanimated";
-import { useOriginContext } from "../../../../../../providers/screen/origin.provider";
-import { ScrollStore } from "../../../../../../stores/scroll.store";
-import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-block-offset";
-import {
-	adjustedMeasuredBoundsForOverscrollDeltas,
-	isMeasurementInViewport,
-	normalizeMeasuredBoundsWithVisibilityGate,
-} from "../../../../utils/measured-bounds";
-import {
-	clearPortalHostBounds,
-	setPortalHostBounds,
-} from "../stores/host-bounds.store";
-
-const HOST_MEASUREMENT_RETRY_DELAY_MS = 16;
-
-type UseHostMeasurementParams = {
-	capturesScroll: boolean;
-	enabled: boolean;
-	hostKey: string;
-	screenKey: string;
-	visibilityBlocked: SharedValue<boolean>;
-	viewportHeight: number;
-	viewportWidth: number;
-};
-
-export const useHostMeasurement = ({
-	capturesScroll,
-	enabled,
-	hostKey,
-	screenKey,
-	visibilityBlocked,
-	viewportHeight,
-	viewportWidth,
-}: UseHostMeasurementParams) => {
-	const hostRef = useAnimatedRef<View>();
-	const scrollMetadata = ScrollStore.getValue(screenKey, "metadata");
-	const [canRenderHosts, setCanRenderHosts] = useState<boolean>(false);
-	const { originRef } = useOriginContext();
-	const hasMeasuredHost = useSharedValue(false);
-	const retryToken = useSharedValue(0);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!enabled) {
-				return null;
-			}
-
-			return [hasMeasuredHost.get(), retryToken.get()] as const;
-		},
-		(state) => {
-			"worklet";
-			if (!state) {
-				cancelAnimation(retryToken);
-				return;
-			}
-
-			const [hasAlreadyMeasured] = state;
-
-			if (!enabled || hasAlreadyMeasured) {
-				return;
-			}
-
-			const measured = measure(hostRef);
-			const measuredOrigin = measure(originRef);
-
-			if (!measured || !measuredOrigin) {
-				cancelAnimation(retryToken);
-				retryToken.set(
-					withDelay(
-						HOST_MEASUREMENT_RETRY_DELAY_MS,
-						withTiming(retryToken.get() + 1, { duration: 0 }),
-					),
-				);
-				return;
-			}
-
-			cancelAnimation(retryToken);
-			hasMeasuredHost.set(true);
-
-			// A measurement taken mid rubber-band would bake the transient
-			// overscroll displacement into the host frame. Store the at-rest
-			// position instead; clamped scroll deltas share that basis.
-			const currentScroll = scrollMetadata.get();
-			const overscrollNormalized = capturesScroll
-				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
-				: measured;
-
-			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
-				measured: overscrollNormalized,
-				origin: measuredOrigin,
-				visibilityBlocked: visibilityBlocked.get(),
-				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
-				viewportWidth,
-				viewportHeight,
-			});
-
-			if (
-				!isMeasurementInViewport(
-					normalizedMeasured,
-					viewportWidth,
-					viewportHeight,
-				)
-			) {
-				cancelAnimation(retryToken);
-				retryToken.set(
-					withDelay(
-						HOST_MEASUREMENT_RETRY_DELAY_MS,
-						withTiming(retryToken.get() + 1, { duration: 0 }),
-					),
-				);
-				return;
-			}
-
-			setPortalHostBounds(hostKey, {
-				x: normalizedMeasured.x,
-				y: normalizedMeasured.y,
-				width: normalizedMeasured.width,
-				height: normalizedMeasured.height,
-				pageX: normalizedMeasured.pageX,
-				pageY: normalizedMeasured.pageY,
-				scroll: capturesScroll ? currentScroll : null,
-			});
-
-			runOnJS(setCanRenderHosts)(true);
-		},
-	);
-
-	useLayoutEffect(() => {
-		return () => {
-			runOnUI(clearPortalHostBounds)(hostKey);
-		};
-	}, [hostKey]);
-
-	return {
-		canRenderHosts,
-		hostRef,
-	};
-};

package/src/shared/components/create-transition-aware-component.tsx

@@ -1,172 +0,0 @@
-/** biome-ignore-all lint/style/noNonNullAssertion: <This helper is usually being used inside a transitionable stack> */
-import type React from "react";
-import { type ComponentType, forwardRef, memo } from "react";
-import type { View } from "react-native";
-import { GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-	runOnUI,
-	useAnimatedRef,
-	useComposedEventHandler,
-} from "react-native-reanimated";
-import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
-import {
-	ScrollMetadataOwnerProvider,
-	useScrollGestureCoordination,
-} from "../providers/screen/gestures/scroll-coordination";
-import { useSlotProps, useSlotStyles } from "../providers/screen/styles";
-import type { TransitionAwareProps } from "../types/screen.types";
-
-interface CreateTransitionAwareComponentOptions {
-	isScrollable?: boolean;
-	alreadyAnimated?: boolean;
-}
-
-export function createTransitionAwareComponent<P extends object>(
-	Wrapped: ComponentType<P>,
-	options: CreateTransitionAwareComponentOptions = {},
-) {
-	const { isScrollable = false, alreadyAnimated = false } = options;
-
-	const AnimatedComponent = alreadyAnimated
-		? Wrapped
-		: Animated.createAnimatedComponent(Wrapped);
-
-	const ScrollableInner = forwardRef<
-		React.ComponentRef<typeof Wrapped>,
-		TransitionAwareProps<P>
-	>((props: any, ref) => {
-		const {
-			remeasureOnFocus: _remeasureOnFocus,
-			onScroll: userOnScroll,
-			onMomentumScrollEnd: userOnMomentumScrollEnd,
-			onScrollEndDrag: userOnScrollEndDrag,
-			children,
-			contentContainerStyle,
-			...scrollableProps
-		} = props;
-
-		// Determine scroll direction from the horizontal prop (standard ScrollView API)
-		const scrollDirection = scrollableProps.horizontal
-			? "horizontal"
-			: "vertical";
-
-		// Get scroll handlers and the gesture owner's nativeGesture for this axis
-		const {
-			scrollHandler,
-			scrollEventsEnabled,
-			onContentSizeChange,
-			onLayout,
-			nativeGesture,
-			metadataOwnerProviderValue,
-		} = useScrollGestureCoordination({
-			onContentSizeChange: scrollableProps.onContentSizeChange,
-			onLayout: scrollableProps.onLayout,
-			direction: scrollDirection,
-		});
-
-		const composedScrollHandler = useComposedEventHandler([
-			scrollHandler,
-			userOnScroll ?? null,
-		]);
-		const scrollableComponent = (
-			<AnimatedComponent
-				{...(scrollableProps as any)}
-				ref={ref}
-				contentContainerStyle={contentContainerStyle}
-				/**
-				 * Keep the scroll listener detached while the owning gesture screen is
-				 * closing. On iOS, a bounced ScrollView can keep sending native scroll
-				 * events after the transition gesture activates, which competes with
-				 * close animation work on the UI thread.
-				 */
-				onScroll={scrollEventsEnabled ? composedScrollHandler : undefined}
-				onMomentumScrollEnd={userOnMomentumScrollEnd}
-				onScrollEndDrag={userOnScrollEndDrag}
-				onContentSizeChange={onContentSizeChange}
-				onLayout={onLayout}
-				scrollEventThrottle={
-					scrollEventsEnabled
-						? scrollableProps.scrollEventThrottle || 16
-						: undefined
-				}
-			>
-				{children}
-			</AnimatedComponent>
-		);
-
-		const coordinatedScrollableComponent = nativeGesture ? (
-			<GestureDetector gesture={nativeGesture}>
-				{scrollableComponent}
-			</GestureDetector>
-		) : (
-			scrollableComponent
-		);
-
-		return (
-			<ScrollMetadataOwnerProvider value={metadataOwnerProviderValue}>
-				{coordinatedScrollableComponent}
-			</ScrollMetadataOwnerProvider>
-		);
-	});
-
-	const Inner = forwardRef<
-		React.ComponentRef<typeof AnimatedComponent>,
-		TransitionAwareProps<P>
-	>((props, _) => {
-		const {
-			children,
-			style,
-			sharedBoundTag,
-			styleId,
-			onPress,
-			remeasureOnFocus,
-			animatedProps: userAnimatedProps,
-			...rest
-		} = props as any;
-
-		const animatedRef = useAnimatedRef<View>();
-		const associatedId = sharedBoundTag || styleId;
-		const associatedStyles = useSlotStyles(associatedId);
-		const associatedProps = useSlotProps(associatedId);
-
-		return (
-			<RegisterBoundsProvider
-				animatedRef={animatedRef}
-				style={style}
-				onPress={onPress}
-				sharedBoundTag={sharedBoundTag}
-				remeasureOnFocus={remeasureOnFocus}
-			>
-				{({ captureActiveOnPress, handleInitialLayout }) => (
-					<AnimatedComponent
-						{...(rest as any)}
-						ref={animatedRef}
-						style={[style, associatedStyles]}
-						animatedProps={userAnimatedProps ?? associatedProps}
-						onPress={captureActiveOnPress}
-						onLayout={runOnUI(handleInitialLayout)}
-						collapsable={!sharedBoundTag}
-					>
-						{children}
-					</AnimatedComponent>
-				)}
-			</RegisterBoundsProvider>
-		);
-	});
-
-	if (isScrollable) {
-		return memo(ScrollableInner) as React.MemoExoticComponent<
-			React.ForwardRefExoticComponent<
-				TransitionAwareProps<P> &
-					React.RefAttributes<React.ComponentRef<typeof Wrapped>>
-			>
-		>;
-	}
-
-	return memo(Inner) as React.MemoExoticComponent<
-		React.ForwardRefExoticComponent<
-			TransitionAwareProps<P> &
-				React.RefAttributes<React.ComponentRef<typeof Wrapped>>
-		>
-	>;
-}

package/src/shared/components/overlay/variations/overlay-host.tsx

@@ -1,74 +0,0 @@
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "@react-navigation/native";
-import { memo, useMemo } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import { useDerivedValue } from "react-native-reanimated";
-import type { StackScene } from "../../../hooks/navigation/use-stack";
-import { useScreenAnimation } from "../../../providers/screen/animation";
-import type { BaseDescriptor } from "../../../providers/screen/descriptors";
-import type {
-	OverlayProps,
-	OverlayScreenState,
-} from "../../../types/overlay.types";
-
-type OverlayHostProps = {
-	scene: StackScene;
-	overlayScreenState: OverlayScreenState<BaseDescriptor["navigation"]>;
-};
-
-export const OverlayHost = memo(function OverlayHost({
-	scene,
-	overlayScreenState,
-}: OverlayHostProps) {
-	const OverlayComponent = scene.descriptor.options.overlay;
-
-	const screenAnimation = useScreenAnimation();
-	const relativeProgress = useDerivedValue(() => {
-		"worklet";
-		return screenAnimation.get().stackProgress;
-	});
-
-	const overlayProps: OverlayProps<BaseDescriptor["navigation"]> = useMemo(
-		() => ({
-			...overlayScreenState,
-			progress: relativeProgress,
-		}),
-		[relativeProgress, overlayScreenState],
-	);
-
-	if (!OverlayComponent) {
-		return null;
-	}
-
-	return (
-		<Animated.View
-			pointerEvents="box-none"
-			style={[styles.container, styles.floating, StyleSheet.absoluteFill]}
-		>
-			<NavigationContext.Provider value={scene.descriptor.navigation as any}>
-				<NavigationRouteContext.Provider value={scene.route}>
-					<View
-						pointerEvents="box-none"
-						style={[StyleSheet.absoluteFill, styles.overlay]}
-					>
-						<OverlayComponent {...overlayProps} />
-					</View>
-				</NavigationRouteContext.Provider>
-			</NavigationContext.Provider>
-		</Animated.View>
-	);
-});
-
-const styles = StyleSheet.create({
-	overlay: {
-		zIndex: 1,
-	},
-	container: {
-		flex: 1,
-	},
-	floating: {
-		zIndex: 1000,
-	},
-});

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

@@ -1,55 +0,0 @@
-import { useState } from "react";
-import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenOptionsContext } from "../../../providers/screen/options";
-import { useStackCoreContext } from "../../../providers/stack/core.provider";
-import type { BackdropBehavior } from "../../../types/screen.types";
-import { StackType } from "../../../types/stack.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
- * - Component stacks default to 'passthrough' (box-none)
- * - Other stacks default to 'block' (undefined = normal touch handling)
- */
-export function useBackdropPointerEvents(): BackdropPointerEventsResult {
-	const { current } = useDescriptors();
-	const screenOptions = useScreenOptionsContext();
-	const { flags } = useStackCoreContext();
-	const [runtimeBackdropBehavior, setRuntimeBackdropBehavior] = useState<
-		BackdropBehavior | undefined
-	>(undefined);
-
-	useAnimatedReaction(
-		() => screenOptions.get().backdropBehavior,
-		(next, previous) => {
-			"worklet";
-			if (next !== previous) {
-				runOnJS(setRuntimeBackdropBehavior)(next);
-			}
-		},
-		[screenOptions],
-	);
-
-	const isComponentStack = flags.STACK_TYPE === StackType.COMPONENT;
-	const backdropBehavior: BackdropBehavior =
-		runtimeBackdropBehavior ??
-		current.options.backdropBehavior ??
-		(isComponentStack ? "passthrough" : "block");
-
-	const pointerEvents =
-		backdropBehavior === "passthrough" ? "box-none" : undefined;
-
-	const isBackdropActive =
-		backdropBehavior === "dismiss" || backdropBehavior === "collapse";
-
-	return { pointerEvents, backdropBehavior, isBackdropActive };
-}