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

package/src/providers/stack/blank-stack-state/helpers/types.ts

@@ -1,54 +1,41 @@
+import type { BlankStackDescriptor } from "../../../../types/blank-stack.types";
 import type { BlankStackProviderProps } from "../../../../types/providers/blank-stack-provider.types";
 import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
 	BaseStackRoute,
 	BaseStackScene,
-	StackDescriptorSource,
 } from "../../../../types/stack.types";
 
-export type BlankStackRoutes<TDescriptor extends BaseStackDescriptor> =
-	TDescriptor["route"][];
+export type BlankStackRoutes = BlankStackDescriptor["route"][];
 
-export type BlankStackDescriptors<TDescriptor extends BaseStackDescriptor> =
-	Record<string, TDescriptor>;
+export type BlankStackDescriptors = Record<string, BlankStackDescriptor>;
 
-export type BlankStackDescriptorSources<
-	TDescriptor extends BaseStackDescriptor,
-> = Record<string, StackDescriptorSource<TDescriptor>>;
-
-export type LocalRoutesState<TDescriptor extends BaseStackDescriptor> = {
-	routes: BlankStackRoutes<TDescriptor>;
-	descriptors: BlankStackDescriptors<TDescriptor>;
-	sourceDescriptors: BlankStackDescriptorSources<TDescriptor>;
+export type LocalRoutesState = {
+	routes: BlankStackRoutes;
+	descriptors: BlankStackDescriptors;
+	sourceDescriptors: BlankStackDescriptors;
 	focusedRouteKey?: string;
 	routeChildStates: Record<string, unknown>;
-	scenes: BaseStackScene<TDescriptor>[];
+	scenes: BaseStackScene<BlankStackDescriptor>[];
 	routeKeys: string[];
 	shouldShowFloatOverlay: boolean;
 	closingRouteKeys: ReadonlySet<string>;
 };
 
-export type BlankStackControllerSnapshot<
-	TDescriptor extends BaseStackDescriptor,
-> = {
-	state: LocalRoutesState<TDescriptor>;
+export type BlankStackControllerSnapshot = {
+	state: LocalRoutesState;
 };
 
-export type BlankStackController<
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
-> = {
+export type BlankStackController = {
 	subscribe: (listener: () => void) => () => void;
-	getSnapshot: () => BlankStackControllerSnapshot<TDescriptor>;
-	update: (props: BlankStackProviderProps<TDescriptor, TNavigation>) => void;
+	getSnapshot: () => BlankStackControllerSnapshot;
+	update: (props: BlankStackProviderProps) => void;
 	handleCloseRoute: (payload: { route: BaseStackRoute }) => void;
 	requestDismiss: (payload: { route: BaseStackRoute }) => boolean;
 };
 
-export type ReconciledRoutes<TDescriptor extends BaseStackDescriptor> = {
-	routes: BlankStackRoutes<TDescriptor>;
-	descriptors: BlankStackDescriptorSources<TDescriptor>;
+export type ReconciledRoutes = {
+	routes: BlankStackRoutes;
+	descriptors: BlankStackDescriptors;
 };
 
 export type SceneActivityWindow = {

package/src/providers/stack/blank-stack-state/index.ts

@@ -1,23 +1,12 @@
 import { useRef, useSyncExternalStore } from "react";
 import type { BlankStackProviderProps } from "../../../types/providers/blank-stack-provider.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-} from "../../../types/stack.types";
 import {
 	type BlankStackController,
 	createBlankStackController,
 } from "./blank-stack-controller";
 
-export const useBlankStackState = <
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	props: BlankStackProviderProps<TDescriptor, TNavigation>,
-) => {
-	const controllerRef = useRef<
-		BlankStackController<TDescriptor, TNavigation> | undefined
-	>(undefined);
+export const useBlankStackState = (props: BlankStackProviderProps) => {
+	const controllerRef = useRef<BlankStackController | undefined>(undefined);
 
 	if (!controllerRef.current) {
 		controllerRef.current = createBlankStackController(props);

package/src/providers/stack/blank-stack.provider.tsx

@@ -1,118 +1,76 @@
-import type { Route } from "@react-navigation/native";
-import * as React from "react";
-import { useMemo } from "react";
-import {
-	type StackContextValue,
-	StackProvider,
-} from "../../hooks/navigation/use-stack";
+import { type ReactNode, useMemo } from "react";
+import type { BlankStackDescriptor } from "../../types/blank-stack.types";
 import type {
-	BlankStackProviderContextValue,
 	BlankStackProviderProps,
-	BlankStackProviderRenderProps,
-	BlankStackProviderResult,
+	BlankStackStoreValue,
 } from "../../types/providers/blank-stack-provider.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackScene,
-} from "../../types/stack.types";
+import type { BaseStackScene } from "../../types/stack.types";
+import createProvider from "../../utils/create-provider";
 import { useBlankStackState } from "./blank-stack-state";
-import { useStackCoreContext } from "./core.provider";
+import { resolvePresentedIndex } from "./blank-stack-state/helpers/resolve-presented-index";
 
-const BlankStackProviderContext =
-	React.createContext<BlankStackProviderContextValue | null>(null);
-BlankStackProviderContext.displayName = "BlankStackProvider";
+type InternalBlankStackProviderProps = BlankStackProviderProps & {
+	children: ReactNode;
+};
 
-function useBlankStackContext(): BlankStackProviderContextValue {
-	const context = React.useContext(BlankStackProviderContext);
-	if (!context) {
-		throw new Error(
-			"useBlankStackContext must be used within BlankStackProvider",
-		);
-	}
-	return context;
-}
+const createScenesByKey = (scenes: BaseStackScene<BlankStackDescriptor>[]) => {
+	const scenesByKey: Record<string, BaseStackScene<BlankStackDescriptor>> = {};
 
-function useBlankStackProviderValue<
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	props: BlankStackProviderProps<TDescriptor, TNavigation>,
-): BlankStackProviderResult<TDescriptor> {
-	const { flags } = useStackCoreContext();
-	const { state, handleCloseRoute, requestDismiss } = useBlankStackState(props);
-	const navigatorKey = props.state.key;
+	for (const scene of scenes) {
+		scenesByKey[scene.route.key] = scene;
+	}
 
-	const focusedIndex = props.state.index;
+	return scenesByKey;
+};
 
-	const stackContextValue = useMemo<StackContextValue>(
-		() => ({
-			flags,
-			navigatorKey,
-			routeKeys: state.routeKeys,
-			routes: state.routes as Route<string>[],
-			scenes: state.scenes as BaseStackScene[],
-			focusedIndex,
-			requestDismiss,
-		}),
-		[
-			flags,
-			navigatorKey,
-			state.routeKeys,
-			state.routes,
-			state.scenes,
-			focusedIndex,
-			requestDismiss,
-		],
+const {
+	StoreProvider: BlankStackStoreProvider,
+	BlankStackProvider,
+	useBlankStackStore,
+} = createProvider("BlankStack")<
+	InternalBlankStackProviderProps,
+	BlankStackStoreValue
+>(({ state: stackState, children, ...props }) => {
+	const { state, handleCloseRoute, requestDismiss } = useBlankStackState({
+		...props,
+		state: stackState,
+	});
+	const navigatorKey = stackState.key;
+	const focusedIndex = resolvePresentedIndex(
+		state.routes,
+		state.focusedRouteKey,
+		state.closingRouteKeys,
 	);
+	const scenesByKey = useMemo(
+		() => createScenesByKey(state.scenes),
+		[state.scenes],
+	);
+	const paintDriverRouteKeyByRouteKey = useMemo(() => {
+		const paintDrivers = new Map<string, string>();
+
+		for (let index = 0; index + 2 < state.routeKeys.length; index++) {
+			paintDrivers.set(state.routeKeys[index], state.routeKeys[index + 2]);
+		}
 
-	const blankStackProviderContextValue =
-		useMemo<BlankStackProviderContextValue>(
-			() => ({
-				handleCloseRoute,
-			}),
-			[handleCloseRoute],
-		);
+		return paintDrivers;
+	}, [state.routeKeys]);
 
-	const renderProps = useMemo<BlankStackProviderRenderProps<TDescriptor>>(
-		() => ({
+	return {
+		value: {
+			navigatorKey,
+			routeKeys: state.routeKeys,
+			routes: state.routes,
 			scenes: state.scenes,
+			scenesByKey,
+			paintDriverRouteKeyByRouteKey,
 			focusedIndex,
+			requestDismiss,
 			shouldShowFloatOverlay: state.shouldShowFloatOverlay,
-		}),
-		[state.scenes, focusedIndex, state.shouldShowFloatOverlay],
-	);
-
-	return { stackContextValue, blankStackProviderContextValue, renderProps };
-}
-
-function withBlankStack<
-	TDescriptor extends BaseStackDescriptor = BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation = BaseStackNavigation,
->(
-	Component: React.ComponentType<BlankStackProviderRenderProps<TDescriptor>>,
-): React.FC<BlankStackProviderProps<TDescriptor, TNavigation>> {
-	return function BlankStackProvider(
-		props: BlankStackProviderProps<TDescriptor, TNavigation>,
-	) {
-		const { stackContextValue, blankStackProviderContextValue, renderProps } =
-			useBlankStackProviderValue<TDescriptor, TNavigation>(props);
-
-		return (
-			<StackProvider value={stackContextValue}>
-				<BlankStackProviderContext.Provider
-					value={blankStackProviderContextValue}
-				>
-					<Component {...renderProps} />
-				</BlankStackProviderContext.Provider>
-			</StackProvider>
-		);
+			handleCloseRoute,
+		},
+		children,
 	};
-}
+});
 
-export type {
-	BlankStackProviderContextValue,
-	BlankStackProviderProps,
-	BlankStackProviderRenderProps,
-};
-export { useBlankStackContext, withBlankStack };
+export type { BlankStackProviderProps, BlankStackStoreValue };
+export { BlankStackProvider, BlankStackStoreProvider, useBlankStackStore };

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

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { useMemo } from "react";
+import { memo, type ReactNode, useContext, useMemo } from "react";
 import { Dimensions, Platform, StyleSheet, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import {
@@ -7,27 +6,20 @@ import {
 	SafeAreaInsetsContext,
 	SafeAreaProvider,
 } from "react-native-safe-area-context";
-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;
+	children: ReactNode;
 }
 
 export interface StackCoreContextValue {
 	flags: {
 		TRANSITIONS_ALWAYS_ON: boolean;
-		STACK_TYPE?: StackType;
-		DISABLE_NATIVE_SCREENS: boolean;
-		DISABLE_NATIVE_SCREEN_CONTAINER: boolean;
 	};
 }
 
@@ -41,8 +33,12 @@ const initialSafeAreaMetrics =
 			}
 		: initialWindowMetrics;
 
-function StackSafeAreaProvider({ children }: { children: React.ReactNode }) {
-	const insets = React.useContext(SafeAreaInsetsContext);
+const StackSafeAreaProvider = memo(function StackSafeAreaProvider({
+	children,
+}: {
+	children: ReactNode;
+}) {
+	const insets = useContext(SafeAreaInsetsContext);
 
 	if (insets) {
 		return <View style={styles.container}>{children}</View>;
@@ -56,86 +52,38 @@ function StackSafeAreaProvider({ children }: { children: React.ReactNode }) {
 			{children}
 		</SafeAreaProvider>
 	);
-}
+});
 
-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 StackCoreRoot = memo(function StackCoreRoot({
+	children,
+}: {
+	children: ReactNode;
+}) {
+	return (
+		<GestureHandlerRootView style={styles.container}>
+			<StackSafeAreaProvider>{children}</StackSafeAreaProvider>
+		</GestureHandlerRootView>
+	);
+});
 
-		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,
-			],
-		);
+export const { StackCoreProvider, useStackCoreStore } = createProvider(
+	"StackCore",
+)<StackCoreProviderProps, StackCoreContextValue>(({ config, children }) => {
+	const { TRANSITIONS_ALWAYS_ON = false } = config;
 
-		return {
-			value: { flags },
-			children: (
-				<GestureHandlerRootView
-					style={styles.container}
-					pointerEvents={
-						STACK_TYPE === StackType.COMPONENT ? "box-none" : undefined
-					}
-				>
-					<StackSafeAreaProvider>{children}</StackSafeAreaProvider>
-				</GestureHandlerRootView>
-			),
-		};
-	});
+	const flags = useMemo(
+		() => ({
+			TRANSITIONS_ALWAYS_ON,
+		}),
+		[TRANSITIONS_ALWAYS_ON],
+	);
 
-/**
- * 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>
-		);
+	return {
+		value: { flags },
+		children: <StackCoreRoot>{children}</StackCoreRoot>,
 	};
-}
+});
 
 const styles = StyleSheet.create({
 	container: { flex: 1 },
 });
-
-export { useStackCoreContext };

package/src/stores/animation.store.ts

@@ -3,12 +3,13 @@ import {
 	makeMutable,
 	type SharedValue,
 } from "react-native-reanimated";
+import { FALSE, TRUE } from "../constants";
+import { emit } from "../utils/animation/emit";
 import { createStore } from "../utils/create-store";
 
 export type AnimationStoreMap = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
-	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
 	progressSettled: SharedValue<number>;
@@ -16,11 +17,27 @@ export type AnimationStoreMap = {
 	entering: SharedValue<number>;
 };
 
+export const emitMotionStart = (animations: AnimationStoreMap) => {
+	"worklet";
+
+	animations.progressSettled.set(FALSE);
+
+	if (animations.progressAnimating.get()) {
+		return false;
+	}
+
+	emit(animations.willAnimate, TRUE, FALSE);
+	requestAnimationFrame(() => {
+		"worklet";
+		animations.progressAnimating.set(TRUE);
+	});
+	return true;
+};
+
 function createAnimationBag(): AnimationStoreMap {
 	return {
 		transitionProgress: makeMutable(0),
 		visualProgress: makeMutable(0),
-		stackProgress: makeMutable(0),
 		willAnimate: makeMutable(0),
 		closing: makeMutable(0),
 		progressAnimating: makeMutable(0),
@@ -39,7 +56,6 @@ export const AnimationStore = createStore<AnimationStoreMap>({
 	disposeBag: (bag) => {
 		cancelAnimation(bag.transitionProgress);
 		cancelAnimation(bag.visualProgress);
-		cancelAnimation(bag.stackProgress);
 		cancelAnimation(bag.willAnimate);
 		cancelAnimation(bag.progressAnimating);
 		cancelAnimation(bag.progressSettled);

package/src/stores/bounds/internals/entries.ts

@@ -62,6 +62,43 @@ function getEntry(tag: TagID, key: ScreenKey): Entry | null {
 	return boundaryRegistry.get()[tag]?.screens[key] ?? null;
 }
 
+function getMatchingSourceScreenKey(
+	tag: TagID,
+	destinationScreenKey: ScreenKey,
+	preferredScreenKey?: ScreenKey,
+	excludedScreenKeys?: readonly ScreenKey[],
+): ScreenKey | null {
+	"worklet";
+	const screens = boundaryRegistry.get()[tag]?.screens;
+	if (!screens) return null;
+	const isExcluded = (screenKey: ScreenKey) => {
+		"worklet";
+		for (let index = 0; index < (excludedScreenKeys?.length ?? 0); index++) {
+			if (excludedScreenKeys?.[index] === screenKey) {
+				return true;
+			}
+		}
+		return false;
+	};
+	if (
+		preferredScreenKey &&
+		preferredScreenKey !== destinationScreenKey &&
+		!isExcluded(preferredScreenKey) &&
+		screens[preferredScreenKey]
+	) {
+		return preferredScreenKey;
+	}
+
+	let latestScreenKey: ScreenKey | null = null;
+	for (const screenKey in screens) {
+		if (screenKey !== destinationScreenKey && !isExcluded(screenKey)) {
+			latestScreenKey = screenKey;
+		}
+	}
+
+	return latestScreenKey;
+}
+
 function setEntry(tag: TagID, screenKey: ScreenKey, patch: EntryPatch) {
 	"worklet";
 	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
@@ -90,4 +127,4 @@ function removeEntry(tag: TagID, screenKey: ScreenKey) {
 	});
 }
 
-export { getEntry, removeEntry, setEntry };
+export { getEntry, getMatchingSourceScreenKey, removeEntry, setEntry };

package/src/stores/bounds/internals/links.ts

@@ -4,12 +4,14 @@ import {
 	ensurePairGroups,
 	ensurePairLinks,
 	ensurePairSourceRequests,
+	getDestinationScreenKeyFromPairKey,
 	getGroupKeyFromTag,
 	getLinkKeyFromTag,
 	getActiveGroupId as getPairActiveGroupId,
 	getDestination as getPairDestination,
 	getLink as getPairLink,
 	getSource as getPairSource,
+	getSourceScreenKeyFromPairKey,
 } from "../helpers/link-pairs.helpers";
 import type {
 	BoundaryRuntimeFlags,
@@ -215,11 +217,12 @@ const writeDestination = (
 	bounds: MeasuredDimensions,
 	styles: StyleProps,
 	group?: GroupKey,
+	runtimeFlags: BoundaryRuntimeFlags = {},
 ) => {
 	"worklet";
 	const existingLink = getPairLink(state, pairKey, linkKey);
 
-	const destination = createLinkSide(screenKey, bounds, styles);
+	const destination = createLinkSide(screenKey, bounds, styles, runtimeFlags);
 	const link =
 		existingLink ??
 		({
@@ -239,7 +242,7 @@ const writeDestination = (
 
 	writePairLink(state, pairKey, linkKey, link);
 
-	if (link.group) {
+	if (link.group && !state[pairKey]?.groups?.[link.group]) {
 		writeGroup(state, pairKey, link.group, linkKey);
 	}
 };
@@ -296,12 +299,22 @@ function setDestination(
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
 	group?: GroupKey,
+	runtimeFlags: BoundaryRuntimeFlags = {},
 ) {
 	"worklet";
 	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
 		const linkKey = getLinkKeyFromTag(tag);
-		writeDestination(state, pairKey, linkKey, screenKey, bounds, styles, group);
+		writeDestination(
+			state,
+			pairKey,
+			linkKey,
+			screenKey,
+			bounds,
+			styles,
+			group,
+			runtimeFlags,
+		);
 
 		return state;
 	});
@@ -391,6 +404,46 @@ function getResolvedLink(
 	};
 }
 
+function getPairKeyForSource(
+	tag: TagID,
+	screenKey: ScreenKey,
+): ScreenPairKey | null {
+	"worklet";
+	const state = pairs.get();
+	const linkKey = getLinkKeyFromTag(tag);
+	let latestPairKey: ScreenPairKey | null = null;
+	let latestPairAwaitingSource: ScreenPairKey | null = null;
+
+	for (const pairKey in state) {
+		if (getSourceScreenKeyFromPairKey(pairKey) !== screenKey) continue;
+
+		const link = getResolvedLink(pairKey, tag).link;
+		const hasSourceRequest = state[pairKey]?.sourceRequests?.[linkKey];
+
+		if (!link?.destination && !hasSourceRequest) continue;
+
+		latestPairKey = pairKey;
+		if (!link?.source) {
+			latestPairAwaitingSource = pairKey;
+		}
+	}
+
+	return latestPairAwaitingSource ?? latestPairKey;
+}
+
+function getPairKeyForDestination(
+	tag: TagID,
+	screenKey: ScreenKey,
+): ScreenPairKey | null {
+	"worklet";
+	const state = pairs.get();
+	for (const pairKey in state) {
+		if (getDestinationScreenKeyFromPairKey(pairKey) !== screenKey) continue;
+		if (getResolvedLink(pairKey, tag).link) return pairKey;
+	}
+	return null;
+}
+
 function getSource(
 	pairKey: ScreenPairKey,
 	tag: TagID,
@@ -411,6 +464,8 @@ export {
 	getActiveGroupId,
 	getDestination,
 	getLink,
+	getPairKeyForDestination,
+	getPairKeyForSource,
 	getResolvedLink,
 	getSource,
 	requestSourceMeasure,