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

package/src/navigators/create-blank-stack-navigator.tsx

@@ -18,7 +18,6 @@ import type {
 	BaseStackNavigation,
 	BaseStackRoute,
 	BaseStackState,
-	StackDescriptorSource,
 } from "../types/stack.types";
 
 export type BlankStackStandardEventMap = {};
@@ -35,10 +34,7 @@ type StandardDescriptor = NavigatorDescriptor<BlankStackNavigationOptions> & {
 };
 
 type StandardDescriptorMap = Record<string, StandardDescriptor>;
-type BlankStackDescriptorSourceMap = Record<
-	string,
-	StackDescriptorSource<BlankStackDescriptor>
->;
+type BlankStackDescriptorMap = Record<string, BlankStackDescriptor>;
 
 function createDescriptorMap({
 	routes,
@@ -48,8 +44,8 @@ function createDescriptorMap({
 	routes: BaseStackRoute[];
 	descriptors: StandardDescriptorMap;
 	navigation: BaseStackNavigation;
-}): BlankStackDescriptorSourceMap {
-	const result: BlankStackDescriptorSourceMap = {};
+}): BlankStackDescriptorMap {
+	const result: BlankStackDescriptorMap = {};
 
 	for (const route of routes) {
 		const descriptor = descriptors[route.key];
@@ -82,8 +78,6 @@ export const BlankStackNavigator = createStandardNavigator<
 		navigation,
 		navigationHost,
 		navigationState,
-		nativeScreens,
-		enableNativeScreens,
 	}) => {
 		const stackState = navigationState ?? {
 			key: "blank-stack",
@@ -111,7 +105,6 @@ export const BlankStackNavigator = createStandardNavigator<
 			[actions],
 		);
 		const stackNavigation = navigation ?? fallbackNavigation;
-		const nativeScreensEnabled = nativeScreens ?? enableNativeScreens ?? true;
 		const stackDescriptors = React.useMemo(
 			() =>
 				createDescriptorMap({
@@ -139,7 +132,6 @@ export const BlankStackNavigator = createStandardNavigator<
 		return (
 			<NavigationHostProvider value={navigationHost}>
 				<StackView
-					DISABLE_NATIVE_SCREENS={!nativeScreensEnabled}
 					state={stackState}
 					navigation={stackNavigation as BlankStackNavigationHelpers}
 					descriptors={stackDescriptors}

package/src/navigators/react-navigation/index.tsx

@@ -1,22 +1,15 @@
 import {
 	createStandardNavigationFactories,
-	type NavigatorTypeBagBase,
-	type ParamListBase,
 	type StackActionHelpers,
 	type StackNavigationState,
 	StackRouter,
 	type StackRouterOptions,
 	type StandardNavigationTypeBagBase,
-	type StaticConfig,
-	type TypedNavigator,
 } from "@react-navigation/native";
-import type * as React from "react";
 import { reactNavigationHost } from "../../providers/navigation/react-navigation-host";
 import type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
-	BlankStackNavigationProp,
-	BlankStackNavigatorProps,
 } from "../../types/blank-stack.types";
 import {
 	BlankStackNavigator,
@@ -31,26 +24,10 @@ interface BlankStackStandardTypeBag extends StandardNavigationTypeBagBase {
 	RouterOptions: StackRouterOptions;
 }
 
-type BlankStackTypeBagFor<
-	ParamList extends ParamListBase,
-	NavigatorID extends string | undefined,
-> = NavigatorTypeBagBase & {
-	ParamList: ParamList;
-	NavigatorID: NavigatorID;
-	State: StackNavigationState<ParamList>;
-	ScreenOptions: BlankStackNavigationOptions;
-	EventMap: BlankStackNavigationEventMap;
-	NavigationList: {
-		[RouteName in keyof ParamList]: BlankStackNavigationProp<
-			ParamList,
-			RouteName,
-			NavigatorID
-		>;
-	};
-	Navigator: React.ComponentType<BlankStackNavigatorProps>;
-};
-
-const standardBlankStackFactories = createStandardNavigationFactories<
+export const {
+	createNavigator: createBlankStackNavigator,
+	createScreen: createBlankStackScreen,
+} = createStandardNavigationFactories<
 	BlankStackStandardTypeBag,
 	BlankStackStandardNavigatorProps
 >(BlankStackNavigator, StackRouter, ({ state, navigation }) => ({
@@ -59,27 +36,6 @@ const standardBlankStackFactories = createStandardNavigationFactories<
 	navigationHost: reactNavigationHost,
 }));
 
-export const createBlankStackScreen = standardBlankStackFactories.createScreen;
-
-const createReactNavigationBlankStackNavigator =
-	standardBlankStackFactories.createNavigator as unknown as (
-		config?: unknown,
-	) => unknown;
-
-export function createBlankStackNavigator<
-	const ParamList extends ParamListBase = ParamListBase,
-	const NavigatorID extends string | undefined = undefined,
-	const TypeBag extends NavigatorTypeBagBase = BlankStackTypeBagFor<
-		ParamList,
-		NavigatorID
-	>,
-	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
->(config?: Config): TypedNavigator<TypeBag, Config> {
-	return createReactNavigationBlankStackNavigator(
-		config,
-	) as unknown as TypedNavigator<TypeBag, Config>;
-}
-
 export type {
 	BlankStackFactoryOptions,
 	BlankStackNavigationEventMap,

package/src/providers/helpers/measured-bounds-writes.ts

@@ -67,6 +67,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
+			{ handoff },
 		);
 	}
 };

package/src/providers/navigation/navigation-host.provider.tsx

@@ -27,6 +27,9 @@ const NavigationHostContext = createContext<NavigationHostContextValue>(
 );
 NavigationHostContext.displayName = "NavigationHost";
 
+const NavigationRouteContext = createContext<BaseStackRoute | null>(null);
+NavigationRouteContext.displayName = "StandardNavigationRoute";
+
 export function NavigationHostProvider({
 	children,
 	value,
@@ -53,8 +56,20 @@ export function NavigationScreenProvider({
 	const { ScreenProvider } = useContext(NavigationHostContext);
 
 	return (
-		<ScreenProvider navigation={navigation} route={route}>
-			{children}
-		</ScreenProvider>
+		<NavigationRouteContext.Provider value={route}>
+			<ScreenProvider navigation={navigation} route={route}>
+				{children}
+			</ScreenProvider>
+		</NavigationRouteContext.Provider>
 	);
 }
+
+export function useNavigationRoute() {
+	const route = useContext(NavigationRouteContext);
+
+	if (!route) {
+		throw new Error("Navigation route is unavailable");
+	}
+
+	return route;
+}

package/src/providers/screen/animation/animation.provider.tsx

@@ -1,21 +1,11 @@
-import {
-	type ReactNode,
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-} from "react";
-import { useSharedValue } from "react-native-reanimated";
+import { type ReactNode, useMemo } from "react";
 import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
+import { useBlankStackStore } from "../../stack/blank-stack.provider";
+import { useDescriptorsStore } from "../descriptors";
+import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import type {
-	RegisterScreenAnimationDescendant,
-	ScreenAnimationAncestorDescendantRegistrar,
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenAnimationTransitionSource,
-} from "./types";
+import type { ScreenAnimationTransitionSource } from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -24,188 +14,80 @@ type Props = {
 export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
-	ancestorScreenAnimationSources: ScreenAnimationSource[];
-	descendantScreenAnimationSources: ScreenAnimationDescendantSources;
-	registerDescendantScreenAnimationSource: RegisterScreenAnimationDescendant;
-	ancestorDescendantScreenAnimationRegistrars: ScreenAnimationAncestorDescendantRegistrar[];
+	transitionSources: readonly ScreenAnimationTransitionSource[];
+	transitionOriginIndex: number;
+	transitionSourcesThroughSelf: readonly ScreenAnimationTransitionSource[];
+	transitionSourcesFromSelf: readonly ScreenAnimationTransitionSource[];
 };
 
-export type ScreenAnimationContextResult = {
-	value: ScreenAnimationContextValue;
-};
+const EMPTY_TRANSITION_SOURCES: readonly ScreenAnimationTransitionSource[] = [];
+
+const createScreenAnimationProvider = createProvider("ScreenAnimation", {
+	global: true,
+})<Props, ScreenAnimationContextValue>;
 
 export const {
 	ScreenAnimationProvider,
-	ScreenAnimationContext,
-	useScreenAnimationContext,
-} = createProvider("ScreenAnimation", {
-	guarded: true,
-})<Props, ScreenAnimationContextValue>((): ScreenAnimationContextResult => {
-	const parentContext = useContext(ScreenAnimationContext);
-	const parentScreenInterpolatorProps = parentContext?.screenInterpolatorProps;
-	const parentScreenInterpolatorPropsRevision =
-		parentContext?.screenInterpolatorPropsRevision;
-	const parentAncestorScreenAnimationSources =
-		parentContext?.ancestorScreenAnimationSources;
-	const parentRegisterDescendantScreenAnimationSource =
-		parentContext?.registerDescendantScreenAnimationSource;
-	const parentAncestorDescendantScreenAnimationRegistrars =
-		parentContext?.ancestorDescendantScreenAnimationRegistrars;
-
-	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-	} = useScreenAnimationPipeline();
-
-	const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
-		() => ({
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-		}),
-		[screenInterpolatorProps, screenInterpolatorPropsRevision],
-	);
+	useOptionalScreenAnimationStore,
+	useScreenAnimationStore,
+}: ReturnType<typeof createScreenAnimationProvider> =
+	createScreenAnimationProvider((_props) => {
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const isClosing = useBlankStackStore(
+			(store) => store.scenesByKey[currentScreenKey]?.activity === "closing",
+		);
+		const relationships = useCurrentScreenRelationships();
+		const pipeline = useScreenAnimationPipeline();
 
-	const selfScreenAnimationTransitionSource =
-		useMemo<ScreenAnimationTransitionSource>(
+		const screenAnimationSource = useMemo<ScreenAnimationTransitionSource>(
 			() => ({
-				...selfScreenAnimationSource,
+				screenInterpolatorProps: pipeline.screenInterpolatorProps,
+				screenInterpolatorPropsRevision:
+					pipeline.screenInterpolatorPropsRevision,
 				boundsAccessor: createBoundsAccessor(() => {
 					"worklet";
-					return selfScreenAnimationSource.screenInterpolatorProps.get();
+					return pipeline.screenInterpolatorProps.get();
 				}),
 			}),
-			[selfScreenAnimationSource],
+			[
+				pipeline.screenInterpolatorProps,
+				pipeline.screenInterpolatorPropsRevision,
+			],
 		);
-
-	const descendantScreenAnimationSources = useSharedValue<
-		ScreenAnimationDescendantSources["value"]
-	>([]);
-
-	const registerDescendantScreenAnimationSource =
-		useCallback<RegisterScreenAnimationDescendant>(
-			(source, depth) => {
-				descendantScreenAnimationSources.modify(
-					<T extends ScreenAnimationDescendantSources["value"]>(
-						currentSources: T,
-					): T => {
-						"worklet";
-						const existingIndex = currentSources.findIndex(
-							(currentSource) => currentSource.source === source,
-						);
-
-						if (
-							existingIndex !== -1 &&
-							currentSources[existingIndex]?.depth === depth
-						) {
-							return currentSources;
-						}
-
-						const nextSources =
-							existingIndex === -1
-								? [...currentSources, { source, depth }]
-								: currentSources.map((currentSource, index) =>
-										index === existingIndex ? { source, depth } : currentSource,
-									);
-
-						return nextSources.sort((a, b) => a.depth - b.depth) as T;
-					},
-				);
-
-				return () => {
-					descendantScreenAnimationSources.modify(
-						<T extends ScreenAnimationDescendantSources["value"]>(
-							currentSources: T,
-						): T => {
-							"worklet";
-							return currentSources.filter(
-								(currentSource) => currentSource.source !== source,
-							) as T;
-						},
-					);
-				};
-			},
-			[descendantScreenAnimationSources],
+		const ancestorSources =
+			useOptionalScreenAnimationStore(
+				relationships.parentScreenKey,
+				(store) => store.transitionSourcesThroughSelf,
+			) ?? EMPTY_TRANSITION_SOURCES;
+		const descendantSources =
+			useOptionalScreenAnimationStore(
+				relationships.activeChildScreenKey,
+				(store) => store.transitionSourcesFromSelf,
+			) ?? EMPTY_TRANSITION_SOURCES;
+		const transitionSourcesThroughSelf = useMemo(
+			() => [...ancestorSources, screenAnimationSource],
+			[ancestorSources, screenAnimationSource],
 		);
-
-	const ancestorScreenAnimationSources = useMemo(() => {
-		if (
-			!parentScreenInterpolatorProps ||
-			!parentScreenInterpolatorPropsRevision ||
-			!parentAncestorScreenAnimationSources
-		) {
-			return [];
-		}
-
-		return [
-			{
-				screenInterpolatorProps: parentScreenInterpolatorProps,
-				screenInterpolatorPropsRevision: parentScreenInterpolatorPropsRevision,
-			},
-			...parentAncestorScreenAnimationSources,
-		];
-	}, [
-		parentScreenInterpolatorProps,
-		parentScreenInterpolatorPropsRevision,
-		parentAncestorScreenAnimationSources,
-	]);
-
-	const ancestorDescendantScreenAnimationRegistrars = useMemo(() => {
-		if (!parentRegisterDescendantScreenAnimationSource) {
-			return [];
-		}
-
-		// Each provider exposes its own descendant registrar and forwards ancestor
-		// registrars, letting a mounted child register with every ancestor scope.
-		return [
-			{
-				register: parentRegisterDescendantScreenAnimationSource,
-				depth: 1,
-			},
-			...(parentAncestorDescendantScreenAnimationRegistrars ?? []).map(
-				(registrar) => ({
-					register: registrar.register,
-					depth: registrar.depth + 1,
-				}),
-			),
-		];
-	}, [
-		parentRegisterDescendantScreenAnimationSource,
-		parentAncestorDescendantScreenAnimationRegistrars,
-	]);
-
-	useLayoutEffect(() => {
-		const cleanups = ancestorDescendantScreenAnimationRegistrars.map(
-			(registrar) =>
-				registrar.register(
-					selfScreenAnimationTransitionSource,
-					registrar.depth,
-				),
+		const transitionSourcesFromSelf = useMemo(
+			() => [screenAnimationSource, ...descendantSources],
+			[screenAnimationSource, descendantSources],
+		);
+		const transitionSources = useMemo(
+			() => [...transitionSourcesThroughSelf, ...descendantSources],
+			[transitionSourcesThroughSelf, descendantSources],
 		);
 
-		return () => {
-			for (const cleanup of cleanups) {
-				cleanup();
-			}
+		return {
+			key: currentScreenKey,
+			unregisterOnCleanup: isClosing,
+			value: {
+				...pipeline,
+				transitionSources,
+				transitionOriginIndex: ancestorSources.length,
+				transitionSourcesThroughSelf,
+				transitionSourcesFromSelf,
+			},
 		};
-	}, [
-		ancestorDescendantScreenAnimationRegistrars,
-		selfScreenAnimationTransitionSource,
-	]);
-
-	return {
-		value: {
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-			selectedInterpolatorOptions,
-			nextInterpolator,
-			currentInterpolator,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-			registerDescendantScreenAnimationSource,
-			ancestorDescendantScreenAnimationRegistrars,
-		},
-	};
-});
+	});

package/src/providers/screen/animation/helpers/accessors/use-build-transition-accessor.ts

@@ -3,18 +3,18 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../../../types/animation.types";
-import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationContext } from "../../animation.provider";
-import type {
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenAnimationTransitionSource,
-} from "../../types";
+import type { ScreenAnimationContextValue } from "../../animation.provider";
+import type { ScreenAnimationTransitionSource } from "../../types";
 
 type TransitionSourceIndex = number;
 
 export type TransitionAccessorSource = ScreenAnimationTransitionSource;
 
+type TransitionAccessorStore = Pick<
+	ScreenAnimationContextValue,
+	"transitionSources" | "transitionOriginIndex"
+>;
+
 const resolveTargetIndex = (
 	target: ScreenTransitionTarget | undefined,
 	currentIndex: TransitionSourceIndex,
@@ -40,29 +40,9 @@ const resolveTargetIndex = (
 export const createTransitionAccessor = (
 	sources: readonly TransitionAccessorSource[],
 	originIndex = 0,
-	descendantSources?: ScreenAnimationDescendantSources,
 ) => {
 	"worklet";
 
-	const getSources = (): readonly TransitionAccessorSource[] => {
-		"worklet";
-		if (!descendantSources) {
-			return sources;
-		}
-
-		const descendants = descendantSources.get();
-		if (descendants.length === 0) {
-			return sources;
-		}
-
-		const currentSources = sources.slice();
-		for (let index = 0; index < descendants.length; index++) {
-			currentSources.push(descendants[index].source);
-		}
-
-		return currentSources;
-	};
-
 	const buildScope = (
 		sourceIndex: TransitionSourceIndex,
 		currentSources: readonly TransitionAccessorSource[],
@@ -96,66 +76,21 @@ export const createTransitionAccessor = (
 
 	return (target?: ScreenTransitionTarget): ScreenInterpolationProps | null => {
 		"worklet";
-		const currentSources = getSources();
-		const targetIndex = resolveTargetIndex(
-			target,
-			originIndex,
-			currentSources.length,
-		);
+		const targetIndex = resolveTargetIndex(target, originIndex, sources.length);
 		if (targetIndex === -1) {
 			return null;
 		}
 
-		return buildScope(targetIndex, currentSources);
+		return buildScope(targetIndex, sources);
 	};
 };
 
-const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
-	"worklet";
-	return createBoundsAccessor(() => {
-		"worklet";
-		return source.screenInterpolatorProps.get();
-	});
-};
-
-export const useBuildTransitionAccessor = () => {
-	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationContext();
-
-	return useMemo(() => {
-		const selfSource = {
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-		};
-
-		const transitionSources: TransitionAccessorSource[] =
-			ancestorScreenAnimationSources.map((source) => ({
-				...source,
-				boundsAccessor: buildSourceBoundsAccessor(source),
-			}));
-
-		const selfTransitionSource = {
-			...selfSource,
-			boundsAccessor: buildSourceBoundsAccessor(selfSource),
-		};
-
-		transitionSources.reverse();
-		const originIndex = transitionSources.length;
-		transitionSources.push(selfTransitionSource);
-
-		return createTransitionAccessor(
-			transitionSources,
-			originIndex,
-			descendantScreenAnimationSources,
-		);
-	}, [
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	]);
+export const useBuildTransitionAccessor = ({
+	transitionSources,
+	transitionOriginIndex,
+}: TransitionAccessorStore) => {
+	return useMemo(
+		() => createTransitionAccessor(transitionSources, transitionOriginIndex),
+		[transitionSources, transitionOriginIndex],
+	);
 };

package/src/providers/screen/animation/helpers/build-screen-transition-options.ts

@@ -7,10 +7,6 @@ import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-scr
 export const buildScreenTransitionOptions = (
 	options: ScreenTransitionConfig,
 ): ScreenTransitionOptions => {
-	const hasSheetScrollGestureBehavior =
-		options.sheetScrollGestureBehavior !== undefined ||
-		options.expandViaScrollView !== undefined;
-
 	return {
 		navigationMaskEnabled: options.navigationMaskEnabled,
 		gestureEnabled: options.gestureEnabled,
@@ -20,14 +16,12 @@ export const buildScreenTransitionOptions = (
 		gestureVelocityImpact: options.gestureVelocityImpact,
 		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
 		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
-		gestureResponseDistance: options.gestureResponseDistance,
-		gestureProgressMode: options.gestureProgressMode,
-		gestureDrivesProgress: options.gestureDrivesProgress,
-		gestureActivationArea: options.gestureActivationArea,
 		gestureSnapLocked: options.gestureSnapLocked,
-		sheetScrollGestureBehavior: hasSheetScrollGestureBehavior
-			? resolveSheetScrollGestureBehavior(options)
-			: undefined,
+		sheetSnapBehavior: options.sheetSnapBehavior,
+		sheetScrollGestureBehavior:
+			options.sheetScrollGestureBehavior !== undefined
+				? resolveSheetScrollGestureBehavior(options)
+				: undefined,
 		backdropBehavior: options.backdropBehavior,
 	};
 };