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

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

@@ -1,252 +0,0 @@
-import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useBuilderStore } from "../../../../../../providers/screen/builder";
-import {
-	useMotionStore,
-	useOptionalMotionStore,
-} from "../../../../../../providers/screen/motion";
-import { hasCloseTransitionFinished } from "../../../../../../providers/screen/motion/helpers/transition-visual-state";
-import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
-import { useBlankStackStore } from "../../../../../../providers/stack/blank-stack.provider";
-import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
-import { getEntry } from "../../../../../../stores/bounds/internals/entries";
-import {
-	getPairKeyForDestination,
-	getPairKeyForSource,
-} from "../../../../../../stores/bounds/internals/links";
-import { pairs } from "../../../../../../stores/bounds/internals/state";
-import type {
-	LinkPairState,
-	TagLink,
-} from "../../../../../../stores/bounds/types";
-import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import {
-	resolveActiveHandoffReceiver,
-	resolveHandoffAttachmentCandidate,
-	resolvePreviousHandoffReceiver,
-	resolveRequestedHandoffPairKey,
-	resolveRequestedHandoffReceiver,
-} from "../helpers/active-handoff-receiver";
-import { canActivateHandoffReceiver } from "../helpers/handoff-visibility";
-import { createBoundaryContentPortalHostName } from "../helpers/host-name";
-
-interface UseBoundaryContentPortalAttachmentParams {
-	boundaryId: string;
-}
-
-const isCompleteActiveLink = (
-	pair: LinkPairState | null | undefined,
-	link: TagLink | undefined,
-	boundaryLinkKey: string,
-) => {
-	"worklet";
-
-	return (
-		link?.status === "complete" &&
-		(!link.group || pair?.groups[link.group]?.activeId === boundaryLinkKey)
-	);
-};
-
-export const useBoundaryContentPortalAttachment = ({
-	boundaryId,
-}: UseBoundaryContentPortalAttachmentParams) => {
-	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
-
-	const currentScreenKey = useBuilderStore(
-		(s) => s.derivations.currentScreenKey,
-	);
-	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
-	const sourcePairKey = useBuilderStore((s) => s.derivations.sourcePairKey);
-	const destinationPairKey = useBuilderStore(
-		(s) => s.derivations.destinationPairKey,
-	);
-	const destinationIsScreenReady = useOptionalMotionStore(
-		nextScreenKey ?? currentScreenKey,
-		(store) => store.isScreenReady,
-	);
-	const unavailableIsScreenReady = useSharedValue(false);
-	const screenReadiness = destinationIsScreenReady ?? unavailableIsScreenReady;
-
-	const activeReceiverScreenKey = useBlankStackStore(
-		resolveActiveHandoffReceiver,
-	);
-	const previousReceiverScreenKey = useBlankStackStore(
-		resolvePreviousHandoffReceiver,
-	);
-
-	const localAnimationProgress = useMotionStore(
-		(store) => store.state.animationProgress,
-	);
-	const receiverAnimationProgress = useOptionalMotionStore(
-		activeReceiverScreenKey ?? currentScreenKey,
-		(store) => store.state.animationProgress,
-	);
-	const activeReceiverAnimationProgress =
-		receiverAnimationProgress ?? localAnimationProgress;
-
-	const activeReceiverClosing = useOptionalMotionStore(
-		activeReceiverScreenKey ?? currentScreenKey,
-		(store) => store.state.closing,
-	);
-
-	const activeReceiverIsScreenReady = useOptionalMotionStore(
-		activeReceiverScreenKey ?? currentScreenKey,
-		(store) => store.isScreenReady,
-	);
-
-	const attachedReceiverScreenKey = useSharedValue(currentScreenKey);
-	const sourcePairBeforeClose = useSharedValue<string | null>(null);
-
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
-
-		const slot = slotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			handoffTarget,
-			...slotProps
-		} = slot?.props ?? {};
-		const closing = activeReceiverClosing?.get() ?? 0;
-		const animationProgress = activeReceiverAnimationProgress.get();
-
-		if (!closing) {
-			sourcePairBeforeClose.set(sourcePairKey ?? null);
-		}
-
-		const pairChangedDuringClose =
-			!!closing &&
-			!!sourcePairKey &&
-			sourcePairKey !== sourcePairBeforeClose.get();
-
-		const hasActiveCloseFinished = hasCloseTransitionFinished({
-			closing,
-			animationProgress,
-		});
-
-		const automaticPair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
-		const boundaryLinkKey = getLinkKeyFromTag(boundaryId);
-		const automaticLink = automaticPair?.links[boundaryLinkKey];
-		const requestedSourcePairKey =
-			getPairKeyForSource(boundaryId, currentScreenKey) ?? sourcePairKey;
-		const requestedSourcePair = requestedSourcePairKey
-			? pairs.get()[requestedSourcePairKey]
-			: null;
-		const requestedSourceLink = requestedSourcePair?.links[boundaryLinkKey];
-
-		const pairDestination =
-			automaticLink?.status === "complete" &&
-			(!automaticLink.group ||
-				automaticPair?.groups[automaticLink.group]?.activeId ===
-					boundaryLinkKey)
-				? automaticLink.destination.screenKey
-				: null;
-		const requestedDestinationPairKey =
-			getPairKeyForDestination(boundaryId, currentScreenKey) ??
-			destinationPairKey;
-		const destinationPair = requestedDestinationPairKey
-			? pairs.get()[requestedDestinationPairKey]
-			: null;
-		const destinationLink = destinationPair?.links[boundaryLinkKey];
-		const retainedSourcePairKey = sourcePairBeforeClose.get() ?? undefined;
-		const retainedSourcePair = retainedSourcePairKey
-			? pairs.get()[retainedSourcePairKey]
-			: null;
-		const retainedSourceLink = retainedSourcePair?.links[boundaryLinkKey];
-		const requestedPairKey = resolveRequestedHandoffPairKey({
-			destinationPairHasCompleteLink: isCompleteActiveLink(
-				destinationPair,
-				destinationLink,
-				boundaryLinkKey,
-			),
-			destinationPairKey: requestedDestinationPairKey,
-			handoffTarget,
-			retainedSourcePairHasCompleteLink: isCompleteActiveLink(
-				retainedSourcePair,
-				retainedSourceLink,
-				boundaryLinkKey,
-			),
-			retainedSourcePairKey,
-			sourcePairHasCompleteLink: isCompleteActiveLink(
-				requestedSourcePair,
-				requestedSourceLink,
-				boundaryLinkKey,
-			),
-			sourcePairKey: requestedSourcePairKey,
-		});
-		const requestedPair = requestedPairKey
-			? pairs.get()[requestedPairKey]
-			: null;
-		const requestedLink = requestedPair?.links[boundaryLinkKey];
-
-		const isScreenReady = screenReadiness.get();
-		const attachedScreenKey = attachedReceiverScreenKey.get();
-
-		const automaticReceiverScreenKey = resolveHandoffAttachmentCandidate({
-			activeReceiverClosing: !!closing,
-			activeReceiverScreenKey,
-			attachedReceiverScreenKey: attachedScreenKey,
-			hasActiveCloseFinished,
-			isScreenReady,
-			pairChangedDuringClose,
-			pairDestinationScreenKey: pairDestination,
-			pairHasBoundaryLink: automaticLink !== undefined,
-			previousReceiverScreenKey,
-		});
-		const requestedDestinationScreenKey =
-			requestedLink?.status === "complete"
-				? requestedLink.destination.screenKey
-				: null;
-		const nextReceiverScreenKey = resolveRequestedHandoffReceiver({
-			automaticScreenKey: automaticReceiverScreenKey,
-			destinationReady:
-				requestedDestinationScreenKey === activeReceiverScreenKey ||
-				isScreenReady,
-			destinationScreenKey: requestedDestinationScreenKey,
-			handoffTarget,
-			sourceScreenKey:
-				requestedLink?.status === "complete"
-					? requestedLink.source.screenKey
-					: null,
-		});
-
-		const receiverEntry = nextReceiverScreenKey
-			? getEntry(boundaryId, nextReceiverScreenKey)
-			: null;
-
-		const receiverReady = receiverEntry?.handoff === true;
-
-		const returningFromActiveClose =
-			hasActiveCloseFinished && attachedScreenKey === activeReceiverScreenKey;
-
-		const activatingPairDestination =
-			!!pairDestination &&
-			isScreenReady &&
-			nextReceiverScreenKey === pairDestination;
-
-		const canActivateReceiver = canActivateHandoffReceiver({
-			returningFromActiveClose,
-			activatingPairDestination,
-			animationProgress,
-			receiverIsActiveDestination:
-				!returningFromActiveClose &&
-				nextReceiverScreenKey === activeReceiverScreenKey,
-			destinationIsScreenReady: activeReceiverIsScreenReady?.get(),
-		});
-
-		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
-			attachedReceiverScreenKey.set(nextReceiverScreenKey);
-		}
-
-		const targetScreenKey = attachedReceiverScreenKey.get();
-
-		const targetHostName = targetScreenKey
-			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
-			: PORTAL_HOST_NAME_RESET_VALUE;
-
-		return {
-			...slotProps,
-			hostName: targetHostName,
-		};
-	});
-
-	return { teleportProps };
-};

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

@@ -1,81 +0,0 @@
-import {
-	type ComponentProps,
-	type ComponentType,
-	memo,
-	type ReactNode,
-} from "react";
-import { StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import {
-	isTeleportAvailable,
-	NativePortal,
-	PORTAL_POINTER_EVENTS,
-} from "../../teleport";
-import { useBoundaryContentPortalAttachment } from "./hooks/use-boundary-content-portal-attachment";
-
-export { BoundaryContentPortalHost } from "./components/host";
-
-type BoundaryContentPortalProps = {
-	boundaryId?: string;
-	children: ReactNode;
-	enabled: boolean;
-};
-
-type NullableHostNamePortalProps = Omit<
-	ComponentProps<NonNullable<typeof NativePortal>>,
-	"hostName"
-> & {
-	hostName?: string | null;
-};
-
-const AnimatedNativePortal = NativePortal
-	? Animated.createAnimatedComponent(
-			NativePortal as ComponentType<NullableHostNamePortalProps>,
-		)
-	: null;
-const EnabledNativePortal = AnimatedNativePortal as NonNullable<
-	typeof AnimatedNativePortal
->;
-
-export const BoundaryContentPortal = memo(function BoundaryContentPortal({
-	boundaryId,
-	children,
-	enabled,
-}: BoundaryContentPortalProps) {
-	if (
-		!enabled ||
-		boundaryId === undefined ||
-		!isTeleportAvailable ||
-		!AnimatedNativePortal
-	) {
-		return children;
-	}
-
-	return (
-		<EnabledBoundaryContentPortal boundaryId={boundaryId}>
-			{children}
-		</EnabledBoundaryContentPortal>
-	);
-});
-
-const EnabledBoundaryContentPortal = memo(
-	function EnabledBoundaryContentPortal({
-		boundaryId,
-		children,
-	}: Omit<BoundaryContentPortalProps, "enabled"> & { boundaryId: string }) {
-		const { teleportProps } = useBoundaryContentPortalAttachment({
-			boundaryId,
-		});
-
-		return (
-			<EnabledNativePortal
-				animatedProps={teleportProps}
-				name={boundaryId}
-				pointerEvents={PORTAL_POINTER_EVENTS}
-				style={StyleSheet.absoluteFill}
-			>
-				{children}
-			</EnabledNativePortal>
-		);
-	},
-);

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

@@ -1,119 +0,0 @@
-import { memo, useLayoutEffect, useRef } from "react";
-import {
-	type StyleProp,
-	StyleSheet,
-	useWindowDimensions,
-	View,
-	type ViewStyle,
-} from "react-native";
-import Animated from "react-native-reanimated";
-import { useBuilderStore } from "../../../../../../providers/screen/builder";
-import { PORTAL_POINTER_EVENTS } from "../../../teleport";
-import { useHostMeasurement } from "../hooks/use-host-measurement";
-import { registerHost, unregisterHost } from "../stores/host-registry.store";
-import { useActivePortalBoundaryHosts } from "../stores/portal-boundary-host.store";
-import { PortalBoundaryHost } from "./portal-boundary-host";
-
-let nextHostId = 0;
-
-export type PublicHostProps = {
-	style?: StyleProp<ViewStyle>;
-};
-
-type HostImplProps = PublicHostProps & {
-	fallback?: boolean;
-};
-
-function HostImpl({ fallback = false, style }: HostImplProps) {
-	const screenKey = useBuilderStore((s) => s.derivations.currentScreenKey);
-	const generatedHostKeyRef = useRef<string | null>(null);
-
-	if (generatedHostKeyRef.current === null) {
-		generatedHostKeyRef.current = `${screenKey}-host-${nextHostId++}`;
-	}
-
-	const hostKey = fallback ? screenKey : generatedHostKeyRef.current;
-	const activeBoundaryHosts = useActivePortalBoundaryHosts(hostKey);
-
-	const { height: viewportHeight, width: viewportWidth } =
-		useWindowDimensions();
-
-	const measurementKey = activeBoundaryHosts.length
-		? activeBoundaryHosts.map((host) => host.portalHostName).join("|")
-		: null;
-
-	const measurement = useHostMeasurement({
-		measurementKey,
-	});
-
-	useLayoutEffect(() => {
-		registerHost({
-			fallback,
-			hostKey,
-			screenKey,
-		});
-
-		return () => {
-			unregisterHost(screenKey, hostKey);
-		};
-	}, [fallback, hostKey, screenKey]);
-
-	const boundaryHosts = activeBoundaryHosts.map((host) => (
-		<View
-			key={host.portalHostName}
-			pointerEvents={PORTAL_POINTER_EVENTS}
-			style={[
-				styles.boundaryHostViewport,
-				{ width: viewportWidth, height: viewportHeight },
-			]}
-		>
-			<PortalBoundaryHost
-				host={host}
-				hostBounds={measurement.hostBounds}
-				hostMeasurementKey={measurementKey}
-				measuredHostKey={measurement.measuredKey}
-				style={StyleSheet.absoluteFill}
-			/>
-		</View>
-	));
-
-	return (
-		<Animated.View
-			ref={measurement.hostRef}
-			pointerEvents={PORTAL_POINTER_EVENTS}
-			style={[
-				styles.host,
-				{ width: viewportWidth, height: viewportHeight },
-				style,
-			]}
-			collapsable={false}
-		>
-			{boundaryHosts}
-		</Animated.View>
-	);
-}
-
-export const Host = memo(function Host(props: PublicHostProps) {
-	return <HostImpl {...props} />;
-});
-
-export const ScreenFallbackHost = memo(function ScreenFallbackHost() {
-	return <HostImpl fallback />;
-});
-
-const styles = StyleSheet.create({
-	host: {
-		elevation: 999999,
-		left: 0,
-		overflow: "visible",
-		position: "absolute",
-		top: 0,
-		zIndex: 999999,
-	},
-	boundaryHostViewport: {
-		left: 0,
-		overflow: "visible",
-		position: "absolute",
-		top: 0,
-	},
-});

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

@@ -1,139 +0,0 @@
-import { memo } from "react";
-import {
-	I18nManager,
-	type StyleProp,
-	StyleSheet,
-	type ViewStyle,
-} from "react-native";
-import Animated, {
-	type MeasuredDimensions,
-	type SharedValue,
-	useAnimatedReaction,
-	useAnimatedStyle,
-} from "react-native-reanimated";
-import { NO_STYLES } from "../../../../../../constants";
-import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/orchestrator/styles/helpers/compose-slot-style";
-import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
-import { resolveBoundaryLocalMeasurement } from "../helpers/local-measurement";
-import { resolvePortalOffsetStyle } from "../helpers/offset-style";
-import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
-
-const AnimatedPortalBoundaryHost = NativePortalHost
-	? Animated.createAnimatedComponent(NativePortalHost)
-	: null;
-
-const getCurrentBoundaryBounds = (host: ActivePortalBoundaryHost) => {
-	"worklet";
-	return resolveBoundaryLocalMeasurement(
-		host.localMeasurement.get(),
-		host.pairKey,
-	);
-};
-
-type PortalBoundaryHostProps = {
-	host: ActivePortalBoundaryHost;
-	hostBounds: SharedValue<MeasuredDimensions | null>;
-	hostMeasurementKey: string | null;
-	measuredHostKey: SharedValue<string | null>;
-	style?: StyleProp<ViewStyle>;
-};
-
-export const PortalBoundaryHost = memo(function PortalBoundaryHost({
-	host,
-	hostBounds,
-	hostMeasurementKey,
-	measuredHostKey,
-	style,
-}: PortalBoundaryHostProps) {
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			return (
-				getCurrentBoundaryBounds(host) !== null &&
-				hostBounds.get() !== null &&
-				!!hostMeasurementKey &&
-				measuredHostKey.get() === hostMeasurementKey
-			);
-		},
-		(ready) => {
-			"worklet";
-			if (ready) {
-				host.portalHostReady.set(true);
-			}
-		},
-	);
-
-	const hostStyle = useAnimatedStyle(() => {
-		"worklet";
-		const boundaryBounds = getCurrentBoundaryBounds(host);
-		if (!boundaryBounds) {
-			return NO_STYLES;
-		}
-
-		return resolvePortalOffsetStyle({
-			bounds: boundaryBounds,
-			hostBounds: hostBounds.get(),
-		});
-	});
-
-	const contentFrameStyle = useAnimatedStyle(() => {
-		"worklet";
-		const boundaryBounds = getCurrentBoundaryBounds(host);
-		if (!boundaryBounds) {
-			return NO_STYLES;
-		}
-
-		return {
-			height: boundaryBounds.height,
-			width: boundaryBounds.width,
-		};
-	});
-	const slotStyle = useAnimatedStyle(() => {
-		"worklet";
-		const slot = host.slotsMap.get()[host.boundaryId];
-
-		return composeSlotStyleWithLocalTransform(
-			slot?.style ?? NO_STYLES,
-			undefined,
-			slot?.boundsLocalTransform,
-		);
-	});
-
-	// Without `react-native-teleport` no portal ever mounts a boundary host, so
-	// this never renders - the guard just narrows the nullable animated host.
-	if (!AnimatedPortalBoundaryHost) {
-		return null;
-	}
-
-	return (
-		<Animated.View
-			pointerEvents={PORTAL_POINTER_EVENTS}
-			style={[style, hostStyle]}
-			collapsable={false}
-		>
-			<AnimatedPortalBoundaryHost
-				name={host.portalHostName}
-				pointerEvents={PORTAL_POINTER_EVENTS}
-				style={[styles.content, contentFrameStyle, slotStyle]}
-			/>
-		</Animated.View>
-	);
-});
-
-// The teleport offset is a physical page delta measured from the screen's
-// left edge, so the content box must anchor there too. Under native RTL,
-// `left: 0` swaps to a right-edge anchor; `end: 0` is the physical left edge
-// in RTL regardless of the swap setting.
-const styles = StyleSheet.create({
-	content: I18nManager.isRTL
-		? {
-				end: 0,
-				position: "absolute",
-				top: 0,
-			}
-		: {
-				left: 0,
-				position: "absolute",
-				top: 0,
-			},
-});

package/src/components/boundary/portal/components/boundary-portal/helpers/local-measurement.ts

@@ -1,10 +0,0 @@
-import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
-import type { BoundaryLocalMeasurement } from "../../../../types";
-
-export const resolveBoundaryLocalMeasurement = (
-	measurement: BoundaryLocalMeasurement | null,
-	pairKey: ScreenPairKey,
-) => {
-	"worklet";
-	return measurement?.pairKey === pairKey ? measurement.bounds : null;
-};