react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.8

package/src/hooks/navigation/use-stack.tsx

@@ -1,185 +0,0 @@
-import type { Route } from "@react-navigation/native";
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useSyncExternalStore,
-} from "react";
-import { useDerivedValue } from "react-native-reanimated";
-import { syncStackProgressValues } from "../../providers/screen/animation/helpers/stack-progress";
-import type { StackCoreContextValue } from "../../providers/stack/core.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import type { OverlayProps } from "../../types/overlay.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-	BaseStackScene,
-} from "../../types/stack.types";
-
-export interface StackDescriptor<
-	TRoute extends BaseStackRoute = Route<string>,
-	TNavigation extends BaseStackNavigation = BaseStackNavigation,
-> extends BaseStackDescriptor<TRoute, TNavigation> {
-	options: BaseStackDescriptor["options"] & {
-		overlay?: (props: OverlayProps) => React.ReactNode;
-		overlayShown?: boolean;
-		meta?: Record<string, unknown>;
-		enableTransitions?: boolean;
-	};
-}
-
-export type StackScene<TDescriptor extends StackDescriptor = StackDescriptor> =
-	BaseStackScene<TDescriptor>;
-
-type StackDismissRequest = (payload: { route: BaseStackRoute }) => boolean;
-type StackSelector<T> = (stack: StackContextValue) => T;
-
-export interface StackContextValue extends StackCoreContextValue {
-	navigatorKey: string;
-	routeKeys: string[];
-	routes: Route<string>[];
-	scenes: StackScene[];
-	focusedIndex: number;
-	requestDismiss?: StackDismissRequest;
-}
-
-interface StackStoreApi {
-	getSnapshot: () => StackContextValue;
-	subscribe: (listener: () => void) => () => void;
-}
-
-interface MutableStackStoreApi extends StackStoreApi {
-	notify: () => void;
-	setSnapshot: (snapshot: StackContextValue) => boolean;
-}
-
-const createStackStore = (
-	initialSnapshot: StackContextValue,
-): MutableStackStoreApi => {
-	let snapshot = initialSnapshot;
-	const listeners = new Set<() => void>();
-
-	return {
-		getSnapshot: () => snapshot,
-		notify: () => {
-			for (const listener of listeners) {
-				listener();
-			}
-		},
-		setSnapshot: (nextSnapshot) => {
-			if (Object.is(snapshot, nextSnapshot)) {
-				return false;
-			}
-
-			snapshot = nextSnapshot;
-			return true;
-		},
-		subscribe: (listener) => {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		},
-	};
-};
-
-const StackContext = createContext<StackStoreApi | null>(null);
-StackContext.displayName = "Stack";
-
-function StackProgressOwner({ routeKeys }: { routeKeys: string[] }) {
-	const visualProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "visualProgress"),
-			),
-		[routeKeys],
-	);
-
-	const stackProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "stackProgress"),
-			),
-		[routeKeys],
-	);
-
-	useDerivedValue(() => {
-		syncStackProgressValues(visualProgressValues, stackProgressValues);
-	});
-
-	return null;
-}
-
-export function StackProvider({
-	children,
-	value,
-}: {
-	children: ReactNode;
-	value: StackContextValue;
-}) {
-	const storeRef = useRef<MutableStackStoreApi | null>(null);
-	const pendingNotifyRef = useRef(false);
-
-	let store = storeRef.current;
-	if (!store) {
-		store = createStackStore(value);
-		storeRef.current = store;
-	}
-
-	pendingNotifyRef.current =
-		store.setSnapshot(value) || pendingNotifyRef.current;
-
-	useLayoutEffect(() => {
-		if (!pendingNotifyRef.current) {
-			return;
-		}
-
-		pendingNotifyRef.current = false;
-		store.notify();
-	});
-
-	return (
-		<StackContext.Provider value={store}>
-			<StackProgressOwner routeKeys={value.routeKeys} />
-			{children}
-		</StackContext.Provider>
-	);
-}
-
-function useStackStore(): StackStoreApi {
-	const store = useContext(StackContext);
-
-	if (store === null) {
-		throw new Error("useStack must be used within a Stack provider");
-	}
-
-	return store;
-}
-
-export function useStack<T extends StackContextValue = StackContextValue>(): T;
-export function useStack<T>(selector: StackSelector<T>): T;
-export function useStack<T>(
-	selector?: StackSelector<T>,
-): StackContextValue | T {
-	const store = useStackStore();
-	const selectorRef = useRef<StackSelector<StackContextValue | T>>(
-		selector ?? ((stack) => stack),
-	);
-	selectorRef.current = selector ?? ((stack) => stack);
-
-	const getSelectedSnapshot = useCallback(
-		() => selectorRef.current(store.getSnapshot()),
-		[store],
-	);
-
-	return useSyncExternalStore(
-		store.subscribe,
-		getSelectedSnapshot,
-		getSelectedSnapshot,
-	);
-}

package/src/hooks/navigation/use-tab-press-reset.ts

@@ -1,36 +0,0 @@
-import * as React from "react";
-
-/**
- * When inside a tab navigator, resets the stack to the first screen
- * when the already-focused tab is pressed again. Replicates native behaviour.
- */
-export function useTabPressReset(
-	navigation: {
-		isFocused: () => boolean;
-		addListener?: (event: string, callback: (e: any) => void) => () => void;
-		dispatch: (action: any) => void;
-	},
-	stateIndex: number,
-	stateKey: string,
-) {
-	React.useEffect(
-		() =>
-			navigation?.addListener?.("tabPress", (e: any) => {
-				const isFocused = navigation.isFocused();
-
-				// Run the operation in the next frame so we're sure all listeners have been run
-				// This is necessary to know if preventDefault() has been called
-				requestAnimationFrame(() => {
-					if (stateIndex > 0 && isFocused && !e.defaultPrevented) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							type: "POP_TO_TOP",
-							target: stateKey,
-						});
-					}
-				});
-			}),
-		[navigation, stateIndex, stateKey],
-	);
-}

package/src/providers/screen/descriptors/helpers/get-ancestor-keys.ts

@@ -1,28 +0,0 @@
-import type { BaseStackDescriptor } from "../../../../types/stack.types";
-
-/**
- * Builds nested navigator ancestor keys from immediate parent to root.
- */
-export function getAncestorKeys(current: BaseStackDescriptor): string[] {
-	const ancestors: string[] = [];
-	const nav = current.navigation as any;
-
-	if (typeof nav?.getParent !== "function") {
-		return ancestors;
-	}
-
-	let parent = nav.getParent();
-
-	while (parent) {
-		const state = parent.getState();
-		if (state?.routes && state.index !== undefined) {
-			const focusedRoute = state.routes[state.index];
-			if (focusedRoute?.key) {
-				ancestors.push(focusedRoute.key);
-			}
-		}
-		parent = parent.getParent();
-	}
-
-	return ancestors;
-}

package/src/providers/screen/gestures/shared/ancestors.ts

@@ -1,27 +0,0 @@
-type GestureAncestorNode<T> = {
-	gestureContext: T | null;
-	isIsolated?: boolean;
-};
-
-/**
- * Returns the gesture context chain, starting at `context`, then walking upward.
- * When `isIsolated` is provided, the walk stops at a stack isolation boundary.
- */
-export function walkGestureAncestors<T extends GestureAncestorNode<T>>(
-	context: T | null | undefined,
-	isIsolated?: boolean,
-): T[] {
-	const ancestors: T[] = [];
-	let ancestor = context ?? null;
-
-	while (ancestor) {
-		if (isIsolated !== undefined && ancestor.isIsolated !== isIsolated) {
-			break;
-		}
-
-		ancestors.push(ancestor);
-		ancestor = ancestor.gestureContext;
-	}
-
-	return ancestors;
-}

package/src/providers/screen/styles/components/floating-overlay-layer.tsx

@@ -1,29 +0,0 @@
-import { memo } from "react";
-import { StyleSheet, View } from "react-native";
-
-interface FloatingOverlayLayerProps {
-	children: React.ReactNode;
-	enabled?: boolean;
-}
-export const FloatingOverlayLayer = memo(function FloatingOverlayLayer({
-	children,
-	enabled,
-}: FloatingOverlayLayerProps) {
-	if (!enabled) {
-		return children;
-	}
-	return (
-		<View
-			style={[StyleSheet.absoluteFill, styles.float]}
-			pointerEvents="box-none"
-		>
-			{children}
-		</View>
-	);
-});
-
-const styles = StyleSheet.create({
-	float: {
-		zIndex: 999,
-	},
-});

package/src/providers/screen/styles/stores/slot-references.store.ts

@@ -1,72 +0,0 @@
-import { useSyncExternalStore } from "react";
-import type { ScreenKey } from "../../../../stores/bounds/types";
-import type { ScreenSlotContextValue } from "../slot.provider";
-
-/**
- * Screen-owned slot reference registry.
- *
- * This is important for portals: a teleported component can render outside the
- * screen provider that owns its active transition, but it still needs references
- * to that provider's shared values. This store does not copy or own styles; it
- * only exposes the existing ScreenSlotProvider value by screen key.
- */
-type ScreenSlotsSnapshot = Record<ScreenKey, ScreenSlotContextValue>;
-
-const listeners = new Set<() => void>();
-const slotsByScreenKey = new Map<ScreenKey, ScreenSlotContextValue>();
-
-let snapshot: ScreenSlotsSnapshot = {};
-
-const emit = () => {
-	snapshot = Object.fromEntries(slotsByScreenKey);
-
-	for (const listener of listeners) {
-		listener();
-	}
-};
-
-export const registerScreenSlots = (
-	screenKey: ScreenKey,
-	slots: ScreenSlotContextValue,
-) => {
-	const previous = slotsByScreenKey.get(screenKey);
-	if (
-		previous?.localStylesMaps === slots.localStylesMaps &&
-		previous.nextInterpolatorReady === slots.nextInterpolatorReady &&
-		previous.slotsMap === slots.slotsMap &&
-		previous.visibilityBlocked === slots.visibilityBlocked
-	) {
-		return;
-	}
-
-	slotsByScreenKey.set(screenKey, slots);
-	emit();
-};
-
-export const unregisterScreenSlots = (
-	screenKey: ScreenKey,
-	slots: ScreenSlotContextValue,
-) => {
-	if (slotsByScreenKey.get(screenKey) !== slots) {
-		return;
-	}
-
-	slotsByScreenKey.delete(screenKey);
-	emit();
-};
-
-const subscribe = (listener: () => void) => {
-	listeners.add(listener);
-
-	return () => {
-		listeners.delete(listener);
-	};
-};
-
-export const useRegisteredScreenSlots = (screenKey?: ScreenKey | null) => {
-	return useSyncExternalStore(
-		subscribe,
-		() => (screenKey ? (snapshot[screenKey] ?? null) : null),
-		() => null,
-	);
-};

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

@@ -1,148 +0,0 @@
-import { type ReactNode, useMemo } from "react";
-import {
-	type StackContextValue,
-	StackProvider,
-} from "../../hooks/navigation/use-stack";
-import type {
-	DirectStackContextValue,
-	DirectStackDescriptorMap,
-	DirectStackProps,
-	DirectStackScene,
-} from "../../types/providers/direct-stack.types";
-import createProvider from "../../utils/create-provider";
-import { isOverlayVisible } from "../../utils/overlay/visibility";
-import { useStackCoreStore } from "./core.provider";
-
-type DirectStackProviderProps = DirectStackProps & {
-	children: ReactNode;
-};
-
-type DirectStackStoreProviderProps = {
-	children: ReactNode;
-	value: DirectStackContextValue;
-};
-
-const { DirectStackProvider: DirectStackStoreProvider, useDirectStackStore } =
-	createProvider("DirectStack", { guarded: true })<
-		DirectStackStoreProviderProps,
-		DirectStackContextValue
-	>(({ children, value }) => ({ children, value }));
-
-function DirectStackProvider({
-	state,
-	navigation,
-	descriptors,
-	describe,
-	children,
-}: DirectStackProviderProps) {
-	const flags = useStackCoreStore((store) => store.flags);
-	const navigatorKey = state.key;
-	const preloadedDescriptors = useMemo(() => {
-		return state.preloadedRoutes.reduce<DirectStackDescriptorMap>(
-			(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: DirectStackDescriptorMap = {
-				...preloadedDescriptors,
-				...descriptors,
-			};
-			let shouldShowFloatOverlay = false;
-
-			for (let index = 0; index < allRoutes.length; index++) {
-				const route = allRoutes[index];
-				if (!route) {
-					throw new Error(`Missing stack route at index ${index}.`);
-				}
-				const descriptor = allDescriptors[route.key];
-
-				if (!descriptor) {
-					throw new Error(`Missing descriptor for route "${route.key}".`);
-				}
-
-				const isPreloaded =
-					preloadedDescriptors[route.key] !== undefined &&
-					descriptors[route.key] === undefined;
-
-				scenes.push({
-					activity:
-						index === state.index
-							? "active"
-							: index === state.index - 1
-								? "inert"
-								: "inactive",
-					route,
-					descriptor,
-					isPreloaded,
-				});
-				routeKeys.push(route.key);
-
-				if (
-					!shouldShowFloatOverlay &&
-					descriptor.options?.enableTransitions === true &&
-					isOverlayVisible(descriptor.options)
-				) {
-					shouldShowFloatOverlay = true;
-				}
-			}
-
-			return {
-				scenes,
-				shouldShowFloatOverlay,
-				routeKeys,
-				allRoutes,
-			};
-		}, [
-			state.routes,
-			state.preloadedRoutes,
-			state.index,
-			preloadedDescriptors,
-			descriptors,
-		]);
-
-	const focusedIndex = state.index;
-	const stackValue = useMemo<StackContextValue>(
-		() => ({
-			flags,
-			navigatorKey,
-			routeKeys,
-			routes: allRoutes,
-			scenes,
-			focusedIndex,
-		}),
-		[flags, navigatorKey, routeKeys, allRoutes, scenes, focusedIndex],
-	);
-	const directStackValue = {
-		state,
-		navigation,
-		descriptors,
-		scenes,
-		focusedIndex,
-		shouldShowFloatOverlay,
-	};
-
-	return (
-		<StackProvider value={stackValue}>
-			<DirectStackStoreProvider value={directStackValue}>
-				{children}
-			</DirectStackStoreProvider>
-		</StackProvider>
-	);
-}
-
-export type {
-	DirectStackContextValue,
-	DirectStackProps,
-	DirectStackProviderProps,
-	DirectStackScene,
-};
-export { DirectStackProvider, useDirectStackStore };

package/src/types/providers/direct-stack.types.ts

@@ -1,70 +0,0 @@
-import type {
-	Descriptor,
-	NavigationHelpers,
-	NavigationProp,
-	ParamListBase,
-	RouteProp,
-	StackActionHelpers,
-	StackNavigationState,
-} from "@react-navigation/native";
-import type { ScreenTransitionConfig } from "../screen.types";
-import type { DescriptorMap, StackSceneActivity } from "../stack.types";
-
-export type DirectStackNavigationEventMap = {};
-
-export type DirectStackNavigationHelpers = NavigationHelpers<
-	ParamListBase,
-	DirectStackNavigationEventMap
->;
-
-export type DirectStackNavigationProp<
-	ParamList extends ParamListBase,
-	RouteName extends keyof ParamList = string,
-	NavigatorID extends string | undefined = undefined,
-> = NavigationProp<
-	ParamList,
-	RouteName,
-	NavigatorID,
-	StackNavigationState<ParamList>,
-	DirectStackNavigationOptions,
-	DirectStackNavigationEventMap
-> &
-	StackActionHelpers<ParamList>;
-
-export type DirectStackNavigationOptions = ScreenTransitionConfig & {
-	enableTransitions?: boolean;
-};
-
-export type DirectStackDescriptor = Descriptor<
-	DirectStackNavigationOptions,
-	DirectStackNavigationProp<ParamListBase>,
-	RouteProp<ParamListBase>
->;
-
-export type DirectStackDescriptorMap = DescriptorMap<DirectStackDescriptor>;
-
-export interface DirectStackScene {
-	activity: StackSceneActivity;
-	route: StackNavigationState<ParamListBase>["routes"][number];
-	descriptor: DirectStackDescriptor;
-	isPreloaded: boolean;
-}
-
-export interface DirectStackProps {
-	state: StackNavigationState<ParamListBase>;
-	navigation: DirectStackNavigationHelpers;
-	descriptors: DirectStackDescriptorMap;
-	describe: (
-		route: RouteProp<ParamListBase>,
-		placeholder: boolean,
-	) => DirectStackDescriptor;
-}
-
-export interface DirectStackContextValue {
-	state: StackNavigationState<ParamListBase>;
-	navigation: DirectStackNavigationHelpers;
-	descriptors: DirectStackDescriptorMap;
-	scenes: DirectStackScene[];
-	focusedIndex: number;
-	shouldShowFloatOverlay: boolean;
-}