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

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

@@ -1,56 +0,0 @@
-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/helpers/active-handoff-receiver.ts

@@ -1,192 +0,0 @@
-import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
-import type { BoundaryHandoffTarget } from "../../../../../../types/animation.types";
-
-type ReceiverRoute = {
-	key: string;
-};
-
-type ReceiverScene = {
-	activity: string;
-	route: ReceiverRoute;
-};
-
-type ResolveActiveHandoffReceiverParams = {
-	focusedIndex: number;
-	routes: ReceiverRoute[];
-	scenes: ReceiverScene[];
-};
-
-export const resolveActiveHandoffReceiver = ({
-	focusedIndex,
-	routes,
-	scenes,
-}: ResolveActiveHandoffReceiverParams): string | null => {
-	for (let index = scenes.length - 1; index >= 0; index--) {
-		const scene = scenes[index];
-		if (scene?.activity === "closing") {
-			return scene.route.key;
-		}
-	}
-
-	return routes[focusedIndex]?.key ?? null;
-};
-
-export const resolvePreviousHandoffReceiver = ({
-	focusedIndex,
-	routes,
-	scenes,
-}: ResolveActiveHandoffReceiverParams): string | null => {
-	for (let index = scenes.length - 1; index >= 0; index--) {
-		if (scenes[index]?.activity !== "closing") {
-			continue;
-		}
-
-		for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
-			const previousScene = scenes[previousIndex];
-			if (previousScene?.activity !== "closing") {
-				return previousScene?.route.key ?? null;
-			}
-		}
-	}
-
-	return routes[focusedIndex]?.key ?? null;
-};
-
-export const resolveHandoffAttachmentCandidate = ({
-	activeReceiverClosing,
-	activeReceiverScreenKey,
-	attachedReceiverScreenKey,
-	hasActiveCloseFinished,
-	isScreenReady,
-	pairChangedDuringClose = false,
-	pairDestinationScreenKey,
-	pairHasBoundaryLink,
-	previousReceiverScreenKey,
-}: {
-	activeReceiverClosing: boolean;
-	activeReceiverScreenKey: string | null;
-	attachedReceiverScreenKey: string;
-	hasActiveCloseFinished: boolean;
-	isScreenReady: boolean;
-	pairChangedDuringClose?: boolean;
-	pairDestinationScreenKey: string | null;
-	pairHasBoundaryLink?: boolean;
-	previousReceiverScreenKey: string | null;
-}) => {
-	"worklet";
-	const currentPairHasBoundaryLink =
-		pairHasBoundaryLink ?? pairDestinationScreenKey !== null;
-
-	if (
-		activeReceiverClosing &&
-		attachedReceiverScreenKey !== activeReceiverScreenKey &&
-		!currentPairHasBoundaryLink
-	) {
-		return attachedReceiverScreenKey;
-	}
-
-	if (
-		activeReceiverClosing &&
-		isScreenReady &&
-		pairDestinationScreenKey &&
-		pairChangedDuringClose
-	) {
-		return pairDestinationScreenKey;
-	}
-
-	if (
-		activeReceiverClosing &&
-		pairChangedDuringClose &&
-		!currentPairHasBoundaryLink
-	) {
-		return hasActiveCloseFinished
-			? previousReceiverScreenKey
-			: attachedReceiverScreenKey;
-	}
-
-	if (
-		hasActiveCloseFinished &&
-		attachedReceiverScreenKey === activeReceiverScreenKey
-	) {
-		return previousReceiverScreenKey;
-	}
-
-	if (hasActiveCloseFinished) {
-		return attachedReceiverScreenKey;
-	}
-
-	if (
-		activeReceiverClosing &&
-		attachedReceiverScreenKey !== activeReceiverScreenKey &&
-		isScreenReady &&
-		pairDestinationScreenKey
-	) {
-		return pairDestinationScreenKey;
-	}
-
-	return activeReceiverScreenKey;
-};
-
-export const resolveRequestedHandoffReceiver = ({
-	automaticScreenKey,
-	destinationReady = true,
-	destinationScreenKey,
-	handoffTarget,
-	sourceScreenKey,
-}: {
-	automaticScreenKey: string | null;
-	destinationReady?: boolean;
-	destinationScreenKey: string | null;
-	handoffTarget: BoundaryHandoffTarget | undefined;
-	sourceScreenKey: string | null;
-}) => {
-	"worklet";
-
-	if (handoffTarget === "source") {
-		return sourceScreenKey;
-	}
-
-	if (handoffTarget === "destination") {
-		return destinationReady ? destinationScreenKey : automaticScreenKey;
-	}
-
-	return automaticScreenKey;
-};
-
-export const resolveRequestedHandoffPairKey = ({
-	destinationPairHasCompleteLink,
-	destinationPairKey,
-	handoffTarget,
-	retainedSourcePairHasCompleteLink,
-	retainedSourcePairKey,
-	sourcePairHasCompleteLink,
-	sourcePairKey,
-}: {
-	destinationPairHasCompleteLink: boolean;
-	destinationPairKey: ScreenPairKey | undefined;
-	handoffTarget: BoundaryHandoffTarget | undefined;
-	retainedSourcePairHasCompleteLink: boolean;
-	retainedSourcePairKey: ScreenPairKey | undefined;
-	sourcePairHasCompleteLink: boolean;
-	sourcePairKey: ScreenPairKey | undefined;
-}) => {
-	"worklet";
-
-	if (handoffTarget === "source" || handoffTarget === "destination") {
-		if (sourcePairHasCompleteLink) {
-			return sourcePairKey;
-		}
-
-		if (destinationPairHasCompleteLink) {
-			return destinationPairKey;
-		}
-
-		if (retainedSourcePairHasCompleteLink) {
-			return retainedSourcePairKey;
-		}
-
-		return sourcePairKey ?? destinationPairKey ?? retainedSourcePairKey;
-	}
-
-	return sourcePairKey;
-};

package/src/components/boundary/portal/components/boundary-content-portal/helpers/handoff-visibility.ts

@@ -1,23 +0,0 @@
-export function canActivateHandoffReceiver({
-	returningFromActiveClose,
-	activatingPairDestination,
-	animationProgress,
-	receiverIsActiveDestination,
-	destinationIsScreenReady,
-}: {
-	returningFromActiveClose: boolean;
-	activatingPairDestination: boolean;
-	animationProgress: number;
-	receiverIsActiveDestination: boolean;
-	destinationIsScreenReady: boolean | undefined;
-}) {
-	"worklet";
-	// Keep the loaded source in place until its receiving screen is visible.
-	if (receiverIsActiveDestination && destinationIsScreenReady !== true)
-		return false;
-	return (
-		returningFromActiveClose ||
-		activatingPairDestination ||
-		animationProgress > 0
-	);
-}

package/src/components/boundary/portal/components/boundary-content-portal/helpers/host-name.ts

@@ -1,9 +0,0 @@
-const BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX = "-content-portal-host";
-
-export const createBoundaryContentPortalHostName = (
-	screenKey: string,
-	boundaryId: string,
-) => {
-	"worklet";
-	return `${screenKey}-${boundaryId}${BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX}`;
-};

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>
-		);
-	},
-);