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

package/src/shared/providers/{transition-styles.provider.tsx → screen/styles.provider.tsx}

@@ -1,24 +1,25 @@
 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";
+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 = {
+type ScreenStylesContextValue = {
 	stylesMap: SharedValue<TransitionInterpolatedStyle>;
 	ancestorStylesMaps: SharedValue<TransitionInterpolatedStyle>[];
 };
 
-export const TransitionStylesContext =
-	createContext<TransitionStylesContextValue | null>(null);
+const ScreenStylesContext = createContext<ScreenStylesContextValue | null>(
+	null,
+);
 
-export function TransitionStylesProvider({ children }: Props) {
-	const parentCtx = useContext(TransitionStylesContext);
+export function ScreenStylesProvider({ children }: Props) {
+	const parentCtx = useContext(ScreenStylesContext);
 
 	const { screenInterpolatorProps, screenStyleInterpolator } =
 		_useScreenAnimation();
@@ -57,14 +58,14 @@ export function TransitionStylesProvider({ children }: Props) {
 	}, [stylesMap, parentCtx]);
 
 	return (
-		<TransitionStylesContext.Provider value={value}>
+		<ScreenStylesContext.Provider value={value}>
 			{children}
-		</TransitionStylesContext.Provider>
+		</ScreenStylesContext.Provider>
 	);
 }
 
-export function useTransitionStyles() {
-	const ctx = useContext(TransitionStylesContext);
+export function useScreenStyles() {
+	const ctx = useContext(ScreenStylesContext);
 	if (!ctx) {
 		throw new Error(
 			"useTransitionStyles must be used within a TransitionStylesProvider",

package/src/shared/providers/stack/core.provider.tsx

@@ -0,0 +1,64 @@
+import { SafeAreaProviderCompat } from "@react-navigation/elements";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import createProvider from "../../utils/create-provider";
+
+interface StackCoreConfig {
+	TRANSITIONS_ALWAYS_ON?: boolean;
+}
+
+interface StackCoreProviderProps {
+	config: StackCoreConfig;
+	children: React.ReactNode;
+}
+
+interface StackCoreContextValue {
+	flags: {
+		TRANSITIONS_ALWAYS_ON: boolean;
+	};
+}
+
+const { StackCoreProvider: InternalStackCoreProvider } = createProvider(
+	"StackCore",
+	{ guarded: true },
+)<StackCoreProviderProps, StackCoreContextValue>(({ config, children }) => {
+	const { TRANSITIONS_ALWAYS_ON = false } = config;
+
+	const value = React.useMemo(
+		() => ({
+			flags: { TRANSITIONS_ALWAYS_ON },
+		}),
+		[TRANSITIONS_ALWAYS_ON],
+	);
+
+	return {
+		value,
+		children: (
+			<GestureHandlerRootView style={styles.container}>
+				<SafeAreaProviderCompat>{children}</SafeAreaProviderCompat>
+			</GestureHandlerRootView>
+		),
+	};
+});
+
+/**
+ * HOC that wraps a component with the StackCore provider.
+ * Just a simple open gate
+ */
+export function withStackCore<TProps extends object>(
+	config: StackCoreConfig,
+	Component: React.ComponentType<TProps>,
+): React.FC<TProps> {
+	return function StackCoreWrapper(props: TProps) {
+		return (
+			<InternalStackCoreProvider config={config}>
+				<Component {...props} />
+			</InternalStackCoreProvider>
+		);
+	};
+}
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

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

@@ -0,0 +1,228 @@
+import type {
+	ParamListBase,
+	RouteProp,
+	StackNavigationState,
+} from "@react-navigation/native";
+import * as React from "react";
+import { useMemo } from "react";
+import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
+import type {
+	NativeStackDescriptor,
+	NativeStackDescriptorMap,
+	NativeStackNavigationHelpers,
+} from "../../../native-stack/types";
+import {
+	StackContext,
+	type StackContextValue,
+} from "../../hooks/navigation/use-stack";
+import { AnimationStore } from "../../stores/animation.store";
+
+export interface DirectStackScene {
+	route: StackNavigationState<ParamListBase>["routes"][number];
+	descriptor: NativeStackDescriptor;
+	isPreloaded: boolean;
+}
+
+export interface DirectStackProps {
+	state: StackNavigationState<ParamListBase>;
+	navigation: NativeStackNavigationHelpers;
+	descriptors: NativeStackDescriptorMap;
+	describe: (
+		route: RouteProp<ParamListBase>,
+		placeholder: boolean,
+	) => NativeStackDescriptor;
+}
+
+export interface DirectStackContextValue {
+	state: StackNavigationState<ParamListBase>;
+	navigation: NativeStackNavigationHelpers;
+	descriptors: NativeStackDescriptorMap;
+	preloadedDescriptors: NativeStackDescriptorMap;
+	scenes: DirectStackScene[];
+	focusedIndex: number;
+	shouldShowFloatOverlay: boolean;
+	stackProgress: DerivedValue<number>;
+	optimisticFocusedIndex: DerivedValue<number>;
+}
+
+const DirectStackContext = React.createContext<DirectStackContextValue | null>(
+	null,
+);
+DirectStackContext.displayName = "DirectStack";
+
+function useDirectStackContext(): DirectStackContextValue {
+	const context = React.useContext(DirectStackContext);
+	if (!context) {
+		throw new Error(
+			"useDirectStackContext must be used within DirectStackProvider",
+		);
+	}
+	return context;
+}
+
+/**
+ * Internal hook that computes all lifecycle values.
+ */
+function useDirectStackValue(
+	props: DirectStackProps,
+): DirectStackContextValue & { stackContextValue: StackContextValue } {
+	const { state, navigation, descriptors, describe } = props;
+
+	const preloadedDescriptors = useMemo(() => {
+		return state.preloadedRoutes.reduce<NativeStackDescriptorMap>(
+			(acc, route) => {
+				acc[route.key] = acc[route.key] || describe(route, true);
+				return acc;
+			},
+			{},
+		);
+	}, [state.preloadedRoutes, describe]);
+
+	const {
+		scenes,
+		shouldShowFloatOverlay,
+		routeKeys,
+		allRoutes,
+		allDescriptors,
+	} = useMemo(() => {
+		const allRoutes = state.routes.concat(state.preloadedRoutes);
+		const scenes: DirectStackScene[] = [];
+		const routeKeys: string[] = [];
+		const allDescriptors: NativeStackDescriptorMap = {
+			...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 &&
+					options?.overlayMode === "float" &&
+					options?.overlayShown === true
+				) {
+					shouldShowFloatOverlay = true;
+				}
+			}
+		}
+
+		return {
+			scenes,
+			shouldShowFloatOverlay,
+			routeKeys,
+			allRoutes,
+			allDescriptors,
+		};
+	}, [state.routes, state.preloadedRoutes, descriptors, preloadedDescriptors]);
+
+	// Get animation store maps for all routes
+	const animationMaps = useMemo(
+		() => allRoutes.map((route) => AnimationStore.getAll(route.key)),
+		[allRoutes],
+	);
+
+	const stackProgress = useDerivedValue(() => {
+		"worklet";
+		let total = 0;
+		for (let i = 0; i < animationMaps.length; i++) {
+			total += animationMaps[i].progress.value;
+		}
+		return total;
+	});
+
+	const optimisticFocusedIndex = useDerivedValue(() => {
+		"worklet";
+		const currentIndex = animationMaps.length - 1;
+		let isAnyClosing = false;
+		for (let i = 0; i < animationMaps.length; i++) {
+			if (animationMaps[i].closing.value > 0) {
+				isAnyClosing = true;
+				break;
+			}
+		}
+		return currentIndex - (isAnyClosing ? 1 : 0);
+	});
+
+	const focusedIndex = state.index;
+
+	const stackContextValue = useMemo<StackContextValue>(
+		() => ({
+			flags: { TRANSITIONS_ALWAYS_ON: false },
+			routeKeys,
+			routes: allRoutes,
+			descriptors: allDescriptors,
+			scenes,
+			focusedIndex,
+			stackProgress,
+			optimisticFocusedIndex,
+		}),
+		[
+			routeKeys,
+			allRoutes,
+			allDescriptors,
+			scenes,
+			focusedIndex,
+			stackProgress,
+			optimisticFocusedIndex,
+		],
+	);
+
+	// DirectStack context value
+	const lifecycleValue = useMemo<DirectStackContextValue>(
+		() => ({
+			state,
+			navigation,
+			descriptors,
+			preloadedDescriptors,
+			scenes,
+			focusedIndex,
+			shouldShowFloatOverlay,
+			stackProgress,
+			optimisticFocusedIndex,
+		}),
+		[
+			state,
+			navigation,
+			descriptors,
+			preloadedDescriptors,
+			scenes,
+			focusedIndex,
+			shouldShowFloatOverlay,
+			stackProgress,
+			optimisticFocusedIndex,
+		],
+	);
+
+	return { ...lifecycleValue, stackContextValue };
+}
+
+/**
+ * HOC that wraps component with DirectStack provider AND StackContext.
+ * Used by native-stack which uses navigation state directly (no local route management).
+ */
+function withDirectStack<TProps extends DirectStackProps>(
+	Component: React.ComponentType<DirectStackContextValue>,
+): React.FC<TProps> {
+	return function DirectStackProvider(props: TProps) {
+		const { stackContextValue, ...lifecycleValue } = useDirectStackValue(props);
+
+		return (
+			<StackContext.Provider value={stackContextValue}>
+				<DirectStackContext.Provider value={lifecycleValue}>
+					<Component {...lifecycleValue} />
+				</DirectStackContext.Provider>
+			</StackContext.Provider>
+		);
+	};
+}
+
+export { useDirectStackContext, withDirectStack };

package/src/{blank-stack/utils/with-stack-navigation/helpers/calculate-active-screens-limit.ts → shared/providers/stack/helpers/active-screens-limit.ts}

@@ -1,9 +1,15 @@
-import type { NavigationRoute, ParamListBase } from "@react-navigation/native";
-import type { BlankStackDescriptorMap } from "../../../types";
+import type {
+	BaseStackDescriptor,
+	BaseStackRoute,
+} from "../../../types/stack.types";
+
+type DescriptorWithDetach = BaseStackDescriptor & {
+	options: { detachPreviousScreen?: boolean };
+};
 
 export function calculateActiveScreensLimit(
-	routes: NavigationRoute<ParamListBase, string>[],
-	descriptors: BlankStackDescriptorMap,
+	routes: BaseStackRoute[],
+	descriptors: Record<string, DescriptorWithDetach>,
 ): number {
 	if (routes.length === 0) {
 		return 1;

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

@@ -0,0 +1,133 @@
+import { StackActions } from "@react-navigation/native";
+import { useLayoutEffect, 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 { alignRoutesWithLatest } from "../../../utils/navigation/align-routes-with-latest";
+import { areDescriptorsEqual } from "../../../utils/navigation/are-descriptors-equal";
+import { haveSameRouteKeys } from "../../../utils/navigation/have-same-route-keys";
+import { routesAreIdentical } from "../../../utils/navigation/routes-are-identical";
+import { syncRoutesWithRemoved } from "../../../utils/navigation/sync-routes-with-removed";
+import type { ManagedStackProps } from "../managed.provider";
+
+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,
+	}));
+
+	useLayoutEffect(() => {
+		const nextRoutesSnapshot = props.state.routes;
+		const previousRoutesSnapshot = previousRoutes;
+
+		setLocalState((current) => {
+			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 current;
+			}
+
+			return {
+				routes: routesChanged ? derivedRoutes : current.routes,
+				descriptors: descriptorsChanged
+					? derivedDescriptors
+					: current.descriptors,
+			};
+		});
+	}, [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];
+
+				return {
+					routes: nextRoutes,
+					descriptors: nextDescriptors,
+				};
+			});
+		},
+	);
+
+	return {
+		state: localState,
+		handleCloseRoute,
+		closingRouteKeys,
+	};
+};