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

package/src/shared/providers/stack/blank-stack-state/blank-stack-controller.ts

@@ -1,162 +0,0 @@
-import { StackActions } from "@react-navigation/native";
-import type { BlankStackProviderProps } from "../../../types/providers/blank-stack-provider.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-} from "../../../types/stack.types";
-import { buildBlankStackState } from "./helpers/build-blank-stack-state";
-import { deriveBlankStackState } from "./helpers/derive-blank-stack-state";
-import type {
-	BlankStackControllerSnapshot,
-	BlankStackController as BlankStackControllerType,
-	BlankStackDescriptorSources,
-} from "./helpers/types";
-
-export type { BlankStackController } from "./helpers/types";
-
-/**
- * Maintains the stack-local route snapshot used while blank stack transitions run.
- *
- * React Navigation remains the source of truth for settled routes, but it can
- * remove descriptors before our close animation has finished. This controller
- * keeps those closing routes locally until their lifecycle reports completion.
- */
-export const createBlankStackController = <
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	initialProps: BlankStackProviderProps<TDescriptor, TNavigation>,
-): BlankStackControllerType<TDescriptor, TNavigation> => {
-	const closingRouteKeys = new Set<string>();
-	let props = initialProps;
-	let previousRoutesSnapshot = initialProps.state.routes;
-	let snapshot: BlankStackControllerSnapshot<TDescriptor> = {
-		state: buildBlankStackState({
-			props,
-			routes: initialProps.state.routes,
-			descriptors:
-				initialProps.descriptors as BlankStackDescriptorSources<TDescriptor>,
-			closingRouteKeys,
-		}),
-	};
-	const listeners = new Set<() => void>();
-
-	const emit = () => {
-		for (const listener of listeners) {
-			listener();
-		}
-	};
-
-	const subscribe = (listener: () => void) => {
-		listeners.add(listener);
-		return () => {
-			listeners.delete(listener);
-		};
-	};
-
-	const getSnapshot = (): BlankStackControllerSnapshot<TDescriptor> => {
-		return snapshot;
-	};
-
-	const update = (
-		nextProps: BlankStackProviderProps<TDescriptor, TNavigation>,
-	) => {
-		const lastRoutesSnapshot = previousRoutesSnapshot;
-		props = nextProps;
-
-		const nextState = deriveBlankStackState({
-			props,
-			current: snapshot.state,
-			previousRoutesSnapshot: lastRoutesSnapshot,
-			closingRouteKeys,
-		});
-		previousRoutesSnapshot = nextProps.state.routes;
-
-		if (nextState === snapshot.state) {
-			return;
-		}
-
-		snapshot = {
-			state: nextState,
-		};
-	};
-
-	const handleCloseRoute = ({ route }: { route: BaseStackRoute }) => {
-		const { state, navigation } = props;
-
-		if (state.routes.some((candidate) => candidate.key === route.key)) {
-			navigation.dispatch({
-				...StackActions.pop(),
-				source: route.key,
-				target: state.key,
-			});
-			return;
-		}
-
-		closingRouteKeys.delete(route.key);
-
-		const current = snapshot.state;
-		const routeExists = current.routes.some(
-			(candidate) => candidate.key === route.key,
-		);
-
-		if (!routeExists) {
-			return;
-		}
-
-		const nextRoutes = current.routes.filter(
-			(candidate) => candidate.key !== route.key,
-		);
-
-		const nextDescriptors = { ...current.sourceDescriptors };
-		delete nextDescriptors[route.key];
-
-		snapshot = {
-			state: buildBlankStackState({
-				props,
-				routes: nextRoutes,
-				descriptors: nextDescriptors,
-				closingRouteKeys,
-				previousState: current,
-			}),
-		};
-		emit();
-	};
-
-	const requestDismiss = ({ route }: { route: BaseStackRoute }): boolean => {
-		const current = snapshot.state;
-		const routeIndex = current.routes.findIndex(
-			(candidate) => candidate.key === route.key,
-		);
-
-		if (routeIndex <= 0) {
-			return false;
-		}
-
-		if (closingRouteKeys.has(route.key)) {
-			return true;
-		}
-
-		closingRouteKeys.add(route.key);
-		snapshot = {
-			state: buildBlankStackState({
-				props,
-				routes: current.routes,
-				descriptors: current.sourceDescriptors,
-				closingRouteKeys,
-				previousState: current,
-			}),
-		};
-		emit();
-		return true;
-	};
-
-	return {
-		subscribe,
-		getSnapshot,
-		update,
-		handleCloseRoute,
-		requestDismiss,
-	};
-};

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

@@ -1,110 +0,0 @@
-import { SafeAreaProviderCompat } from "@react-navigation/elements";
-import type * as React from "react";
-import { useMemo } from "react";
-import { StyleSheet } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { StackType } from "../../types/stack.types";
-import createProvider from "../../utils/create-provider";
-
-export interface StackCoreConfig {
-	TRANSITIONS_ALWAYS_ON?: boolean;
-	STACK_TYPE?: StackType;
-	DISABLE_NATIVE_SCREENS?: boolean;
-	DISABLE_NATIVE_SCREEN_CONTAINER?: boolean;
-}
-
-interface StackCoreProviderProps {
-	config: StackCoreConfig;
-	children: React.ReactNode;
-}
-
-export interface StackCoreContextValue {
-	flags: {
-		TRANSITIONS_ALWAYS_ON: boolean;
-		STACK_TYPE?: StackType;
-		DISABLE_NATIVE_SCREENS: boolean;
-		DISABLE_NATIVE_SCREEN_CONTAINER: boolean;
-	};
-}
-
-const { StackCoreProvider: InternalStackCoreProvider, useStackCoreContext } =
-	createProvider("StackCore", { guarded: true })<
-		StackCoreProviderProps,
-		StackCoreContextValue
-	>(({ config, children }) => {
-		const {
-			TRANSITIONS_ALWAYS_ON = false,
-			DISABLE_NATIVE_SCREENS = false,
-			DISABLE_NATIVE_SCREEN_CONTAINER = false,
-			STACK_TYPE = StackType.BLANK,
-		} = config;
-
-		const flags = useMemo(
-			() => ({
-				TRANSITIONS_ALWAYS_ON,
-				STACK_TYPE,
-				DISABLE_NATIVE_SCREENS,
-				DISABLE_NATIVE_SCREEN_CONTAINER,
-			}),
-			[
-				TRANSITIONS_ALWAYS_ON,
-				STACK_TYPE,
-				DISABLE_NATIVE_SCREENS,
-				DISABLE_NATIVE_SCREEN_CONTAINER,
-			],
-		);
-
-		return {
-			value: { flags },
-			children: (
-				<GestureHandlerRootView
-					style={styles.container}
-					pointerEvents={
-						STACK_TYPE === StackType.COMPONENT ? "box-none" : undefined
-					}
-				>
-					<SafeAreaProviderCompat>{children}</SafeAreaProviderCompat>
-				</GestureHandlerRootView>
-			),
-		};
-	});
-
-/**
- * HOC that wraps a component with the StackCore provider.
- * Just a simple open gate
- */
-export function withStackCore<TProps extends object>(
-	defaultConfig: StackCoreConfig,
-	Component: React.ComponentType<TProps>,
-): React.FC<TProps & StackCoreConfig> {
-	return function StackCoreWrapper({
-		DISABLE_NATIVE_SCREENS,
-		DISABLE_NATIVE_SCREEN_CONTAINER,
-		TRANSITIONS_ALWAYS_ON,
-		STACK_TYPE,
-		...props
-	}: TProps & StackCoreConfig) {
-		// Start from defaults, then apply explicit overrides from the caller.
-		const config: StackCoreConfig = {
-			TRANSITIONS_ALWAYS_ON:
-				TRANSITIONS_ALWAYS_ON ?? defaultConfig.TRANSITIONS_ALWAYS_ON,
-			STACK_TYPE: STACK_TYPE ?? defaultConfig.STACK_TYPE,
-			DISABLE_NATIVE_SCREENS:
-				DISABLE_NATIVE_SCREENS ?? defaultConfig.DISABLE_NATIVE_SCREENS,
-			DISABLE_NATIVE_SCREEN_CONTAINER:
-				DISABLE_NATIVE_SCREEN_CONTAINER ??
-				defaultConfig.DISABLE_NATIVE_SCREEN_CONTAINER,
-		};
-		return (
-			<InternalStackCoreProvider config={config}>
-				<Component {...(props as TProps)} />
-			</InternalStackCoreProvider>
-		);
-	};
-}
-
-const styles = StyleSheet.create({
-	container: { flex: 1 },
-});
-
-export { useStackCoreContext };

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

@@ -1,129 +0,0 @@
-import type * as React from "react";
-import { useMemo } from "react";
-import type { NativeStackDescriptorMap } from "../../../native-stack/types";
-import {
-	type StackContextValue,
-	StackProvider,
-} from "../../hooks/navigation/use-stack";
-import type {
-	DirectStackContextValue,
-	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<NativeStackDescriptorMap>(
-			(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: 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 &&
-						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/shared/types/providers/direct-stack.types.ts

@@ -1,35 +0,0 @@
-import type {
-	ParamListBase,
-	RouteProp,
-	StackNavigationState,
-} from "@react-navigation/native";
-import type {
-	NativeStackDescriptor,
-	NativeStackDescriptorMap,
-	NativeStackNavigationHelpers,
-} from "../../../native-stack/types";
-
-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;
-	scenes: DirectStackScene[];
-	focusedIndex: number;
-	shouldShowFloatOverlay: boolean;
-}

package/src/shared/utils/animation/animate-to-progress.ts

@@ -1,157 +0,0 @@
-import { runOnJS, type SharedValue } from "react-native-reanimated";
-import { FALSE, TRUE } from "../../constants";
-import type { AnimationStoreMap } from "../../stores/animation.store";
-import type { TransitionSpec } from "../../types/animation.types";
-import { animate, isSpringAnimationConfig } from "./animate";
-
-interface AnimateToProgressProps {
-	/**
-	 * Target for the animation:
-	 * - "open" = animate to progress 1
-	 * - "close" = animate to progress 0
-	 * - number = animate to specific progress value (e.g., 0.5 for snap point)
-	 */
-	target: "open" | "close" | number;
-	spec?: TransitionSpec;
-	onAnimationFinish?: (finished: boolean) => void;
-	animations: AnimationStoreMap;
-	targetProgress: SharedValue<number>;
-	emitWillAnimate?: boolean;
-	markEntering?: boolean;
-	/** Optional initial velocity for spring-based progress (units: progress/sec). */
-	initialVelocity?: number;
-}
-
-const setTransitionLifecycleFlags = (
-	animations: AnimationStoreMap,
-	isClosing: boolean,
-	markEntering: boolean,
-) => {
-	"worklet";
-
-	if (isClosing) {
-		animations.closing.set(TRUE);
-		animations.entering.set(FALSE);
-		return;
-	}
-
-	if (markEntering) {
-		animations.entering.set(TRUE);
-	}
-};
-
-export const animateToProgress = ({
-	target,
-	spec,
-	onAnimationFinish,
-	animations,
-	targetProgress,
-	emitWillAnimate = true,
-	markEntering = true,
-	initialVelocity,
-}: AnimateToProgressProps) => {
-	"worklet";
-
-	// Determine target value and direction
-	const isClosing =
-		target === "close" || (typeof target === "number" && target === 0);
-	const value = typeof target === "number" ? target : target === "open" ? 1 : 0;
-
-	// Select spec based on direction (closing uses close spec, otherwise open)
-	const config = isClosing ? spec?.close : spec?.open;
-
-	const isSpringConfig = isSpringAnimationConfig(config);
-
-	const effectiveConfig =
-		isSpringConfig && typeof initialVelocity === "number"
-			? { ...config, velocity: initialVelocity }
-			: config;
-
-	const {
-		transitionProgress,
-		willAnimate,
-		progressAnimating,
-		progressSettled,
-		entering,
-	} = animations;
-
-	const startAnimation = () => {
-		"worklet";
-		targetProgress.set(value);
-
-		const shouldClearEnteringOnFinish =
-			!isClosing && (markEntering || entering.get());
-
-		setTransitionLifecycleFlags(animations, isClosing, markEntering);
-
-		if (!config) {
-			progressAnimating.set(FALSE);
-			progressSettled.set(TRUE);
-			transitionProgress.set(value);
-			if (shouldClearEnteringOnFinish) {
-				entering.set(FALSE);
-			}
-
-			if (onAnimationFinish) {
-				runOnJS(onAnimationFinish)(true);
-			}
-			return;
-		}
-
-		progressAnimating.set(TRUE); //<-- Do not move this into the callback
-		progressSettled.set(FALSE);
-		transitionProgress.set(
-			animate(value, effectiveConfig, (state) => {
-				"worklet";
-				if (state.settled) {
-					progressSettled.set(TRUE);
-				}
-
-				if (!state.finished) return;
-
-				if (shouldClearEnteringOnFinish) {
-					entering.set(FALSE);
-				}
-
-				if (isClosing) {
-					progressAnimating.set(FALSE);
-
-					if (onAnimationFinish) {
-						// Paint the terminal UI-thread host/style state before React
-						// removes the closing route and its native portal host.
-						requestAnimationFrame(() => {
-							"worklet";
-							requestAnimationFrame(() => {
-								"worklet";
-								runOnJS(onAnimationFinish)(state.finished);
-							});
-						});
-					}
-				} else {
-					if (onAnimationFinish) {
-						runOnJS(onAnimationFinish)(state.finished);
-					}
-
-					// Delay clearing progress animation by one frame to ensure final frame is painted
-					requestAnimationFrame(() => {
-						progressAnimating.set(FALSE);
-					});
-				}
-			}),
-		);
-	};
-
-	if (emitWillAnimate) {
-		setTransitionLifecycleFlags(animations, isClosing, markEntering);
-
-		willAnimate.set(TRUE);
-		requestAnimationFrame(() => {
-			"worklet";
-			willAnimate.set(FALSE);
-			startAnimation();
-		});
-		return;
-	}
-
-	startAnimation();
-};