react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/providers/screen/origin.provider.tsx

@@ -1,38 +0,0 @@
-import { StyleSheet, type View } from "react-native";
-import Animated, {
-	type AnimatedRef,
-	useAnimatedRef,
-} from "react-native-reanimated";
-import createProvider from "../../utils/create-provider";
-
-interface Props {
-	children: React.ReactNode;
-}
-interface ContextValue {
-	originRef: AnimatedRef<View>;
-}
-
-export const { OriginProvider, useOriginContext } = createProvider("Origin", {
-	guarded: true,
-})<Props, ContextValue>(({ children }) => {
-	const originRef = useAnimatedRef<View>();
-
-	return {
-		value: {
-			originRef,
-		},
-		children: (
-			<Animated.View
-				style={styles.container}
-				collapsable={false}
-				ref={originRef}
-			>
-				{children}
-			</Animated.View>
-		),
-	};
-});
-
-const styles = StyleSheet.create({
-	container: { flex: 1 },
-});

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/helpers/opening-phase.ts

@@ -1,25 +0,0 @@
-/**
- * The "pre-start" window of an opening transition: the screen has committed to
- * opening (`entering`) but `transitionProgress` has not yet moved past 0, so no
- * transformed frame has been produced yet.
- *
- * This window is a quarantine, and two source-level guards key off it:
- * - the visibility gate keeps the entering screen hidden (it must not be SEEN), and
- * - interpolator ownership stays on "current" so the entering screen does not
- *   DRIVE other screens' styles until its transition is actually live.
- *
- * Both must agree on when the open transition has started, so the threshold
- * lives here in one place rather than being re-derived at each site.
- */
-export const hasOpenTransitionStarted = (transitionProgress: number) => {
-	"worklet";
-	return transitionProgress > 0;
-};
-
-export const isOpeningBeforeStart = (
-	entering: number,
-	transitionProgress: number,
-) => {
-	"worklet";
-	return !!entering && !hasOpenTransitionStarted(transitionProgress);
-};

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

package/src/providers/stack/direct.provider.tsx

@@ -1,129 +0,0 @@
-import type * as React from "react";
-import { useMemo } from "react";
-import {
-	type StackContextValue,
-	StackProvider,
-} from "../../hooks/navigation/use-stack";
-import type {
-	DirectStackContextValue,
-	DirectStackDescriptorMap,
-	DirectStackProps,
-	DirectStackScene,
-} from "../../types/providers/direct-stack.types";
-import { isOverlayVisible } from "../../utils/overlay/visibility";
-import { useStackCoreContext } from "./core.provider";
-
-function useDirectStackValue(
-	props: DirectStackProps,
-): DirectStackContextValue & { stackContextValue: StackContextValue } {
-	const { state, navigation, descriptors, describe } = props;
-	const { flags } = useStackCoreContext();
-	const navigatorKey = state.key;
-
-	const preloadedDescriptors = useMemo(() => {
-		return state.preloadedRoutes.reduce<DirectStackDescriptorMap>(
-			(acc, route) => {
-				acc[route.key] = acc[route.key] || describe(route, true);
-				return acc;
-			},
-			{},
-		);
-	}, [state.preloadedRoutes, describe]);
-
-	const { scenes, shouldShowFloatOverlay, routeKeys, allRoutes } =
-		useMemo(() => {
-			const allRoutes = state.routes.concat(state.preloadedRoutes);
-			const scenes: DirectStackScene[] = [];
-			const routeKeys: string[] = [];
-			const allDescriptors: DirectStackDescriptorMap = {
-				...preloadedDescriptors,
-				...descriptors,
-			};
-			let shouldShowFloatOverlay = false;
-
-			for (const route of allRoutes) {
-				const descriptor = allDescriptors[route.key];
-				const isPreloaded =
-					preloadedDescriptors[route.key] !== undefined &&
-					descriptors[route.key] === undefined;
-
-				scenes.push({ route, descriptor, isPreloaded });
-				routeKeys.push(route.key);
-
-				if (!shouldShowFloatOverlay && descriptor) {
-					const options = descriptor.options;
-					if (
-						options?.enableTransitions === true &&
-						isOverlayVisible(options)
-					) {
-						shouldShowFloatOverlay = true;
-					}
-				}
-			}
-
-			return {
-				scenes,
-				shouldShowFloatOverlay,
-				routeKeys,
-				allRoutes,
-			};
-		}, [
-			state.routes,
-			state.preloadedRoutes,
-			preloadedDescriptors,
-			descriptors,
-		]);
-
-	const focusedIndex = state.index;
-
-	const stackContextValue = useMemo<StackContextValue>(
-		() => ({
-			flags,
-			navigatorKey,
-			routeKeys,
-			routes: allRoutes,
-			scenes,
-			focusedIndex,
-		}),
-		[flags, navigatorKey, routeKeys, allRoutes, scenes, focusedIndex],
-	);
-
-	// DirectStack context value
-	const lifecycleValue = useMemo<DirectStackContextValue>(
-		() => ({
-			state,
-			navigation,
-			descriptors,
-			scenes,
-			focusedIndex,
-			shouldShowFloatOverlay,
-		}),
-		[
-			state,
-			navigation,
-			descriptors,
-			scenes,
-			focusedIndex,
-			shouldShowFloatOverlay,
-		],
-	);
-
-	return { ...lifecycleValue, stackContextValue };
-}
-
-function withDirectStack<TProps extends DirectStackProps>(
-	Component: React.ComponentType<DirectStackContextValue>,
-): React.FC<TProps> {
-	return function DirectStackProvider(props: TProps) {
-		const { stackContextValue, ...lifecycleValue } = useDirectStackValue(props);
-
-		return (
-			<StackProvider value={stackContextValue}>
-				<Component {...lifecycleValue} />
-			</StackProvider>
-		);
-	};
-}
-
-export type { DirectStackContextValue, DirectStackProps, DirectStackScene };
-export { withDirectStack };

package/src/types/providers/direct-stack.types.ts

@@ -1,69 +0,0 @@
-import type {
-	Descriptor,
-	NavigationHelpers,
-	NavigationProp,
-	ParamListBase,
-	RouteProp,
-	StackActionHelpers,
-	StackNavigationState,
-} from "@react-navigation/native";
-import type { ScreenTransitionConfig } from "../screen.types";
-import type { DescriptorMap } from "../stack.types";
-
-export type DirectStackNavigationEventMap = {};
-
-export type DirectStackNavigationHelpers = NavigationHelpers<
-	ParamListBase,
-	DirectStackNavigationEventMap
->;
-
-export type DirectStackNavigationProp<
-	ParamList extends ParamListBase,
-	RouteName extends keyof ParamList = string,
-	NavigatorID extends string | undefined = undefined,
-> = NavigationProp<
-	ParamList,
-	RouteName,
-	NavigatorID,
-	StackNavigationState<ParamList>,
-	DirectStackNavigationOptions,
-	DirectStackNavigationEventMap
-> &
-	StackActionHelpers<ParamList>;
-
-export type DirectStackNavigationOptions = ScreenTransitionConfig & {
-	enableTransitions?: boolean;
-};
-
-export type DirectStackDescriptor = Descriptor<
-	DirectStackNavigationOptions,
-	DirectStackNavigationProp<ParamListBase>,
-	RouteProp<ParamListBase>
->;
-
-export type DirectStackDescriptorMap = DescriptorMap<DirectStackDescriptor>;
-
-export interface DirectStackScene {
-	route: StackNavigationState<ParamListBase>["routes"][number];
-	descriptor: DirectStackDescriptor;
-	isPreloaded: boolean;
-}
-
-export interface DirectStackProps {
-	state: StackNavigationState<ParamListBase>;
-	navigation: DirectStackNavigationHelpers;
-	descriptors: DirectStackDescriptorMap;
-	describe: (
-		route: RouteProp<ParamListBase>,
-		placeholder: boolean,
-	) => DirectStackDescriptor;
-}
-
-export interface DirectStackContextValue {
-	state: StackNavigationState<ParamListBase>;
-	navigation: DirectStackNavigationHelpers;
-	descriptors: DirectStackDescriptorMap;
-	scenes: DirectStackScene[];
-	focusedIndex: number;
-	shouldShowFloatOverlay: boolean;
-}

package/src/utils/bounds/navigation/math.ts

@@ -1,188 +0,0 @@
-import { clamp, interpolate } from "react-native-reanimated";
-
-type CombinedScaleMode = "multiply" | "average" | "max" | "min";
-
-const lerp = (from: number, to: number, t: number): number => {
-	"worklet";
-	return from + (to - from) * t;
-};
-
-const safeDivide = (
-	numerator: number,
-	denominator: number,
-	fallback = 0,
-): number => {
-	"worklet";
-	if (denominator === 0) return fallback;
-	return numerator / denominator;
-};
-
-const inverseLerp = (value: number, inMin: number, inMax: number): number => {
-	"worklet";
-	return safeDivide(value - inMin, inMax - inMin, 0);
-};
-
-const mapRangeClamped = (
-	value: number,
-	inMin: number,
-	inMax: number,
-	outMin: number,
-	outMax: number,
-): number => {
-	"worklet";
-	const t = clamp(inverseLerp(value, inMin, inMax), 0, 1);
-	return lerp(outMin, outMax, t);
-};
-
-const applyPowerCurve = (value: number, exponent: number): number => {
-	"worklet";
-	const safeExponent = exponent > 0 ? exponent : 1;
-	const magnitude = Math.abs(value) ** safeExponent;
-	return value < 0 ? -magnitude : magnitude;
-};
-
-const normalizedToScale = ({
-	normalized,
-	outputRange,
-	exponent = 1,
-	positiveOnly = true,
-}: {
-	normalized: number;
-	outputRange: readonly [number, number];
-	exponent?: number;
-	positiveOnly?: boolean;
-}): number => {
-	"worklet";
-	const [outputStart, outputEnd] = outputRange;
-	const raw = positiveOnly
-		? mapRangeClamped(normalized, 0, 1, outputStart, outputEnd)
-		: mapRangeClamped(normalized, -1, 1, outputStart, outputEnd);
-
-	return applyPowerCurve(raw, exponent);
-};
-
-export const combineScales = (
-	scaleX: number,
-	scaleY: number,
-	mode: CombinedScaleMode = "multiply",
-): number => {
-	"worklet";
-
-	switch (mode) {
-		case "average":
-			return (scaleX + scaleY) / 2;
-		case "max":
-			return Math.max(scaleX, scaleY);
-		case "min":
-			return Math.min(scaleX, scaleY);
-		default:
-			return scaleX * scaleY;
-	}
-};
-
-export const computeCenterScaleShift = ({
-	center,
-	containerCenter,
-	scale,
-}: {
-	center: number;
-	containerCenter: number;
-	scale: number;
-}): number => {
-	"worklet";
-	return (center - containerCenter) * (scale - 1);
-};
-
-const compensateTranslationForParentScale = ({
-	translation,
-	parentScale,
-	epsilon,
-}: {
-	translation: number;
-	parentScale: number;
-	epsilon: number;
-}): number => {
-	"worklet";
-	const safeParentScale = Math.max(parentScale, epsilon);
-	return safeDivide(translation, safeParentScale, translation);
-};
-
-export const composeCompensatedTranslation = ({
-	gesture,
-	parentScale,
-	centerShift = 0,
-	epsilon,
-}: {
-	gesture: number;
-	parentScale: number;
-	centerShift?: number;
-	epsilon: number;
-}): number => {
-	"worklet";
-	return (
-		compensateTranslationForParentScale({
-			translation: gesture,
-			parentScale,
-			epsilon,
-		}) + centerShift
-	);
-};
-
-export const resolveDirectionalDragScale = ({
-	normalized,
-	dismissDirection,
-	shrinkMin,
-	growMax,
-	exponent,
-}: {
-	normalized: number;
-	dismissDirection: "positive" | "negative";
-	shrinkMin: number;
-	growMax: number;
-	exponent: number;
-}) => {
-	"worklet";
-
-	const dismissalRelative =
-		dismissDirection === "negative" ? -normalized : normalized;
-
-	if (dismissalRelative >= 0) {
-		return normalizedToScale({
-			normalized: dismissalRelative,
-			outputRange: [1, shrinkMin],
-			exponent,
-		});
-	}
-
-	const oppositeDrag = Math.min(1, Math.abs(dismissalRelative));
-	return interpolate(oppositeDrag, [0, 1], [1, growMax], "clamp");
-};
-
-export 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,
-	];
-}) => {
-	"worklet";
-
-	return {
-		inputStart: value?.[0] ?? fallback[0],
-		inputEnd: value?.[1] ?? fallback[1],
-		outputStart: value?.[2] ?? fallback[2] ?? 0,
-		outputEnd: value?.[3] ?? fallback[3] ?? 1,
-	};
-};

package/src/utils/platform.ts

@@ -1,8 +0,0 @@
-/**
- * Detects whether the app is running on React Native's new architecture (Fabric).
- */
-declare const global: typeof globalThis;
-
-export function isFabric(): boolean {
-	return "nativeFabricUIManager" in global;
-}