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

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

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

@@ -1,118 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from "react";
-import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { getPairKeyForSource } from "../../../../../../stores/bounds/internals/links";
-import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
-import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
-import type { BoundaryLocalMeasurementValue } from "../../../../types";
-import { createBoundaryPortalHostName } from "../../../utils/naming";
-import {
-	mountPortalBoundaryHost,
-	unmountPortalBoundaryHostByName,
-} from "../stores/portal-boundary-host.store";
-
-type UseActivePortalBoundaryHostParams = {
-	boundaryId: string;
-	currentScreenKey: string;
-	escapeHostKey?: string;
-	localMeasurement: BoundaryLocalMeasurementValue;
-	portalHostName: SharedValue<string | null>;
-	portalHostReady: SharedValue<boolean>;
-	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-};
-
-export const resolveActivePortalPairKey = ({
-	pairKey,
-	measurementPairKey,
-	hasAnimatedSlot,
-}: {
-	pairKey: ScreenPairKey | null;
-	measurementPairKey: ScreenPairKey | null | undefined;
-	hasAnimatedSlot: boolean;
-}): ScreenPairKey | null => {
-	"worklet";
-	if (!pairKey || measurementPairKey !== pairKey || !hasAnimatedSlot) {
-		return null;
-	}
-
-	return pairKey;
-};
-
-export const useActivePortalBoundaryHost = ({
-	boundaryId,
-	currentScreenKey,
-	escapeHostKey,
-	localMeasurement,
-	portalHostName,
-	portalHostReady,
-	slotsMap,
-}: UseActivePortalBoundaryHostParams) => {
-	const [activePairKey, setActivePairKey] = useState<ScreenPairKey | null>(
-		null,
-	);
-
-	const updateActivePairKey = useCallback((pairKey: ScreenPairKey | null) => {
-		setActivePairKey(pairKey);
-	}, []);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
-			const measurement = localMeasurement.get();
-
-			return resolveActivePortalPairKey({
-				pairKey,
-				measurementPairKey: measurement?.pairKey,
-				hasAnimatedSlot: slotsMap.get()[boundaryId] !== undefined,
-			});
-		},
-		(pairKey, previousPairKey) => {
-			"worklet";
-			if (pairKey === previousPairKey) {
-				return;
-			}
-
-			scheduleOnRN(updateActivePairKey, pairKey);
-		},
-	);
-
-	useLayoutEffect(() => {
-		if (!activePairKey || !escapeHostKey) {
-			portalHostName.set(null);
-			portalHostReady.set(false);
-			return;
-		}
-
-		const nextPortalHostName = createBoundaryPortalHostName(
-			escapeHostKey,
-			boundaryId,
-			activePairKey,
-		);
-
-		mountPortalBoundaryHost({
-			boundaryId,
-			hostKey: escapeHostKey,
-			localMeasurement,
-			pairKey: activePairKey,
-			portalHostName: nextPortalHostName,
-			portalHostReady,
-			slotsMap,
-		});
-		portalHostName.set(nextPortalHostName);
-
-		return () => {
-			portalHostName.set(null);
-			portalHostReady.set(false);
-			unmountPortalBoundaryHostByName(nextPortalHostName);
-		};
-	}, [
-		activePairKey,
-		boundaryId,
-		escapeHostKey,
-		localMeasurement,
-		portalHostName,
-		portalHostReady,
-		slotsMap,
-	]);
-};

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

@@ -1,64 +0,0 @@
-import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useBuilderStore } from "../../../../../../providers/screen/builder";
-import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
-import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
-import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import { useActiveHostKey } from "../stores/host-registry.store";
-import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
-
-interface UseBoundaryPortalAttachmentParams {
-	boundaryId: string;
-}
-
-export const useBoundaryPortalAttachment = ({
-	boundaryId,
-}: UseBoundaryPortalAttachmentParams) => {
-	const localMeasurement = useBoundaryRootStore((root) => {
-		if (!root) {
-			throw new Error("Boundary portal attachment requires a boundary root.");
-		}
-
-		return root.localMeasurement;
-	});
-	const currentScreenKey = useBuilderStore(
-		(s) => s.derivations.currentScreenKey,
-	);
-	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
-	const portalHostName = useSharedValue<string | null>(null);
-	const portalHostReady = useSharedValue(false);
-	const escapeHostKey = useActiveHostKey(currentScreenKey);
-
-	useActivePortalBoundaryHost({
-		boundaryId,
-		currentScreenKey,
-		escapeHostKey,
-		localMeasurement,
-		portalHostName,
-		portalHostReady,
-		slotsMap,
-	});
-
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
-
-		const slot = slotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			handoffTarget: _handoffTarget,
-			...slotProps
-		} = slot?.props ?? {};
-
-		const shouldAttach = slot !== undefined && portalHostReady.get();
-
-		const hostName = shouldAttach
-			? portalHostName.get()
-			: PORTAL_HOST_NAME_RESET_VALUE;
-
-		return {
-			...slotProps,
-			hostName,
-		};
-	});
-
-	return { teleportProps };
-};

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

@@ -1,90 +0,0 @@
-import type { View } from "react-native";
-import {
-	cancelAnimation,
-	type MeasuredDimensions,
-	measure,
-	useAnimatedReaction,
-	useAnimatedRef,
-	useSharedValue,
-	withDelay,
-	withTiming,
-} from "react-native-reanimated";
-
-const HOST_MEASUREMENT_RETRY_DELAY_MS = 16;
-
-type UseHostMeasurementParams = {
-	measurementKey: string | null;
-};
-
-export const useHostMeasurement = ({
-	measurementKey,
-}: UseHostMeasurementParams) => {
-	const hostRef = useAnimatedRef<View>();
-	const hostBounds = useSharedValue<MeasuredDimensions | null>(null);
-	const measuredKey = useSharedValue<string | null>(null);
-	const retryToken = useSharedValue(0);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!measurementKey) {
-				return null;
-			}
-
-			return [measurementKey, measuredKey.get(), retryToken.get()] as const;
-		},
-		(state) => {
-			"worklet";
-			if (!state) {
-				cancelAnimation(retryToken);
-				return;
-			}
-
-			const [requestedKey, completedKey] = state;
-			if (requestedKey === completedKey) {
-				return;
-			}
-
-			const measured = measure(hostRef);
-
-			if (!measured) {
-				cancelAnimation(retryToken);
-				retryToken.set(
-					withDelay(
-						HOST_MEASUREMENT_RETRY_DELAY_MS,
-						withTiming(retryToken.get() + 1, { duration: 0 }),
-					),
-				);
-				return;
-			}
-
-			cancelAnimation(retryToken);
-
-			if (measured.width <= 0 || measured.height <= 0) {
-				cancelAnimation(retryToken);
-				retryToken.set(
-					withDelay(
-						HOST_MEASUREMENT_RETRY_DELAY_MS,
-						withTiming(retryToken.get() + 1, { duration: 0 }),
-					),
-				);
-				return;
-			}
-
-			hostBounds.set({
-				x: measured.x,
-				y: measured.y,
-				width: measured.width,
-				height: measured.height,
-				pageX: measured.pageX,
-				pageY: measured.pageY,
-			});
-			measuredKey.set(requestedKey);
-		},
-	);
-	return {
-		hostBounds,
-		hostRef,
-		measuredKey,
-	};
-};

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

@@ -1,97 +0,0 @@
-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 { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
-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;
-const EnabledNativePortal = AnimatedNativePortal as NonNullable<
-	typeof AnimatedNativePortal
->;
-
-type BoundaryPortalProps = {
-	boundaryId: string;
-	children: ReactNode;
-	enabled: boolean;
-	placeholderRef?: AnimatedRef<View>;
-};
-
-export const BoundaryPortal = memo(function BoundaryPortal({
-	boundaryId,
-	children,
-	enabled,
-	placeholderRef,
-}: BoundaryPortalProps) {
-	if (!enabled || !isTeleportAvailable || !AnimatedNativePortal) {
-		return children;
-	}
-
-	return (
-		<EnabledBoundaryPortal
-			boundaryId={boundaryId}
-			placeholderRef={placeholderRef}
-		>
-			{children}
-		</EnabledBoundaryPortal>
-	);
-});
-
-const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
-	boundaryId,
-	children,
-	placeholderRef,
-}: Omit<BoundaryPortalProps, "enabled">) {
-	if (__DEV__ && !boundaryId) {
-		logger.warnOnce(
-			"portal:missing-id",
-			"A boundary portal was rendered without an id; rendering inline.",
-		);
-	}
-
-	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
-
-	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
-
-	return (
-		<Animated.View
-			ref={placeholderRef}
-			onLayout={({ nativeEvent: { layout } }) =>
-				scheduleOnUI(handleOnLayout, layout)
-			}
-			style={placeholderStyle}
-			pointerEvents={PORTAL_POINTER_EVENTS}
-			collapsable={false}
-		>
-			<EnabledNativePortal
-				animatedProps={teleportProps}
-				name={boundaryId}
-				pointerEvents={PORTAL_POINTER_EVENTS}
-			>
-				{children}
-			</EnabledNativePortal>
-		</Animated.View>
-	);
-});