react-native-screen-transitions 3.1.0 → 3.2.0-beta.1

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/components/controllers/blank-stack-lifecycle.tsx

@@ -1,70 +0,0 @@
-import { useLayoutEffect } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
-import type { BlankStackDescriptor } from "../../../blank-stack/types";
-import { useStackNavigationContext } from "../../../blank-stack/utils/with-stack-navigation";
-import useStableCallback from "../../hooks/use-stable-callback";
-import { useKeys } from "../../providers/keys.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
-import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
-
-export interface Props {
-	children: React.ReactNode;
-}
-
-/**
- * Lifecycle controller built out for Blank Stack implementation.
- */
-export const BlankStackScreenLifecycleController = ({ children }: Props) => {
-	const { current } = useKeys<BlankStackDescriptor>();
-	const { handleCloseRoute, closingRouteKeysShared } =
-		useStackNavigationContext();
-
-	const animations = AnimationStore.getAll(current.route.key);
-
-	const handleInitialize = useStableCallback(() => {
-		startScreenTransition({
-			target: "open",
-			spec: current.options.transitionSpec,
-			animations,
-		});
-	});
-
-	const handleCleanup = useStableCallback(() => {
-		resetStoresForScreen(current);
-	});
-
-	const handleCloseEnd = useStableCallback((finished: boolean) => {
-		if (!finished) {
-			return;
-		}
-		handleCloseRoute({ route: current.route });
-	});
-
-	useAnimatedReaction(
-		() => ({
-			keys: closingRouteKeysShared.value,
-		}),
-		({ keys }) => {
-			if (!keys.includes(current.route.key)) {
-				return;
-			}
-
-			startScreenTransition({
-				target: "close",
-				spec: current.options.transitionSpec,
-				animations,
-				onAnimationFinish: handleCloseEnd,
-			});
-		},
-	);
-
-	useLayoutEffect(() => {
-		handleInitialize();
-		return () => {
-			handleCleanup();
-		};
-	}, [handleInitialize, handleCleanup]);
-
-	return children;
-};

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

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

@@ -1,54 +0,0 @@
-import { useMemo } from "react";
-import {
-	AnimationStore,
-	type AnimationStoreMap,
-} from "../stores/animation.store";
-import createProvider from "../utils/create-provider";
-
-interface RoutesProviderProps {
-	children: React.ReactNode;
-	routeKeys: string[];
-}
-
-interface RoutesContextValue {
-	/**
-	 * Array of route keys for all routes in the stack, in order.
-	 */
-	routeKeys: string[];
-}
-
-const { RoutesProvider, useRoutesContext } = createProvider("Routes", {
-	guarded: false,
-})<RoutesProviderProps, RoutesContextValue>(({ routeKeys }) => ({
-	value: { routeKeys },
-}));
-
-export { RoutesProvider, useRoutesContext };
-
-/**
- * Hook to get animation values for all screens from a given index onwards.
- * Useful for computing accumulated progress across multiple screens.
- */
-export function useStackAnimationValues(
-	currentRouteKey: string | undefined,
-): AnimationStoreMap[] {
-	const routesContext = useRoutesContext();
-
-	return useMemo(() => {
-		if (!currentRouteKey || !routesContext) {
-			return [];
-		}
-
-		const { routeKeys } = routesContext;
-		const currentIndex = routeKeys.indexOf(currentRouteKey);
-
-		if (currentIndex === -1) {
-			return [];
-		}
-
-		// Get animation values for all screens from current index onwards
-		return routeKeys
-			.slice(currentIndex)
-			.map((key) => AnimationStore.getAll(key));
-	}, [currentRouteKey, routesContext]);
-}

package/src/shared/providers/screen-transition.provider.tsx

@@ -1,41 +0,0 @@
-import type React from "react";
-import type { ComponentType } from "react";
-import { RootTransitionAware } from "../components/root-transition-aware";
-import type { Any } from "../types/utils.types";
-import { ScreenGestureProvider } from "./gestures.provider";
-import { KeysProvider, type TransitionDescriptor } from "./keys.provider";
-import { TransitionStylesProvider } from "./transition-styles.provider";
-
-type Props<TDescriptor extends TransitionDescriptor> = {
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-	children: React.ReactNode;
-	LifecycleController: ComponentType<Any>;
-};
-
-export function ScreenTransitionProvider<
-	TDescriptor extends TransitionDescriptor,
->({
-	previous,
-	current,
-	next,
-	children,
-	LifecycleController,
-}: Props<TDescriptor>) {
-	return (
-		<KeysProvider<TDescriptor>
-			previous={previous}
-			current={current}
-			next={next}
-		>
-			<ScreenGestureProvider>
-				<LifecycleController>
-					<TransitionStylesProvider>
-						<RootTransitionAware>{children}</RootTransitionAware>
-					</TransitionStylesProvider>
-				</LifecycleController>
-			</ScreenGestureProvider>
-		</KeysProvider>
-	);
-}

package/src/shared/providers/transition-styles.provider.tsx

@@ -1,74 +0,0 @@
-import { createContext, useContext, useMemo } from "react";
-import { type SharedValue, useDerivedValue } from "react-native-reanimated";
-import { NO_STYLES } from "../constants";
-import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
-import type { TransitionInterpolatedStyle } from "../types/animation.types";
-import { createBounds } from "../utils/bounds";
-
-type Props = {
-	children: React.ReactNode;
-};
-
-type TransitionStylesContextValue = {
-	stylesMap: SharedValue<TransitionInterpolatedStyle>;
-	ancestorStylesMaps: SharedValue<TransitionInterpolatedStyle>[];
-};
-
-export const TransitionStylesContext =
-	createContext<TransitionStylesContextValue | null>(null);
-
-export function TransitionStylesProvider({ children }: Props) {
-	const parentCtx = useContext(TransitionStylesContext);
-
-	const { screenInterpolatorProps, screenStyleInterpolator } =
-		_useScreenAnimation();
-
-	const stylesMap = useDerivedValue<TransitionInterpolatedStyle>(() => {
-		"worklet";
-		const props = screenInterpolatorProps.value;
-		const bounds = createBounds(props);
-		try {
-			if (!screenStyleInterpolator) return NO_STYLES;
-			return screenStyleInterpolator({
-				...props,
-				bounds,
-			});
-		} catch (err) {
-			if (__DEV__) {
-				console.warn(
-					"[react-native-screen-transitions] screenStyleInterpolator must be a worklet",
-					err,
-				);
-			}
-			return NO_STYLES;
-		}
-	});
-
-	const value = useMemo(() => {
-		// Build ancestor chain: [parent, grandparent, great-grandparent, ...]
-		const ancestorStylesMaps = parentCtx
-			? [parentCtx.stylesMap, ...parentCtx.ancestorStylesMaps]
-			: [];
-
-		return {
-			stylesMap,
-			ancestorStylesMaps,
-		};
-	}, [stylesMap, parentCtx]);
-
-	return (
-		<TransitionStylesContext.Provider value={value}>
-			{children}
-		</TransitionStylesContext.Provider>
-	);
-}
-
-export function useTransitionStyles() {
-	const ctx = useContext(TransitionStylesContext);
-	if (!ctx) {
-		throw new Error(
-			"useTransitionStyles must be used within a TransitionStylesProvider",
-		);
-	}
-	return ctx;
-}

package/src/shared/types/utils.types.ts

@@ -1,4 +0,0 @@
-// biome-ignore lint/suspicious/noExplicitAny: <>
-export type Any = any;
-
-export type Complete<T> = { [K in keyof T]-?: Exclude<T[K], undefined> };

package/src/shared/utils/animation/compute-stack-progress.ts

@@ -1,16 +0,0 @@
-import type { AnimationStoreMap } from "../../stores/animation.store";
-
-export const computeStackProgress = (
-	stackAnimationValues: AnimationStoreMap[],
-	fallback: number = 0,
-) => {
-	"worklet";
-	let computedStackProgress: number | undefined;
-	if (stackAnimationValues.length > 0) {
-		computedStackProgress = 0;
-		for (let i = 0; i < stackAnimationValues.length; i += 1) {
-			computedStackProgress += stackAnimationValues[i].progress.value;
-		}
-	}
-	return computedStackProgress ?? fallback;
-};