react-native-screen-transitions 3.6.0 → 3.7.0-beta.0

package/src/shared/components/native-screen.tsx

@@ -1,176 +0,0 @@
-import type * as React from "react";
-import { StyleSheet } from "react-native";
-import Animated, {
-	Extrapolation,
-	interpolate,
-	useAnimatedProps,
-	useDerivedValue,
-	useSharedValue,
-} from "react-native-reanimated";
-import { Screen as RNSScreen } from "react-native-screens";
-import { EPSILON } from "../constants";
-import { useStack } from "../hooks/navigation/use-stack";
-import { useManagedStackContext } from "../providers/stack/managed.provider";
-import { AnimationStore } from "../stores/animation.store";
-
-const PASSTHROUGH = "passthrough";
-
-interface ScreenProps {
-	routeKey: string;
-	index: number;
-	isPreloaded: boolean;
-	children: React.ReactNode;
-	freezeOnBlur?: boolean;
-	shouldFreeze?: boolean;
-}
-enum ScreenActivity {
-	INACTIVE = 0,
-	TRANSITIONING_OR_BELOW_TOP = 1,
-	ON_TOP = 2,
-}
-
-const POINT_NONE = "none" as const;
-const POINT_BOX_NONE = "box-none" as const;
-
-const AnimatedNativeScreen = Animated.createAnimatedComponent(RNSScreen);
-
-export const NativeScreen = ({
-	routeKey,
-	index,
-	isPreloaded,
-	children,
-	freezeOnBlur,
-	shouldFreeze,
-}: ScreenProps) => {
-	const {
-		flags: { DISABLE_NATIVE_SCREENS = false },
-		routes,
-		optimisticFocusedIndex,
-	} = useStack();
-	const { activeScreensLimit, backdropBehaviors } = useManagedStackContext();
-
-	const routesLength = routes.length;
-	const topIndex = routesLength - 1;
-	const topRouteKey = routes[topIndex]?.key ?? routeKey;
-
-	const sceneClosing = AnimationStore.getValue(routeKey, "closing");
-	const topSceneProgress = AnimationStore.getValue(topRouteKey, "progress");
-	const topSceneClosing = AnimationStore.getValue(topRouteKey, "closing");
-	const screenActivity = useSharedValue<ScreenActivity>(
-		ScreenActivity.TRANSITIONING_OR_BELOW_TOP,
-	);
-
-	useDerivedValue(() => {
-		if (!topSceneProgress) {
-			screenActivity.set(ScreenActivity.TRANSITIONING_OR_BELOW_TOP);
-			return;
-		}
-
-		if (index < routesLength - activeScreensLimit - 1 || isPreloaded) {
-			screenActivity.set(ScreenActivity.INACTIVE);
-			return;
-		}
-
-		const focusedIndex = optimisticFocusedIndex.get();
-		const topIsClosing =
-			topSceneClosing.get() > 0 && focusedIndex >= 0 && focusedIndex < topIndex;
-
-		if (topIsClosing) {
-			const postCloseActiveStart = Math.max(
-				0,
-				focusedIndex - activeScreensLimit + 1,
-			);
-			const next =
-				index === topIndex
-					? ScreenActivity.ON_TOP
-					: index > focusedIndex || index >= postCloseActiveStart
-						? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
-						: ScreenActivity.INACTIVE;
-
-			if (next !== screenActivity.get()) {
-				screenActivity.set(next);
-			}
-			return;
-		}
-
-		const outputValue =
-			index === topIndex
-				? ScreenActivity.ON_TOP
-				: index >= routesLength - activeScreensLimit
-					? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
-					: ScreenActivity.INACTIVE;
-
-		const v = interpolate(
-			topSceneProgress.get(),
-			[0, 1 - EPSILON, 1],
-			[1, 1, outputValue],
-			Extrapolation.CLAMP,
-		);
-
-		const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
-
-		if (next !== screenActivity.get()) {
-			screenActivity.set(next);
-		}
-	});
-
-	const animatedProps = useAnimatedProps(() => {
-		const activity = screenActivity.get();
-		const isClosing = sceneClosing.get() > 0;
-		const activeIndex = optimisticFocusedIndex.get();
-		const isActive = index === activeIndex;
-
-		// Check if the active screen allows passthrough to the screen below
-		const activeBackdrop = backdropBehaviors[activeIndex] ?? "block";
-		const activeAllowsPassthrough = activeBackdrop === PASSTHROUGH;
-		const isAllowedPassthroughBelow =
-			activeAllowsPassthrough && index === activeIndex - 1;
-
-		// Determine pointer events:
-		// - "none" if closing (immediately disable touches)
-		// - "box-none" if this is the active screen
-		// - "box-none" if the active screen allows passthrough and we're immediately below
-		// - "none" otherwise (block touches to non-active screens)
-		const pointerEvents =
-			isClosing || (!isActive && !isAllowedPassthroughBelow)
-				? POINT_NONE
-				: POINT_BOX_NONE;
-
-		if (!DISABLE_NATIVE_SCREENS) {
-			return {
-				activityState: activity,
-				shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
-				pointerEvents,
-			};
-		}
-
-		return {
-			pointerEvents,
-		};
-	});
-
-	if (DISABLE_NATIVE_SCREENS) {
-		return (
-			<Animated.View
-				// Keep a native boundary per screen when falling back to plain views.
-				// Android release builds can otherwise flatten sibling screens together.
-				collapsable={false}
-				style={StyleSheet.absoluteFill}
-				animatedProps={animatedProps}
-			>
-				{children}
-			</Animated.View>
-		);
-	}
-
-	return (
-		<AnimatedNativeScreen
-			enabled
-			style={StyleSheet.absoluteFill}
-			freezeOnBlur={freezeOnBlur}
-			animatedProps={animatedProps}
-		>
-			{children}
-		</AnimatedNativeScreen>
-	);
-};

package/src/shared/providers/stack/helpers/use-local-routes/helpers/align-routes-with-latest.ts

@@ -1,65 +0,0 @@
-import type { RouteWithKey } from "../../../../../types/stack.types";
-import { composeDescriptors } from "../../../../../utils/navigation/compose-descriptors";
-
-/**
- * Aligns current routes with the latest route data while preserving references
- * when possible for performance optimization
- */
-export const alignRoutesWithLatest = <
-	Route extends RouteWithKey,
-	DescriptorMap extends Record<string, unknown>,
->(
-	currentRoutes: Route[],
-	currentDescriptors: DescriptorMap,
-	nextRoutes: Route[],
-	nextDescriptors: DescriptorMap,
-): { routes: Route[]; descriptors: DescriptorMap } => {
-	// 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>();
-	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,
-		),
-	};
-};

package/src/shared/providers/stack/helpers/use-local-routes/helpers/are-descriptors-equal.ts

@@ -1,15 +0,0 @@
-export const areDescriptorsEqual = <
-	DescriptorMap extends Record<string, unknown>,
->(
-	a: DescriptorMap,
-	b: DescriptorMap,
-): boolean => {
-	if (a === b) return true;
-
-	const aKeys = Object.keys(a);
-	const bKeys = Object.keys(b);
-
-	if (aKeys.length !== bKeys.length) return false;
-
-	return aKeys.every((key) => a[key] === b[key]);
-};

package/src/shared/providers/stack/helpers/use-local-routes/helpers/have-same-route-keys.ts

@@ -1,12 +0,0 @@
-import type { RouteWithKey } from "../../../../../types/stack.types";
-
-export const haveSameRouteKeys = <Route extends RouteWithKey>(
-	previous: Route[],
-	next: Route[],
-): boolean => {
-	if (previous.length !== next.length) {
-		return false;
-	}
-
-	return previous.every((route, index) => route?.key === next[index]?.key);
-};

package/src/shared/providers/stack/helpers/use-local-routes/helpers/routes-are-identical.ts

@@ -1,11 +0,0 @@
-import type { RouteWithKey } from "../../../../../types/stack.types";
-
-export const routesAreIdentical = <Route extends RouteWithKey>(
-	a: Route[],
-	b: Route[],
-): boolean => {
-	if (a === b) return true;
-	if (a.length !== b.length) return false;
-
-	return a.every((route, index) => route === b[index]);
-};

package/src/shared/providers/stack/helpers/use-local-routes/index.ts

@@ -1,147 +0,0 @@
-import { StackActions } from "@react-navigation/native";
-import { useLayoutEffect, useRef, useState } from "react";
-import { useClosingRouteKeys } from "../../../../hooks/navigation/use-closing-route-keys";
-import { usePrevious } from "../../../../hooks/navigation/use-previous";
-import useStableCallback from "../../../../hooks/use-stable-callback";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-} from "../../../../types/stack.types";
-import { syncRoutesWithRemoved } from "../../../../utils/navigation/sync-routes-with-removed";
-import type { ManagedStackProps } from "../../managed.provider";
-import { alignRoutesWithLatest } from "./helpers/align-routes-with-latest";
-import { areDescriptorsEqual } from "./helpers/are-descriptors-equal";
-import { haveSameRouteKeys } from "./helpers/have-same-route-keys";
-import { routesAreIdentical } from "./helpers/routes-are-identical";
-
-export const useLocalRoutes = <
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	props: ManagedStackProps<TDescriptor, TNavigation>,
-) => {
-	type TRoute = TDescriptor["route"];
-	type TDescriptorMap = Record<string, TDescriptor>;
-
-	const previousRoutes = usePrevious(props.state.routes) ?? [];
-	const closingRouteKeys = useClosingRouteKeys();
-
-	const [localState, setLocalState] = useState(() => ({
-		routes: props.state.routes as TRoute[],
-		descriptors: props.descriptors as TDescriptorMap,
-	}));
-	const localStateRef = useRef(localState);
-
-	useLayoutEffect(() => {
-		const nextRoutesSnapshot = props.state.routes;
-		const previousRoutesSnapshot = previousRoutes;
-		const current = localStateRef.current;
-
-		const alreadyAligned =
-			routesAreIdentical(current.routes, nextRoutesSnapshot as TRoute[]) &&
-			areDescriptorsEqual(
-				current.descriptors,
-				props.descriptors as TDescriptorMap,
-			);
-		if (alreadyAligned) {
-			return;
-		}
-
-		const routeKeysUnchanged = haveSameRouteKeys(
-			previousRoutesSnapshot,
-			nextRoutesSnapshot,
-		);
-
-		let derivedRoutes: TRoute[];
-		let derivedDescriptors: TDescriptorMap;
-
-		if (routeKeysUnchanged) {
-			const result = alignRoutesWithLatest(
-				current.routes,
-				current.descriptors,
-				nextRoutesSnapshot,
-				props.descriptors,
-			);
-
-			derivedRoutes = result.routes as TRoute[];
-			derivedDescriptors = result.descriptors as TDescriptorMap;
-		} 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 as TRoute[];
-			derivedDescriptors = result.descriptors as TDescriptorMap;
-		}
-
-		const routesChanged = !routesAreIdentical(current.routes, derivedRoutes);
-		const descriptorsChanged = !areDescriptorsEqual(
-			current.descriptors,
-			derivedDescriptors,
-		);
-
-		if (!routesChanged && !descriptorsChanged) {
-			return;
-		}
-
-		const nextLocalState = {
-			routes: routesChanged ? derivedRoutes : current.routes,
-			descriptors: descriptorsChanged
-				? derivedDescriptors
-				: current.descriptors,
-		};
-		localStateRef.current = nextLocalState;
-		setLocalState(nextLocalState);
-	}, [props.state.routes, props.descriptors, previousRoutes, closingRouteKeys]);
-
-	const handleCloseRoute = useStableCallback(
-		({ route }: { route: BaseStackRoute }) => {
-			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];
-
-				const nextState = {
-					routes: nextRoutes,
-					descriptors: nextDescriptors,
-				};
-				localStateRef.current = nextState;
-				return nextState;
-			});
-		},
-	);
-
-	return {
-		state: localState,
-		handleCloseRoute,
-		closingRouteKeys,
-	};
-};