react-native-screen-transitions 3.0.0 → 3.2.0-beta.0

package/lib/typescript/shared/utils/reanimated/version.d.ts

@@ -1,2 +0,0 @@
-export declare const isReanimated4: () => boolean;
-//# sourceMappingURL=version.d.ts.map

package/lib/typescript/shared/utils/reanimated/version.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/reanimated/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,eAEzB,CAAC"}

package/src/blank-stack/components/overlay.tsx

@@ -1,169 +0,0 @@
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "@react-navigation/native";
-import { useMemo } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import { useScreenAnimation } from "../../shared/hooks/animation/use-screen-animation";
-import { KeysProvider, useKeys } from "../../shared/providers/keys.provider";
-import { TransitionStylesProvider } from "../../shared/providers/transition-styles.provider";
-import { useOverlayAnimation } from "../hooks/use-overlay-animation";
-import type {
-	BlankStackDescriptor,
-	BlankStackOverlayProps,
-	BlankStackScene,
-} from "../types";
-import { useStackNavigationContext } from "../utils/with-stack-navigation";
-
-type OverlayHostProps = {
-	scene: BlankStackScene;
-	isFloating?: boolean;
-};
-
-const getActiveFloatOverlay = (scenes: BlankStackScene[], index: number) => {
-	if (scenes.length === 0) {
-		return null;
-	}
-
-	// When navigating back, closing scenes are kept at the top of the local stack
-	// while the focused index already points to the destination screen. We need to
-	// start scanning from the actual top of the stack so the overlay can animate
-	// out together with its closing screen instead of disappearing immediately.
-	const startIndex = Math.max(index, scenes.length - 1);
-
-	for (let i = startIndex; i >= 0; i--) {
-		const scene = scenes[i];
-		const options = scene?.descriptor?.options;
-
-		if (options?.overlayMode === "float" && options?.overlayShown) {
-			return { scene, overlayIndex: i };
-		}
-	}
-
-	return null;
-};
-
-const OverlayHost = ({ scene, isFloating }: OverlayHostProps) => {
-	const OverlayComponent = scene.descriptor.options.overlay;
-
-	const { overlayAnimation, optimisticActiveIndex } = useOverlayAnimation();
-	const { scenes, routes } = useStackNavigationContext();
-
-	const overlaySceneIndex = useMemo(() => {
-		return scenes.findIndex(
-			(stackScene) => stackScene.route.key === scene.route.key,
-		);
-	}, [scenes, scene.route.key]);
-
-	const focusedScene = useMemo(() => {
-		if (overlaySceneIndex === -1) {
-			return scene;
-		}
-
-		const maxOffset = Math.max(scenes.length - overlaySceneIndex - 1, 0);
-		const normalizedIndex = Math.min(
-			Math.max(optimisticActiveIndex, 0),
-			maxOffset,
-		);
-
-		return scenes[overlaySceneIndex + normalizedIndex] ?? scene;
-	}, [overlaySceneIndex, optimisticActiveIndex, scenes, scene]);
-
-	const screenAnimation = useScreenAnimation();
-
-	if (!OverlayComponent) {
-		return null;
-	}
-
-	const overlayProps: BlankStackOverlayProps = {
-		routes,
-		overlayAnimation,
-		screenAnimation,
-		focusedRoute: focusedScene.route,
-		focusedIndex: optimisticActiveIndex,
-		meta: focusedScene.descriptor.options.meta,
-		navigation: scene.descriptor.navigation,
-	};
-
-	return (
-		<Animated.View
-			pointerEvents="box-none"
-			style={[
-				styles.container,
-				isFloating ? styles.floating : { zIndex: 1 },
-				styles.absolute,
-			]}
-		>
-			<NavigationContext.Provider value={scene.descriptor.navigation}>
-				<NavigationRouteContext.Provider value={scene.route}>
-					<View pointerEvents="box-none" style={styles.overlay}>
-						<OverlayComponent {...overlayProps} />
-					</View>
-				</NavigationRouteContext.Provider>
-			</NavigationContext.Provider>
-		</Animated.View>
-	);
-};
-
-const FloatOverlay = () => {
-	const { scenes, focusedIndex } = useStackNavigationContext();
-
-	const activeOverlay = useMemo(
-		() => getActiveFloatOverlay(scenes, focusedIndex),
-		[scenes, focusedIndex],
-	);
-
-	if (!activeOverlay) {
-		return null;
-	}
-
-	const { scene, overlayIndex } = activeOverlay;
-
-	const previous = scenes[overlayIndex - 1]?.descriptor;
-	const current = scene.descriptor;
-	const next = scenes[overlayIndex + 1]?.descriptor;
-
-	return (
-		<KeysProvider current={current} previous={previous} next={next}>
-			<TransitionStylesProvider>
-				<OverlayHost scene={scene} isFloating />
-			</TransitionStylesProvider>
-		</KeysProvider>
-	);
-};
-
-const ScreenOverlay = () => {
-	const { current } = useKeys<BlankStackDescriptor>();
-
-	const options = current.options;
-
-	if (!options.overlayShown || options.overlayMode !== "screen") {
-		return null;
-	}
-
-	const scene: BlankStackScene = {
-		descriptor: current,
-		route: current.route,
-	};
-
-	return <OverlayHost scene={scene} />;
-};
-
-export const Overlay = {
-	Float: FloatOverlay,
-	Screen: ScreenOverlay,
-};
-
-const styles = StyleSheet.create({
-	overlay: {
-		...StyleSheet.absoluteFillObject,
-		zIndex: 1,
-	},
-	container: {
-		flex: 1,
-	},
-	absolute: StyleSheet.absoluteFillObject,
-	floating: {
-		zIndex: 1000,
-	},
-});

package/src/blank-stack/hooks/use-overlay-animation.tsx

@@ -1,86 +0,0 @@
-import { useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useSharedValueState } from "../../shared/hooks/reanimated/use-shared-value-state";
-import { useKeys } from "../../shared/providers/keys.provider";
-import { AnimationStore } from "../../shared/stores/animation.store";
-import type { OverlayInterpolationProps } from "../../shared/types/animation.types";
-import { useStackNavigationContext } from "../utils/with-stack-navigation";
-
-/**
- * Aggregates progress values for the overlay owner and every scene that sits
- * above it in the stack. The result can be consumed by floating overlays to
- * drive animations that span multiple screens.
- */
-export const useOverlayAnimation = (): {
-	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
-	optimisticActiveIndex: number;
-} => {
-	const { current } = useKeys();
-	const { scenes } = useStackNavigationContext();
-	const routeKey = current?.route?.key;
-
-	const progressValues = useMemo(() => {
-		if (!routeKey) {
-			return [];
-		}
-
-		const overlayIndex = scenes.findIndex(
-			(scene) => scene.route.key === routeKey,
-		);
-
-		if (overlayIndex === -1) {
-			return [];
-		}
-
-		return scenes.slice(overlayIndex).map((scene) => {
-			return AnimationStore.getAll(scene.route.key);
-		});
-	}, [routeKey, scenes]);
-
-	const accumulatedProgress = useDerivedValue(() => {
-		"worklet";
-
-		let total = 0;
-
-		for (let i = 0; i < progressValues.length; i += 1) {
-			total += progressValues[i].progress.value;
-		}
-
-		return total;
-	}, [progressValues]);
-
-	const optimisticActiveIndex = useSharedValueState(
-		useDerivedValue(() => {
-			"worklet";
-
-			const activeIndex = progressValues.length - 1;
-
-			const isOneDismissing = Number(
-				progressValues.some((value) => value.closing.value > 0),
-			);
-
-			const optimisticIndex = activeIndex - isOneDismissing;
-
-			return optimisticIndex;
-		}),
-	);
-
-	const screen = useWindowDimensions();
-
-	const insets = useSafeAreaInsets();
-
-	const overlayAnimation = useDerivedValue<OverlayInterpolationProps>(() => ({
-		progress: accumulatedProgress.value,
-		layouts: {
-			screen,
-		},
-		insets,
-	}));
-
-	return {
-		overlayAnimation,
-		optimisticActiveIndex,
-	};
-};

package/src/blank-stack/utils/with-stack-navigation/helpers/compose-descriptors.ts

@@ -1,17 +0,0 @@
-import type { Route } from "@react-navigation/native";
-import type { BlankStackDescriptorMap } from "../../../types";
-
-export const composeDescriptors = (
-	routes: Route<string>[],
-	nextDescriptors: BlankStackDescriptorMap,
-	currentDescriptors: BlankStackDescriptorMap,
-): BlankStackDescriptorMap => {
-	const composed: BlankStackDescriptorMap = {};
-
-	for (const route of routes) {
-		composed[route.key] =
-			nextDescriptors[route.key] ?? currentDescriptors[route.key];
-	}
-
-	return composed;
-};

package/src/blank-stack/utils/with-stack-navigation/hooks/use-stack-navigation-state.tsx

@@ -1,267 +0,0 @@
-import { type Route, StackActions } from "@react-navigation/native";
-import { useLayoutEffect, useState } from "react";
-import useStableCallback from "../../../../shared/hooks/use-stable-callback";
-import type { BlankStackDescriptorMap } from "../../../types";
-import { areDescriptorsEqual } from "../helpers/are-descriptors-equal";
-import { composeDescriptors } from "../helpers/compose-descriptors";
-import { haveSameRouteKeys } from "../helpers/have-same-route-keys";
-import { routesAreIdentical } from "../helpers/routes-are-identical";
-import type { StackNavigationContextProps } from "../types";
-import { useClosingRouteKeys } from "./use-closing-route-keys";
-import { usePrevious } from "./use-previous";
-
-type SyncRoutesWithRemovedParams = {
-	prevRoutes: Route<string>[];
-	prevDescriptors: BlankStackDescriptorMap;
-	nextRoutes: Route<string>[];
-	nextDescriptors: BlankStackDescriptorMap;
-	closingRouteKeys: ReturnType<typeof useClosingRouteKeys>;
-};
-
-/**
- * Aligns current routes with the latest route data while preserving references
- * when possible for performance optimization
- */
-const alignRoutesWithLatest = (
-	currentRoutes: Route<string>[],
-	currentDescriptors: BlankStackDescriptorMap,
-	nextRoutes: Route<string>[],
-	nextDescriptors: BlankStackDescriptorMap,
-) => {
-	// Early return for empty current routes
-	if (currentRoutes.length === 0) {
-		return {
-			routes: nextRoutes,
-			descriptors: composeDescriptors(
-				nextRoutes,
-				nextDescriptors,
-				currentDescriptors,
-			),
-		};
-	}
-
-	// Create lookup map for efficient route finding
-	const nextRouteLookup = new Map<string, Route<string>>();
-	for (const route of nextRoutes) {
-		nextRouteLookup.set(route.key, route);
-	}
-
-	// Track if any changes occurred
-	let didChange = currentRoutes.length !== nextRoutes.length;
-
-	// Align routes, updating references where needed
-	const alignedRoutes = currentRoutes.map((route) => {
-		const nextRoute = nextRouteLookup.get(route.key);
-
-		if (!nextRoute) {
-			return route; // Keep current route if not in next
-		}
-
-		if (nextRoute !== route) {
-			didChange = true;
-			return nextRoute; // Update to new route reference
-		}
-
-		return route; // Keep current route reference
-	});
-
-	// Only create new array if changes occurred
-	const routesResult = didChange ? alignedRoutes : currentRoutes;
-
-	return {
-		routes: routesResult,
-		descriptors: composeDescriptors(
-			routesResult,
-			nextDescriptors,
-			currentDescriptors,
-		),
-	};
-};
-
-/**
- * Synchronizes routes while handling removed routes that may still be animating out.
- * This manages the complex logic of keeping closing routes visible during transitions.
- */
-const syncRoutesWithRemoved = ({
-	prevRoutes,
-	prevDescriptors,
-	nextRoutes,
-	nextDescriptors,
-	closingRouteKeys,
-}: SyncRoutesWithRemovedParams) => {
-	if (nextRoutes.length === 0) {
-		closingRouteKeys.clear();
-		return {
-			routes: nextRoutes,
-			descriptors: {},
-		};
-	}
-
-	// Start with next routes, will mutate if needed
-	const derivedRoutes: Route<string>[] = nextRoutes.slice();
-
-	// Get focused (last) routes for comparison
-	const previousFocusedRoute = prevRoutes[prevRoutes.length - 1];
-	const nextFocusedRoute = nextRoutes[nextRoutes.length - 1];
-
-	// Handle focus changes between routes
-	if (
-		previousFocusedRoute &&
-		nextFocusedRoute &&
-		previousFocusedRoute.key !== nextFocusedRoute.key
-	) {
-		const nextRouteWasPresent = prevRoutes.some(
-			(route) => route.key === nextFocusedRoute.key,
-		);
-		const previousRouteStillPresent = nextRoutes.some(
-			(route) => route.key === previousFocusedRoute.key,
-		);
-
-		if (nextRouteWasPresent && !previousRouteStillPresent) {
-			// Previous route was removed, mark as closing
-			closingRouteKeys.add(previousFocusedRoute.key);
-
-			derivedRoutes.push(previousFocusedRoute);
-		} else {
-			// Next route is now active, not closing
-			closingRouteKeys.remove(nextFocusedRoute.key);
-
-			if (!previousRouteStillPresent) {
-				// Previous route needs to be inserted for transition
-				closingRouteKeys.remove(previousFocusedRoute.key);
-
-				const insertIndex = Math.max(derivedRoutes.length - 1, 0);
-				derivedRoutes.splice(insertIndex, 0, previousFocusedRoute);
-			}
-		}
-	} else if (nextFocusedRoute) {
-		// Same focused route, ensure it's not marked as closing
-		closingRouteKeys.remove(nextFocusedRoute.key);
-	}
-
-	// Clean up closing keys that are no longer in the route list
-	const activeKeys = new Set(derivedRoutes.map((route) => route.key));
-	for (const key of Array.from(closingRouteKeys.ref.current)) {
-		if (!activeKeys.has(key)) {
-			closingRouteKeys.remove(key);
-		}
-	}
-
-	return {
-		routes: derivedRoutes,
-		descriptors: composeDescriptors(
-			derivedRoutes,
-			nextDescriptors,
-			prevDescriptors,
-		),
-	};
-};
-
-export const useStackNavigationState = (props: StackNavigationContextProps) => {
-	const previousRoutes = usePrevious(props.state.routes) ?? [];
-	const closingRouteKeys = useClosingRouteKeys();
-
-	const [localState, setLocalState] = useState(() => ({
-		routes: props.state.routes,
-		descriptors: props.descriptors,
-	}));
-
-	useLayoutEffect(() => {
-		const nextRoutesSnapshot = props.state.routes;
-		const previousRoutesSnapshot = previousRoutes;
-
-		setLocalState((current) => {
-			const routeKeysUnchanged = haveSameRouteKeys(
-				previousRoutesSnapshot,
-				nextRoutesSnapshot,
-			);
-
-			let derivedRoutes: Route<string>[];
-			let derivedDescriptors: BlankStackDescriptorMap;
-
-			if (routeKeysUnchanged) {
-				const result = alignRoutesWithLatest(
-					current.routes,
-					current.descriptors,
-					nextRoutesSnapshot,
-					props.descriptors,
-				);
-
-				derivedRoutes = result.routes;
-				derivedDescriptors = result.descriptors;
-			} else {
-				const fallbackRoutes =
-					previousRoutesSnapshot.length > 0
-						? previousRoutesSnapshot
-						: current.routes;
-
-				const result = syncRoutesWithRemoved({
-					prevRoutes: fallbackRoutes,
-					prevDescriptors: current.descriptors,
-					nextRoutes: nextRoutesSnapshot,
-					nextDescriptors: props.descriptors,
-					closingRouteKeys,
-				});
-
-				derivedRoutes = result.routes;
-				derivedDescriptors = result.descriptors;
-			}
-
-			const routesChanged = !routesAreIdentical(current.routes, derivedRoutes);
-			const descriptorsChanged = !areDescriptorsEqual(
-				current.descriptors,
-				derivedDescriptors,
-			);
-
-			if (!routesChanged && !descriptorsChanged) {
-				return current;
-			}
-
-			return {
-				routes: routesChanged ? derivedRoutes : current.routes,
-				descriptors: descriptorsChanged
-					? derivedDescriptors
-					: current.descriptors,
-			};
-		});
-	}, [props.state.routes, props.descriptors, previousRoutes, closingRouteKeys]);
-
-	const handleCloseRoute = useStableCallback(
-		({ route }: { route: Route<string> }) => {
-			if (props.state.routes.some((r) => r.key === route.key)) {
-				props.navigation.dispatch({
-					...StackActions.pop(),
-					source: route.key,
-					target: props.state.key,
-				});
-				return;
-			}
-
-			closingRouteKeys.remove(route.key);
-
-			setLocalState((current) => {
-				if (!current.routes.some((candidate) => candidate.key === route.key)) {
-					return current;
-				}
-
-				const nextRoutes = current.routes.filter(
-					(candidate) => candidate.key !== route.key,
-				);
-
-				const nextDescriptors = { ...current.descriptors };
-				delete nextDescriptors[route.key];
-
-				return {
-					routes: nextRoutes,
-					descriptors: nextDescriptors,
-				};
-			});
-		},
-	);
-
-	return {
-		state: localState,
-		handleCloseRoute,
-		closingRouteKeys,
-	};
-};

package/src/blank-stack/utils/with-stack-navigation/index.tsx

@@ -1,74 +0,0 @@
-import { useMemo } from "react";
-import createProvider from "../../../shared/utils/create-provider";
-import type { BlankStackScene } from "../../types";
-import { calculateActiveScreensLimit } from "./helpers/calculate-active-screens-limit";
-import { useStackNavigationState } from "./hooks/use-stack-navigation-state";
-import type {
-	StackNavigationContextProps,
-	StackNavigationContextValue,
-} from "./types";
-
-const { withStackNavigationProvider, useStackNavigationContext } =
-	createProvider("StackNavigation")<
-		StackNavigationContextProps,
-		StackNavigationContextValue
-	>((props) => {
-		const { state, handleCloseRoute, closingRouteKeys } =
-			useStackNavigationState(props);
-
-		const { scenes, activeScreensLimit, shouldShowFloatOverlay } =
-			useMemo(() => {
-				const scenes: BlankStackScene[] = [];
-				let shouldShowFloatOverlay = false;
-
-				for (const route of state.routes) {
-					const descriptor = state.descriptors[route.key];
-					scenes.push({ route, descriptor });
-
-					if (!shouldShowFloatOverlay) {
-						const options = descriptor?.options;
-						shouldShowFloatOverlay =
-							options?.overlayMode === "float" &&
-							options?.overlayShown === true;
-					}
-				}
-
-				return {
-					scenes,
-					activeScreensLimit: calculateActiveScreensLimit(
-						state.routes,
-						state.descriptors,
-					),
-					shouldShowFloatOverlay,
-				};
-			}, [state.routes, state.descriptors]);
-
-		const value = useMemo(
-			() => ({
-				routes: state.routes,
-				focusedIndex: props.state.index,
-				descriptors: state.descriptors,
-				closingRouteKeysShared: closingRouteKeys.shared,
-				activeScreensLimit,
-				handleCloseRoute,
-				scenes,
-				shouldShowFloatOverlay,
-			}),
-			[
-				state.routes,
-				state.descriptors,
-				props.state.index,
-				closingRouteKeys.shared,
-				activeScreensLimit,
-				handleCloseRoute,
-				scenes,
-				shouldShowFloatOverlay,
-			],
-		);
-
-		return {
-			value,
-		};
-	});
-
-export { useStackNavigationContext, withStackNavigationProvider };

package/src/blank-stack/utils/with-stack-navigation/types.ts

@@ -1,35 +0,0 @@
-import type {
-	NavigationRoute,
-	ParamListBase,
-	Route,
-	RouteProp,
-	StackNavigationState,
-} from "@react-navigation/native";
-import type { SharedValue } from "react-native-reanimated";
-import type {
-	BlankStackDescriptor,
-	BlankStackDescriptorMap,
-	BlankStackNavigationHelpers,
-	BlankStackScene,
-} from "../../types";
-
-export interface StackNavigationContextValue {
-	routes: NavigationRoute<ParamListBase, string>[];
-	descriptors: BlankStackDescriptorMap;
-	scenes: BlankStackScene[];
-	activeScreensLimit: number;
-	closingRouteKeysShared: SharedValue<string[]>;
-	handleCloseRoute: (payload: { route: Route<string> }) => void;
-	shouldShowFloatOverlay: boolean;
-	focusedIndex: number;
-}
-
-export interface StackNavigationContextProps {
-	state: StackNavigationState<ParamListBase>;
-	navigation: BlankStackNavigationHelpers;
-	descriptors: BlankStackDescriptorMap;
-	describe: (
-		route: RouteProp<ParamListBase>,
-		placeholder: boolean,
-	) => BlankStackDescriptor;
-}

package/src/native-stack/views/FooterComponent.tsx

@@ -1,10 +0,0 @@
-import type React from "react";
-import { ScreenFooter } from "react-native-screens";
-
-type FooterProps = {
-	children?: React.ReactNode;
-};
-
-export function FooterComponent({ children }: FooterProps) {
-	return <ScreenFooter collapsable={false}>{children}</ScreenFooter>;
-}

package/src/shared/providers/flags.provider.tsx

@@ -1,21 +0,0 @@
-import createProvider from "../utils/create-provider";
-
-interface FlagsValue {
-	TRANSITIONS_ALWAYS_ON: boolean;
-}
-
-interface FlagsProviderProps {
-	TRANSITIONS_ALWAYS_ON?: boolean;
-	children: React.ReactNode;
-}
-
-const { FlagsProvider, useFlagsContext } = createProvider("Flags", {
-	guarded: false,
-})<FlagsProviderProps, FlagsValue>(
-	({ TRANSITIONS_ALWAYS_ON = false, children }) => ({
-		value: { TRANSITIONS_ALWAYS_ON },
-		children,
-	}),
-);
-
-export { FlagsProvider, useFlagsContext };