react-native-screen-transitions 4.0.0-alpha.6 → 4.0.0-alpha.8

package/lib/typescript/utils/bounds/navigation/math.d.ts

@@ -1,31 +0,0 @@
-type CombinedScaleMode = "multiply" | "average" | "max" | "min";
-export declare const combineScales: (scaleX: number, scaleY: number, mode?: CombinedScaleMode) => number;
-export declare const computeCenterScaleShift: ({ center, containerCenter, scale, }: {
-    center: number;
-    containerCenter: number;
-    scale: number;
-}) => number;
-export declare const composeCompensatedTranslation: ({ gesture, parentScale, centerShift, epsilon, }: {
-    gesture: number;
-    parentScale: number;
-    centerShift?: number;
-    epsilon: number;
-}) => number;
-export declare const resolveDirectionalDragScale: ({ normalized, dismissDirection, shrinkMin, growMax, exponent, }: {
-    normalized: number;
-    dismissDirection: "positive" | "negative";
-    shrinkMin: number;
-    growMax: number;
-    exponent: number;
-}) => number;
-export declare const resolveOpacityRangeTuple: ({ value, fallback, }: {
-    value: readonly [inputStart: number, inputEnd: number, outputStart?: number, outputEnd?: number] | undefined;
-    fallback: readonly [inputStart: number, inputEnd: number, outputStart?: number, outputEnd?: number];
-}) => {
-    inputStart: number;
-    inputEnd: number;
-    outputStart: number;
-    outputEnd: number;
-};
-export {};
-//# sourceMappingURL=math.d.ts.map

package/lib/typescript/utils/bounds/navigation/math.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../../../../src/utils/bounds/navigation/math.ts"],"names":[],"mappings":"AAEA,KAAK,iBAAiB,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AA6DhE,eAAO,MAAM,aAAa,GACzB,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,OAAM,iBAA8B,KAClC,MAaF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,qCAIrC;IACF,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACd,KAAG,MAGH,CAAC;AAgBF,eAAO,MAAM,6BAA6B,GAAI,iDAK3C;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CAChB,KAAG,MASH,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,iEAMzC;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CACjB,WAgBA,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,sBAGtC;IACF,KAAK,EACF,SAAS,CACT,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,CACjB,GACD,SAAS,CAAC;IACb,QAAQ,EAAE,SAAS,CAClB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,CAClB,CAAC;CACF;;;;;CASA,CAAC"}

package/lib/typescript/utils/platform.d.ts

@@ -1,2 +0,0 @@
-export declare function isFabric(): boolean;
-//# sourceMappingURL=platform.d.ts.map

package/lib/typescript/utils/platform.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../src/utils/platform.ts"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ,IAAI,OAAO,CAElC"}

package/src/components/boundary/portal/components/boundary-portal/helpers/active-pair.ts

@@ -1,36 +0,0 @@
-import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
-import type {
-	LinkPairsState,
-	ScreenPairKey,
-} from "../../../../../../stores/bounds/types";
-
-type HasActiveBoundaryPortalLinkParams = {
-	boundaryId: string;
-	pairsState: LinkPairsState;
-	sourcePairKey?: ScreenPairKey;
-};
-
-export const hasActiveBoundaryPortalLink = ({
-	boundaryId,
-	pairsState,
-	sourcePairKey,
-}: HasActiveBoundaryPortalLinkParams): boolean => {
-	"worklet";
-	if (!sourcePairKey) {
-		return false;
-	}
-
-	const pair = pairsState[sourcePairKey];
-	const linkKey = getLinkKeyFromTag(boundaryId);
-	const link = pair?.links[linkKey];
-
-	if (!link?.source) {
-		return false;
-	}
-
-	if (link.group && pair.groups[link.group]?.activeId !== linkKey) {
-		return false;
-	}
-
-	return true;
-};

package/src/components/boundary/portal/components/boundary-portal/stores/host-bounds.store.ts

@@ -1,45 +0,0 @@
-import { type MeasuredDimensions, makeMutable } from "react-native-reanimated";
-import { cloneScrollMetadataState } from "../../../../../../stores/scroll.store";
-import type { ScrollMetadataState } from "../../../../../../types/gesture.types";
-
-export type PortalHostBounds = MeasuredDimensions & {
-	scroll?: ScrollMetadataState | null;
-};
-
-type PortalHostBoundsState = Record<string, PortalHostBounds | null>;
-
-const portalHostBounds = makeMutable<PortalHostBoundsState>({});
-
-export const getPortalHostBounds = (hostKey: string) => {
-	"worklet";
-	return portalHostBounds.get()[hostKey] ?? null;
-};
-
-export const setPortalHostBounds = (
-	hostKey: string,
-	bounds: PortalHostBounds,
-) => {
-	"worklet";
-	const nextBounds: PortalHostBounds = {
-		...bounds,
-		scroll: cloneScrollMetadataState(bounds.scroll),
-	};
-
-	portalHostBounds.set((state) => {
-		"worklet";
-		return {
-			...state,
-			[hostKey]: nextBounds,
-		};
-	});
-};
-
-export const clearPortalHostBounds = (hostKey: string) => {
-	"worklet";
-	portalHostBounds.set((state) => {
-		"worklet";
-		const nextState: PortalHostBoundsState = { ...state };
-		delete nextState[hostKey];
-		return nextState;
-	});
-};

package/src/components/masked-view.tsx

@@ -1,74 +0,0 @@
-import {
-	I18nManager,
-	type StyleProp,
-	StyleSheet,
-	View,
-	type ViewStyle,
-} from "react-native";
-import { CONTAINER_STYLE_ID, MASK_STYLE_ID } from "../constants";
-import { createTransitionAwareComponent } from "./create-transition-aware-component";
-
-const TransitionView = createTransitionAwareComponent(View);
-
-let LazyMaskedView = View;
-
-try {
-	LazyMaskedView = require("@react-native-masked-view/masked-view").default;
-} catch (_) {
-	// noop
-}
-
-/**
- * @deprecated Use `navigationMaskEnabled` with the navigation mask style IDs
- * instead.
- */
-export default function MaskedView({
-	children,
-	style: userStyles = {},
-}: {
-	children: React.ReactNode;
-	style?: StyleProp<ViewStyle>;
-}) {
-	if (LazyMaskedView === View) {
-		return children;
-	}
-
-	return (
-		<LazyMaskedView
-			style={styles.root}
-			// @ts-expect-error
-			maskElement={
-				<TransitionView styleId={MASK_STYLE_ID} style={styles.rootMask} />
-			}
-		>
-			<TransitionView
-				styleId={CONTAINER_STYLE_ID}
-				style={[styles.rootContainer, userStyles]}
-			>
-				{children}
-			</TransitionView>
-		</LazyMaskedView>
-	);
-}
-
-const styles = StyleSheet.create({
-	root: {
-		flex: 1,
-	},
-	// The mask rect's translate math assumes a physical top-left base. Under
-	// native RTL a fixed-width flex child anchors to the right edge, so pin it
-	// to the physical left (`end` = left edge in RTL).
-	rootMask: I18nManager.isRTL
-		? {
-				backgroundColor: "white",
-				end: 0,
-				position: "absolute",
-				top: 0,
-			}
-		: {
-				backgroundColor: "white",
-			},
-	rootContainer: {
-		flex: 1,
-	},
-});

package/src/components/scene-view.tsx

@@ -1,29 +0,0 @@
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "@react-navigation/native";
-import * as React from "react";
-import type { BaseStackDescriptor } from "../types/stack.types";
-
-type SceneViewProps = {
-	descriptor: BaseStackDescriptor;
-};
-
-/**
- * Shared scene view for JS-rendered stacks (blank-stack, component-stack).
- * Wraps screen render output with navigation context providers
- * and optional screen overlay.
- */
-export const SceneView = React.memo(function SceneView({
-	descriptor,
-}: SceneViewProps) {
-	const { route, navigation, render } = descriptor;
-
-	return (
-		<NavigationContext.Provider value={navigation as any}>
-			<NavigationRouteContext.Provider value={route}>
-				{render?.()}
-			</NavigationRouteContext.Provider>
-		</NavigationContext.Provider>
-	);
-});

package/src/components/screen-container/layers/surface-container.tsx

@@ -1,63 +0,0 @@
-import { type ComponentType, memo, useMemo } from "react";
-import { StyleSheet, type ViewProps } from "react-native";
-import Animated from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
-
-type Props = {
-	children: React.ReactNode;
-	pointerEvents: ViewProps["pointerEvents"];
-};
-
-export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	/** @deprecated Use `contentComponent` instead. */
-	const DeprecatedSurfaceComponent = useDescriptorsStore(
-		(store) => store.options.surfaceComponent,
-	);
-
-	const AnimatedSurfaceComponent = useMemo<ComponentType<any> | null>(() => {
-		return DeprecatedSurfaceComponent
-			? Animated.createAnimatedComponent(DeprecatedSurfaceComponent)
-			: null;
-	}, [DeprecatedSurfaceComponent]);
-
-	if (!AnimatedSurfaceComponent) return children;
-
-	return (
-		<AnimatedSurface
-			SurfaceComponent={AnimatedSurfaceComponent}
-			pointerEvents={pointerEvents}
-		>
-			{children}
-		</AnimatedSurface>
-	);
-});
-
-type AnimatedSurfaceProps = {
-	children: React.ReactNode;
-	pointerEvents: ViewProps["pointerEvents"];
-	SurfaceComponent: ComponentType<any>;
-};
-
-const AnimatedSurface = memo(
-	({ children, pointerEvents, SurfaceComponent }: AnimatedSurfaceProps) => {
-		const animatedSurfaceStyle = useSlotStyles("surface");
-		const animatedSurfaceProps = useSlotProps("surface");
-
-		return (
-			<SurfaceComponent
-				style={[styles.surface, animatedSurfaceStyle]}
-				animatedProps={animatedSurfaceProps}
-				pointerEvents={pointerEvents}
-			>
-				{children}
-			</SurfaceComponent>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	surface: {
-		flex: 1,
-	},
-});

package/src/hooks/navigation/use-previous.ts

@@ -1,11 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const usePrevious = <T>(value: T): T | null => {
-	const ref = useRef<T>(null);
-
-	useEffect(() => {
-		ref.current = value;
-	});
-
-	return ref.current;
-};

package/src/hooks/navigation/use-stack.tsx

@@ -1,185 +0,0 @@
-import type { Route } from "@react-navigation/native";
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useSyncExternalStore,
-} from "react";
-import { useDerivedValue } from "react-native-reanimated";
-import { syncStackProgressValues } from "../../providers/screen/animation/helpers/stack-progress";
-import type { StackCoreContextValue } from "../../providers/stack/core.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import type { OverlayProps } from "../../types/overlay.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-	BaseStackScene,
-} from "../../types/stack.types";
-
-export interface StackDescriptor<
-	TRoute extends BaseStackRoute = Route<string>,
-	TNavigation extends BaseStackNavigation = BaseStackNavigation,
-> extends BaseStackDescriptor<TRoute, TNavigation> {
-	options: BaseStackDescriptor["options"] & {
-		overlay?: (props: OverlayProps) => React.ReactNode;
-		overlayShown?: boolean;
-		meta?: Record<string, unknown>;
-		enableTransitions?: boolean;
-	};
-}
-
-export type StackScene<TDescriptor extends StackDescriptor = StackDescriptor> =
-	BaseStackScene<TDescriptor>;
-
-type StackDismissRequest = (payload: { route: BaseStackRoute }) => boolean;
-type StackSelector<T> = (stack: StackContextValue) => T;
-
-export interface StackContextValue extends StackCoreContextValue {
-	navigatorKey: string;
-	routeKeys: string[];
-	routes: Route<string>[];
-	scenes: StackScene[];
-	focusedIndex: number;
-	requestDismiss?: StackDismissRequest;
-}
-
-interface StackStoreApi {
-	getSnapshot: () => StackContextValue;
-	subscribe: (listener: () => void) => () => void;
-}
-
-interface MutableStackStoreApi extends StackStoreApi {
-	notify: () => void;
-	setSnapshot: (snapshot: StackContextValue) => boolean;
-}
-
-const createStackStore = (
-	initialSnapshot: StackContextValue,
-): MutableStackStoreApi => {
-	let snapshot = initialSnapshot;
-	const listeners = new Set<() => void>();
-
-	return {
-		getSnapshot: () => snapshot,
-		notify: () => {
-			for (const listener of listeners) {
-				listener();
-			}
-		},
-		setSnapshot: (nextSnapshot) => {
-			if (Object.is(snapshot, nextSnapshot)) {
-				return false;
-			}
-
-			snapshot = nextSnapshot;
-			return true;
-		},
-		subscribe: (listener) => {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		},
-	};
-};
-
-const StackContext = createContext<StackStoreApi | null>(null);
-StackContext.displayName = "Stack";
-
-function StackProgressOwner({ routeKeys }: { routeKeys: string[] }) {
-	const visualProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "visualProgress"),
-			),
-		[routeKeys],
-	);
-
-	const stackProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "stackProgress"),
-			),
-		[routeKeys],
-	);
-
-	useDerivedValue(() => {
-		syncStackProgressValues(visualProgressValues, stackProgressValues);
-	});
-
-	return null;
-}
-
-export function StackProvider({
-	children,
-	value,
-}: {
-	children: ReactNode;
-	value: StackContextValue;
-}) {
-	const storeRef = useRef<MutableStackStoreApi | null>(null);
-	const pendingNotifyRef = useRef(false);
-
-	let store = storeRef.current;
-	if (!store) {
-		store = createStackStore(value);
-		storeRef.current = store;
-	}
-
-	pendingNotifyRef.current =
-		store.setSnapshot(value) || pendingNotifyRef.current;
-
-	useLayoutEffect(() => {
-		if (!pendingNotifyRef.current) {
-			return;
-		}
-
-		pendingNotifyRef.current = false;
-		store.notify();
-	});
-
-	return (
-		<StackContext.Provider value={store}>
-			<StackProgressOwner routeKeys={value.routeKeys} />
-			{children}
-		</StackContext.Provider>
-	);
-}
-
-function useStackStore(): StackStoreApi {
-	const store = useContext(StackContext);
-
-	if (store === null) {
-		throw new Error("useStack must be used within a Stack provider");
-	}
-
-	return store;
-}
-
-export function useStack<T extends StackContextValue = StackContextValue>(): T;
-export function useStack<T>(selector: StackSelector<T>): T;
-export function useStack<T>(
-	selector?: StackSelector<T>,
-): StackContextValue | T {
-	const store = useStackStore();
-	const selectorRef = useRef<StackSelector<StackContextValue | T>>(
-		selector ?? ((stack) => stack),
-	);
-	selectorRef.current = selector ?? ((stack) => stack);
-
-	const getSelectedSnapshot = useCallback(
-		() => selectorRef.current(store.getSnapshot()),
-		[store],
-	);
-
-	return useSyncExternalStore(
-		store.subscribe,
-		getSelectedSnapshot,
-		getSelectedSnapshot,
-	);
-}

package/src/hooks/navigation/use-tab-press-reset.ts

@@ -1,36 +0,0 @@
-import * as React from "react";
-
-/**
- * When inside a tab navigator, resets the stack to the first screen
- * when the already-focused tab is pressed again. Replicates native behaviour.
- */
-export function useTabPressReset(
-	navigation: {
-		isFocused: () => boolean;
-		addListener?: (event: string, callback: (e: any) => void) => () => void;
-		dispatch: (action: any) => void;
-	},
-	stateIndex: number,
-	stateKey: string,
-) {
-	React.useEffect(
-		() =>
-			navigation?.addListener?.("tabPress", (e: any) => {
-				const isFocused = navigation.isFocused();
-
-				// Run the operation in the next frame so we're sure all listeners have been run
-				// This is necessary to know if preventDefault() has been called
-				requestAnimationFrame(() => {
-					if (stateIndex > 0 && isFocused && !e.defaultPrevented) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							type: "POP_TO_TOP",
-							target: stateKey,
-						});
-					}
-				});
-			}),
-		[navigation, stateIndex, stateKey],
-	);
-}

package/src/providers/screen/descriptors/helpers/get-ancestor-keys.ts

@@ -1,28 +0,0 @@
-import type { BaseStackDescriptor } from "../../../../types/stack.types";
-
-/**
- * Builds nested navigator ancestor keys from immediate parent to root.
- */
-export function getAncestorKeys(current: BaseStackDescriptor): string[] {
-	const ancestors: string[] = [];
-	const nav = current.navigation as any;
-
-	if (typeof nav?.getParent !== "function") {
-		return ancestors;
-	}
-
-	let parent = nav.getParent();
-
-	while (parent) {
-		const state = parent.getState();
-		if (state?.routes && state.index !== undefined) {
-			const focusedRoute = state.routes[state.index];
-			if (focusedRoute?.key) {
-				ancestors.push(focusedRoute.key);
-			}
-		}
-		parent = parent.getParent();
-	}
-
-	return ancestors;
-}

package/src/providers/screen/gestures/shared/ancestors.ts

@@ -1,27 +0,0 @@
-type GestureAncestorNode<T> = {
-	gestureContext: T | null;
-	isIsolated?: boolean;
-};
-
-/**
- * Returns the gesture context chain, starting at `context`, then walking upward.
- * When `isIsolated` is provided, the walk stops at a stack isolation boundary.
- */
-export function walkGestureAncestors<T extends GestureAncestorNode<T>>(
-	context: T | null | undefined,
-	isIsolated?: boolean,
-): T[] {
-	const ancestors: T[] = [];
-	let ancestor = context ?? null;
-
-	while (ancestor) {
-		if (isIsolated !== undefined && ancestor.isIsolated !== isIsolated) {
-			break;
-		}
-
-		ancestors.push(ancestor);
-		ancestor = ancestor.gestureContext;
-	}
-
-	return ancestors;
-}

package/src/providers/screen/styles/components/floating-overlay-layer.tsx

@@ -1,29 +0,0 @@
-import { memo } from "react";
-import { StyleSheet, View } from "react-native";
-
-interface FloatingOverlayLayerProps {
-	children: React.ReactNode;
-	enabled?: boolean;
-}
-export const FloatingOverlayLayer = memo(function FloatingOverlayLayer({
-	children,
-	enabled,
-}: FloatingOverlayLayerProps) {
-	if (!enabled) {
-		return children;
-	}
-	return (
-		<View
-			style={[StyleSheet.absoluteFill, styles.float]}
-			pointerEvents="box-none"
-		>
-			{children}
-		</View>
-	);
-});
-
-const styles = StyleSheet.create({
-	float: {
-		zIndex: 999,
-	},
-});

package/src/providers/screen/styles/stores/slot-references.store.ts

@@ -1,72 +0,0 @@
-import { useSyncExternalStore } from "react";
-import type { ScreenKey } from "../../../../stores/bounds/types";
-import type { ScreenSlotContextValue } from "../slot.provider";
-
-/**
- * Screen-owned slot reference registry.
- *
- * This is important for portals: a teleported component can render outside the
- * screen provider that owns its active transition, but it still needs references
- * to that provider's shared values. This store does not copy or own styles; it
- * only exposes the existing ScreenSlotProvider value by screen key.
- */
-type ScreenSlotsSnapshot = Record<ScreenKey, ScreenSlotContextValue>;
-
-const listeners = new Set<() => void>();
-const slotsByScreenKey = new Map<ScreenKey, ScreenSlotContextValue>();
-
-let snapshot: ScreenSlotsSnapshot = {};
-
-const emit = () => {
-	snapshot = Object.fromEntries(slotsByScreenKey);
-
-	for (const listener of listeners) {
-		listener();
-	}
-};
-
-export const registerScreenSlots = (
-	screenKey: ScreenKey,
-	slots: ScreenSlotContextValue,
-) => {
-	const previous = slotsByScreenKey.get(screenKey);
-	if (
-		previous?.localStylesMaps === slots.localStylesMaps &&
-		previous.nextInterpolatorReady === slots.nextInterpolatorReady &&
-		previous.slotsMap === slots.slotsMap &&
-		previous.visibilityBlocked === slots.visibilityBlocked
-	) {
-		return;
-	}
-
-	slotsByScreenKey.set(screenKey, slots);
-	emit();
-};
-
-export const unregisterScreenSlots = (
-	screenKey: ScreenKey,
-	slots: ScreenSlotContextValue,
-) => {
-	if (slotsByScreenKey.get(screenKey) !== slots) {
-		return;
-	}
-
-	slotsByScreenKey.delete(screenKey);
-	emit();
-};
-
-const subscribe = (listener: () => void) => {
-	listeners.add(listener);
-
-	return () => {
-		listeners.delete(listener);
-	};
-};
-
-export const useRegisteredScreenSlots = (screenKey?: ScreenKey | null) => {
-	return useSyncExternalStore(
-		subscribe,
-		() => (screenKey ? (snapshot[screenKey] ?? null) : null),
-		() => null,
-	);
-};