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

package/src/components/boundary/portal/components/boundary-content-portal/components/host.tsx

@@ -0,0 +1,56 @@
+import { memo, type ReactNode } from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
+import { createBoundaryContentPortalHostName } from "../helpers/host-name";
+
+const AnimatedPortalHost = NativePortalHost
+	? Animated.createAnimatedComponent(NativePortalHost)
+	: null;
+
+type BoundaryContentPortalHostProps = {
+	boundaryId: string;
+	children: ReactNode;
+	enabled: boolean;
+	screenKey: string;
+};
+
+export const BoundaryContentPortalHost = memo(
+	function BoundaryContentPortalHost({
+		boundaryId,
+		children,
+		enabled,
+		screenKey,
+	}: BoundaryContentPortalHostProps) {
+		if (!enabled || !AnimatedPortalHost) {
+			return <>{children}</>;
+		}
+
+		const portalHostName = createBoundaryContentPortalHostName(
+			screenKey,
+			boundaryId,
+		);
+
+		return (
+			<>
+				{children}
+				<AnimatedPortalHost
+					name={portalHostName}
+					pointerEvents={PORTAL_POINTER_EVENTS}
+					style={styles.host}
+				/>
+			</>
+		);
+	},
+);
+
+const styles = StyleSheet.create({
+	host: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		overflow: "visible",
+	},
+});

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

@@ -0,0 +1,318 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+import {
+	useAnimatedProps,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
+import { AnimationStore } from "../../../../../../stores/animation.store";
+import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
+import {
+	canSwitchHandoffHostImmediately,
+	isHandoffHostClosingComplete,
+	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 { createBoundaryContentPortalHostName } from "../helpers/host-name";
+
+interface UseBoundaryContentPortalAttachmentParams {
+	boundaryId: string;
+	enabled: boolean;
+}
+
+export const useBoundaryContentPortalAttachment = ({
+	boundaryId,
+	enabled,
+}: UseBoundaryContentPortalAttachmentParams) => {
+	const ownScreenSlots = useScreenSlots();
+	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const currentScreenKey = useDescriptorsStore(
+		(s) => s.derivations.currentScreenKey,
+	);
+	const [ownership, setOwnership] = useState<Extract<
+		PortalOwnershipSignal,
+		{ status: "complete" }
+	> | null>(null);
+
+	const styleOwnerScreenKey = ownership?.ownerScreenKey ?? currentScreenKey;
+	const ownerScreenSlots = useRegisteredScreenSlots(styleOwnerScreenKey);
+	const activeScreenSlots = ownerScreenSlots ?? ownScreenSlots;
+	const {
+		nextInterpolatorReady: activeNextInterpolatorReady,
+		slotsMap: activeSlotsMap,
+	} = activeScreenSlots;
+	const requestedPortalHostName = useSharedValue<string | null>(null);
+	const visiblePortalHostName = useSharedValue<string | null>(null);
+	const canSwitchPortalHostImmediately = useSharedValue(0);
+
+	const targetScreenKey = ownership ? ownership.hostScreenKey : null;
+	const settledHostScreenKey = ownership?.hostScreenKey ?? null;
+	const settledHostProgress = AnimationStore.getValue(
+		settledHostScreenKey ?? currentScreenKey,
+		"progressSettled",
+	);
+	const settledHostAnimating = AnimationStore.getValue(
+		settledHostScreenKey ?? currentScreenKey,
+		"progressAnimating",
+	);
+	const settledHostWillAnimate = AnimationStore.getValue(
+		settledHostScreenKey ?? currentScreenKey,
+		"willAnimate",
+	);
+	const settledHostClosing = AnimationStore.getValue(
+		settledHostScreenKey ?? currentScreenKey,
+		"closing",
+	);
+	const handoffHostName =
+		targetScreenKey !== null
+			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
+			: 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));
+		},
+		[],
+	);
+
+	useLayoutEffect(() => {
+		if (!enabled || !ownership || !handoffHostName) {
+			requestedPortalHostName.set(null);
+			visiblePortalHostName.set(null);
+			return;
+		}
+
+		requestedPortalHostName.set(handoffHostName);
+	}, [
+		enabled,
+		handoffHostName,
+		ownership,
+		requestedPortalHostName,
+		visiblePortalHostName,
+	]);
+
+	useLayoutEffect(() => {
+		return () => {
+			requestedPortalHostName.set(null);
+			visiblePortalHostName.set(null);
+		};
+	}, [requestedPortalHostName, visiblePortalHostName]);
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled) {
+				return {
+					hostScreenKey: null,
+					ownerPairKey: sourcePairKey,
+					ownerScreenKey: null,
+					status: "clear",
+				};
+			}
+
+			const progressAnimating = settledHostAnimating.get();
+			const progressSettled = settledHostProgress.get();
+			const willAnimate = settledHostWillAnimate.get();
+			const closing = settledHostClosing.get();
+			const isOwnedHostClosing =
+				!!closing &&
+				!!ownership &&
+				settledHostScreenKey === ownership.hostScreenKey;
+
+			if (isOwnedHostClosing && ownership) {
+				const isClosingComplete = isHandoffHostClosingComplete({
+					closing,
+					progressAnimating,
+					progressSettled,
+					willAnimate,
+				});
+
+				if (!isClosingComplete) {
+					return ownership;
+				}
+
+				const sourceScreenKey = getSourceScreenKeyFromPairKey(
+					ownership.ownerPairKey,
+				);
+
+				return {
+					hostScreenKey: sourceScreenKey,
+					ownerPairKey: ownership.ownerPairKey,
+					ownerScreenKey: sourceScreenKey,
+					status: "complete",
+				};
+			}
+
+			if (!sourcePairKey) {
+				return {
+					hostScreenKey: null,
+					ownerPairKey: sourcePairKey,
+					ownerScreenKey: null,
+					status: "clear",
+				};
+			}
+
+			return resolveBoundaryPortalOwnership({
+				boundaryId,
+				currentScreenKey,
+				handoff: true,
+				isSettledHostClosingComplete: isHandoffHostClosingComplete({
+					closing,
+					progressAnimating,
+					progressSettled,
+					willAnimate,
+				}),
+				isSettledHostReady: progressSettled === 1 && progressAnimating === 0,
+				pairsState: pairs.get(),
+				settledHostScreenKey,
+				sourcePairKey,
+			});
+		},
+		(signal, previousSignal) => {
+			"worklet";
+			if (shallowEqual(previousSignal, signal)) {
+				return;
+			}
+
+			if (signal.status === "pending") {
+				canSwitchPortalHostImmediately.set(0);
+				return;
+			}
+
+			const hostScreenKey =
+				signal.status === "complete" ? signal.hostScreenKey : null;
+			let previousOwnerPairKey: string | undefined;
+
+			if (previousSignal?.status === "complete") {
+				previousOwnerPairKey = previousSignal.ownerPairKey ?? undefined;
+			}
+
+			const canSwitchImmediately = canSwitchHandoffHostImmediately({
+				hostScreenKey,
+				ownerPairKey:
+					signal.status === "complete" ? signal.ownerPairKey : undefined,
+				previousOwnerPairKey,
+			});
+
+			canSwitchPortalHostImmediately.set(canSwitchImmediately ? 1 : 0);
+
+			if (canSwitchImmediately && hostScreenKey) {
+				const hostName = createBoundaryContentPortalHostName(
+					hostScreenKey,
+					boundaryId,
+				);
+				requestedPortalHostName.set(hostName);
+				visiblePortalHostName.set(hostName);
+			}
+
+			scheduleOnRN(
+				updatePortalOwnership,
+				signal.hostScreenKey,
+				signal.ownerPairKey,
+				signal.ownerScreenKey ?? undefined,
+			);
+		},
+	);
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			const slot = activeSlotsMap.get()[boundaryId];
+			const teleport = slot?.props?.teleport;
+			const shouldTeleport = shouldAttachBoundaryPortal({
+				enabled,
+				teleport,
+			});
+			const requestedName = requestedPortalHostName.get();
+			const visibleName = visiblePortalHostName.get();
+			const isInterpolatorReady = activeNextInterpolatorReady.get();
+			const nextVisibleName = resolveNextVisiblePortalHostName({
+				canSwitchImmediately: canSwitchPortalHostImmediately.get() === 1,
+				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);
+			}
+		},
+	);
+
+	const teleportProps = useAnimatedProps(() => {
+		"worklet";
+
+		const slot = activeSlotsMap.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/components/boundary/portal/components/boundary-portal/components/portal-slot.tsx

@@ -0,0 +1,80 @@
+import {
+	type ComponentProps,
+	type ComponentType,
+	memo,
+	type ReactNode,
+} from "react";
+import type { View } from "react-native";
+import Animated, { type AnimatedRef } from "react-native-reanimated";
+import { scheduleOnUI } from "react-native-worklets";
+import { logger } from "../../../../../../utils/logger";
+import {
+	isTeleportAvailable,
+	PORTAL_POINTER_EVENTS,
+	NativePortal as TeleportPortal,
+} from "../../../teleport";
+import { usePlaceholderStyles } from "../hooks/use-placeholder-styles";
+
+type NullableHostNamePortalProps = Omit<
+	ComponentProps<NonNullable<typeof TeleportPortal>>,
+	"hostName"
+> & {
+	hostName?: string | null;
+};
+
+const AnimatedNativePortal = TeleportPortal
+	? Animated.createAnimatedComponent(
+			TeleportPortal as ComponentType<NullableHostNamePortalProps>,
+		)
+	: null;
+
+type BoundaryPortalSlotProps = {
+	id: string;
+	children: ReactNode;
+	enabled: boolean;
+	animatedProps: any;
+	placeholderRef?: AnimatedRef<View>;
+};
+
+export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
+	id,
+	children,
+	enabled,
+	animatedProps,
+	placeholderRef,
+}: BoundaryPortalSlotProps) {
+	const isPortalEnabled = enabled && isTeleportAvailable;
+
+	if (__DEV__ && enabled && !id) {
+		logger.warnOnce(
+			"portal:missing-id",
+			"A boundary portal was rendered without an id; rendering inline.",
+		);
+	}
+
+	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
+
+	if (isPortalEnabled && AnimatedNativePortal) {
+		return (
+			<Animated.View
+				ref={placeholderRef}
+				onLayout={({ nativeEvent: { layout } }) =>
+					scheduleOnUI(handleOnLayout, layout)
+				}
+				style={placeholderStyle}
+				pointerEvents={PORTAL_POINTER_EVENTS}
+				collapsable={false}
+			>
+				<AnimatedNativePortal
+					animatedProps={animatedProps}
+					name={id}
+					pointerEvents={PORTAL_POINTER_EVENTS}
+				>
+					{children}
+				</AnimatedNativePortal>
+			</Animated.View>
+		);
+	}
+
+	return children;
+});

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

@@ -0,0 +1,255 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import {
+	useAnimatedProps,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+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;
+			}
+
+			scheduleOnRN(
+				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) {
+				scheduleOnRN(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,
+	};
+};