react-native-screen-transitions 4.0.0-alpha.9 → 4.1.0-alpha.0

package/src/hooks/navigation/use-screen-state.ts

@@ -61,7 +61,7 @@ export function useScreenState<
 	TNavigation extends BaseStackNavigation = BaseStackNavigation,
 >(): ScreenState<TNavigation> {
 	const { routes, scenes, routeKeys, focusedIndex } = useBlankStackStore();
-	const current = useDescriptorsStore((store) => store.current);
+	const current = useDescriptorsStore((store) => store.descriptors.current);
 
 	const index = useMemo(
 		() => routeKeys.indexOf(current.route.key),

package/src/index.ts

@@ -50,7 +50,7 @@ export {
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
-	BoundaryTeleportControl,
+	BoundaryHandoffTarget,
 	BoundsMotion,
 	BoundsMotionFrame,
 	BoundsMotionTransform,
@@ -73,7 +73,8 @@ export type {
 	ScreenInterpolationProps,
 	ScreenLayerComponentProps,
 	ScreenStyleInterpolator,
-	ScreenTransitionAccessor,
+	ScreenSurfaceComponent,
+	ScreenSurfaceComponentProps,
 	ScreenTransitionConfig,
 	ScreenTransitionDepthTarget,
 	ScreenTransitionTarget,

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

@@ -1,19 +1,6 @@
-import * as React from "react";
-import {
-	createStandardNavigator,
-	type NavigatorDescriptor,
-} from "standard-navigation";
+import { createStandardNavigator } from "standard-navigation";
 import { StackView } from "../components/stack-view";
-import {
-	type NavigationHostContextValue,
-	NavigationHostProvider,
-} from "../providers/navigation/navigation-host.provider";
-import type {
-	BlankStackDescriptor,
-	BlankStackFactoryOptions,
-	BlankStackNavigationHelpers,
-	BlankStackNavigationOptions,
-} from "../types/blank-stack.types";
+import type { BlankStackNavigationOptions } from "../types/blank-stack.types";
 import type {
 	BaseStackNavigation,
 	BaseStackRoute,
@@ -22,122 +9,27 @@ import type {
 
 export type BlankStackStandardEventMap = {};
 
-export type BlankStackStandardNavigatorProps = BlankStackFactoryOptions & {
+export type BlankStackStandardNavigatorProps = {
 	navigationState?: BaseStackState<BaseStackRoute>;
 	navigation?: BaseStackNavigation;
-	navigationHost?: NavigationHostContextValue;
-};
-
-type StandardDescriptor = NavigatorDescriptor<BlankStackNavigationOptions> & {
-	navigation?: BaseStackNavigation;
-	route?: BaseStackRoute;
 };
 
-type StandardDescriptorMap = Record<string, StandardDescriptor>;
-type BlankStackDescriptorMap = Record<string, BlankStackDescriptor>;
-
-function createDescriptorMap({
-	routes,
-	descriptors,
-	navigation,
-}: {
-	routes: BaseStackRoute[];
-	descriptors: StandardDescriptorMap;
-	navigation: BaseStackNavigation;
-}): BlankStackDescriptorMap {
-	const result: BlankStackDescriptorMap = {};
-
-	for (const route of routes) {
-		const descriptor = descriptors[route.key];
-
-		if (!descriptor) {
-			continue;
-		}
-
-		result[route.key] = {
-			route: descriptor.route ?? route,
-			navigation: (descriptor.navigation ??
-				navigation) as BlankStackDescriptor["navigation"],
-			options: descriptor.options,
-			render: () => descriptor.render() as React.JSX.Element,
-		};
-	}
-
-	return result;
-}
-
 export const BlankStackNavigator = createStandardNavigator<
 	BlankStackNavigationOptions,
 	BlankStackStandardEventMap,
 	BlankStackStandardNavigatorProps
->(
-	({
-		actions,
-		descriptors,
-		state,
-		navigation,
-		navigationHost,
-		navigationState,
-	}) => {
-		const stackState = navigationState ?? {
-			key: "blank-stack",
-			index: state.index,
-			routes: state.routes as BaseStackRoute[],
-		};
-		const stackStateRef = React.useRef(stackState);
-		stackStateRef.current = stackState;
-
-		const fallbackNavigation = React.useMemo<BaseStackNavigation>(
-			() => ({
-				getState: () => stackStateRef.current,
-				dispatch: (action) => {
-					if (action?.type === "GO_BACK" || action?.type === "POP") {
-						actions.back();
-						return;
-					}
-
-					const name = action?.payload?.name;
-					if (action?.type === "NAVIGATE" && typeof name === "string") {
-						actions.navigate(name, action.payload.params);
-					}
-				},
-			}),
-			[actions],
-		);
-		const stackNavigation = navigation ?? fallbackNavigation;
-		const stackDescriptors = React.useMemo(
-			() =>
-				createDescriptorMap({
-					routes: stackState.routes,
-					descriptors,
-					navigation: stackNavigation,
-				}),
-			[descriptors, stackNavigation, stackState.routes],
-		);
-		const describe = React.useCallback(
-			(route: BlankStackDescriptor["route"]) => {
-				const descriptor = stackDescriptors[route.key];
-
-				if (!descriptor) {
-					throw new Error(
-						`BlankStack could not find a descriptor for route "${route.key}".`,
-					);
-				}
-
-				return descriptor;
-			},
-			[stackDescriptors],
+>(({ descriptors, navigation, navigationState }) => {
+	if (!navigationState || !navigation) {
+		throw new Error(
+			"BlankStack requires navigation state and helpers from its integration.",
 		);
+	}
 
-		return (
-			<NavigationHostProvider value={navigationHost}>
-				<StackView
-					state={stackState}
-					navigation={stackNavigation as BlankStackNavigationHelpers}
-					descriptors={stackDescriptors}
-					describe={describe}
-				/>
-			</NavigationHostProvider>
-		);
-	},
-);
+	return (
+		<StackView
+			state={navigationState}
+			navigation={navigation}
+			descriptors={descriptors}
+		/>
+	);
+});

package/src/navigators/expo-router/index.tsx

@@ -4,11 +4,6 @@ import {
 	type StackRouterOptions,
 	unstable_integrateWithRouter,
 } from "expo-router";
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "expo-router/react-navigation";
-import type { NavigationScreenProviderComponent } from "../../providers/navigation/navigation-host.provider";
 import type { BlankStackNavigationOptions } from "../../types/blank-stack.types";
 import {
 	BlankStackNavigator,
@@ -18,22 +13,6 @@ import {
 
 type BlankStackExpoRouterParamList = Record<string, object | undefined>;
 
-const ExpoRouterScreenProvider: NavigationScreenProviderComponent = ({
-	children,
-	navigation,
-	route,
-}) => (
-	<NavigationContext.Provider value={navigation as never}>
-		<NavigationRouteContext.Provider value={route as never}>
-			{children}
-		</NavigationRouteContext.Provider>
-	</NavigationContext.Provider>
-);
-
-const expoRouterNavigationHost = {
-	ScreenProvider: ExpoRouterScreenProvider,
-};
-
 export const BlankStack = unstable_integrateWithRouter<
 	BlankStackNavigationOptions,
 	StackNavigationState<BlankStackExpoRouterParamList>,
@@ -44,14 +23,12 @@ export const BlankStack = unstable_integrateWithRouter<
 	createProps: ({ state, navigation }) => ({
 		navigationState: state,
 		navigation,
-		navigationHost: expoRouterNavigationHost,
 	}),
 });
 
 export const BlankStackScreen = BlankStack.Screen;
 
 export type {
-	BlankStackFactoryOptions,
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
 	BlankStackNavigationProp,

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

@@ -6,7 +6,6 @@ import {
 	type StackRouterOptions,
 	type StandardNavigationTypeBagBase,
 } from "@react-navigation/native";
-import { reactNavigationHost } from "../../providers/navigation/react-navigation-host";
 import type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
@@ -33,11 +32,9 @@ export const {
 >(BlankStackNavigator, StackRouter, ({ state, navigation }) => ({
 	navigationState: state,
 	navigation,
-	navigationHost: reactNavigationHost,
 }));
 
 export type {
-	BlankStackFactoryOptions,
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
 	BlankStackNavigationProp,

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

@@ -1,10 +1,10 @@
 import { type ReactNode, useMemo } from "react";
+import type { BoundsAccessor } from "../../../types/bounds.types";
 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 { ScreenAnimationTransitionSource } from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -13,76 +13,42 @@ type Props = {
 export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
-	transitionSources: readonly ScreenAnimationTransitionSource[];
-	transitionOriginIndex: number;
-	transitionSourcesThroughSelf: readonly ScreenAnimationTransitionSource[];
-	transitionSourcesFromSelf: readonly ScreenAnimationTransitionSource[];
+	boundsAccessor: BoundsAccessor;
 };
 
-const EMPTY_TRANSITION_SOURCES: readonly ScreenAnimationTransitionSource[] = [];
-
-const createScreenAnimationProvider = createProvider("ScreenAnimation", {
-	global: true,
-})<Props, ScreenAnimationContextValue>;
-
 export const {
+	StoreProvider: ScreenAnimationStoreProvider,
 	ScreenAnimationProvider,
 	useOptionalScreenAnimationStore,
 	useScreenAnimationStore,
-}: ReturnType<typeof createScreenAnimationProvider> =
-	createScreenAnimationProvider((_props) => {
-		const currentScreenKey = useDescriptorsStore(
-			(store) => store.derivations.currentScreenKey,
-		);
-		const relationships = useCurrentScreenRelationships();
-		const pipeline = useScreenAnimationPipeline();
+} = createProvider("ScreenAnimation", {
+	global: true,
+})<Props, ScreenAnimationContextValue>(() => {
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const isClosing = useBlankStackStore(
+		(store) => store.scenesByKey[currentScreenKey]?.activity === "closing",
+	);
+	const pipeline = useScreenAnimationPipeline();
+
+	const { screenInterpolatorProps } = pipeline;
 
-		const screenAnimationSource = useMemo<ScreenAnimationTransitionSource>(
-			() => ({
-				screenInterpolatorProps: pipeline.screenInterpolatorProps,
-				screenInterpolatorPropsRevision:
-					pipeline.screenInterpolatorPropsRevision,
-				boundsAccessor: createBoundsAccessor(() => {
-					"worklet";
-					return pipeline.screenInterpolatorProps.get();
-				}),
+	const boundsAccessor = useMemo(
+		() =>
+			createBoundsAccessor(() => {
+				"worklet";
+				return screenInterpolatorProps.get();
 			}),
-			[
-				pipeline.screenInterpolatorProps,
-				pipeline.screenInterpolatorPropsRevision,
-			],
-		);
-		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 transitionSourcesFromSelf = useMemo(
-			() => [screenAnimationSource, ...descendantSources],
-			[screenAnimationSource, descendantSources],
-		);
-		const transitionSources = useMemo(
-			() => [...transitionSourcesThroughSelf, ...descendantSources],
-			[transitionSourcesThroughSelf, descendantSources],
-		);
+		[screenInterpolatorProps],
+	);
 
-		return {
-			key: currentScreenKey,
-			value: {
-				...pipeline,
-				transitionSources,
-				transitionOriginIndex: ancestorSources.length,
-				transitionSourcesThroughSelf,
-				transitionSourcesFromSelf,
-			},
-		};
-	});
+	return {
+		key: currentScreenKey,
+		unregisterOnCleanup: isClosing,
+		value: {
+			...pipeline,
+			boundsAccessor,
+		},
+	};
+});

package/src/providers/screen/animation/helpers/pipeline.ts

@@ -34,9 +34,8 @@ export type ScreenInterpolatorFrame = Omit<
 	"bounds" | "transition"
 >;
 
-interface ScreenAnimationPipeline {
-	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
-	screenInterpolatorPropsRevision: DerivedValue<number>;
+export interface ScreenAnimationPipeline {
+	screenInterpolatorProps: DerivedValue<ScreenInterpolatorFrame>;
 	selectedInterpolatorOptions: SharedValue<SelectedInterpolatorOptions>;
 	nextInterpolator: ScreenStyleInterpolator | undefined;
 	currentInterpolator: ScreenStyleInterpolator | undefined;
@@ -281,9 +280,13 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		[routeKeys],
 	);
 
-	const currDescriptor = useDescriptorsStore((store) => store.current);
-	const nextDescriptor = useDescriptorsStore((store) => store.next);
-	const prevDescriptor = useDescriptorsStore((store) => store.previous);
+	const currDescriptor = useDescriptorsStore(
+		(store) => store.descriptors.current,
+	);
+	const nextDescriptor = useDescriptorsStore((store) => store.descriptors.next);
+	const prevDescriptor = useDescriptorsStore(
+		(store) => store.descriptors.previous,
+	);
 	const currentAnimation = useBuildTransitionState(currDescriptor);
 	const nextAnimation = useBuildTransitionState(nextDescriptor);
 	const prevAnimation = useBuildTransitionState(prevDescriptor);
@@ -306,20 +309,16 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		[dimensions, insets, currDescriptor, nextDescriptor, prevDescriptor],
 	);
 
-	const screenInterpolatorProps = useSharedValue(initialInterpolatorProps);
 	const selectedInterpolatorOptions =
 		useSharedValue<SelectedInterpolatorOptions>({
 			owner: "current",
 		});
-
-	const propsRevisionState = useSharedValue({ value: 0 });
-	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
-		"worklet";
-		screenInterpolatorProps.modify((frame) => {
+	const screenInterpolatorProps = useDerivedValue<ScreenInterpolatorFrame>(
+		() => {
 			"worklet";
 			const interpolatorOptions = selectedInterpolatorOptions.get();
 			return hydrateInterpolatorFrame({
-				frame,
+				frame: { ...initialInterpolatorProps },
 				dimensions,
 				insets,
 				currentAnimation,
@@ -330,25 +329,14 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 				stackProgressEntries,
 				currentRouteKey,
 			});
-		}, false);
-
-		// `screenInterpolatorProps` is mutated in place. Consumers read this
-		// revision first so Reanimated subscribes to the hydrated frame.
-		propsRevisionState.modify((revision) => {
-			"worklet";
-			revision.value += 1;
-			return revision;
-		}, false);
-
-		return propsRevisionState.get().value;
-	});
+		},
+	);
 
 	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
 	const currentInterpolator = currDescriptor.options.screenStyleInterpolator;
 
 	return {
 		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
 		selectedInterpolatorOptions,
 		nextInterpolator,
 		currentInterpolator,

package/src/providers/screen/animation/types.ts

@@ -1,14 +1,3 @@
-import type { SharedValue } from "react-native-reanimated";
 import type { ScreenTransitionTarget } from "../../../types/animation.types";
-import type { BoundsAccessor } from "../../../types/bounds.types";
-import type { ScreenInterpolatorFrame } from "./helpers/pipeline";
-
-export type ScreenInterpolatorPropsRevision = Pick<SharedValue<number>, "get">;
 
 export type ScreenAnimationTarget = ScreenTransitionTarget;
-
-export type ScreenAnimationTransitionSource = {
-	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
-	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision;
-	boundsAccessor: BoundsAccessor;
-};

package/src/providers/screen/animation/use-screen-animation.tsx

@@ -3,10 +3,12 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../types/animation.types";
-import { useNavigationRoute } from "../../navigation/navigation-host.provider";
-import { useOptionalScreenAnimationStore } from "./animation.provider";
-import { useBuildTransitionAccessor } from "./helpers/accessors/use-build-transition-accessor";
-import { readScreenAnimationRevisions } from "./helpers/read-screen-animation-revisions";
+import { useOptionalDescriptorsStore } from "../descriptors";
+import { useResolvedTransitionKey } from "../topology";
+import {
+	useOptionalScreenAnimationStore,
+	useScreenAnimationStore,
+} from "./animation.provider";
 import type { ScreenAnimationTarget } from "./types";
 
 export type { ScreenAnimationTarget } from "./types";
@@ -23,27 +25,45 @@ export function useScreenAnimation(
 ):
 	| DerivedValue<ScreenInterpolationProps>
 	| DerivedValue<ScreenInterpolationProps | null> {
-	const routeKey = useNavigationRoute().key;
-	const localAnimationStore = useOptionalScreenAnimationStore();
-	const keyedAnimationStore = useOptionalScreenAnimationStore(
-		localAnimationStore ? null : routeKey,
+	const currentKey = useOptionalDescriptorsStore(
+		(store) => store?.derivations.currentScreenKey ?? null,
 	);
-	const screenAnimationStore = localAnimationStore ?? keyedAnimationStore;
 
-	if (!screenAnimationStore) {
-		throw new Error(
-			`ScreenAnimationStore is unavailable for route "${routeKey}"`,
-		);
-	}
+	const localInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
+	const localBoundsAccessor = useScreenAnimationStore(
+		(store) => store.boundsAccessor,
+	);
+
+	const usesLocalStore =
+		target === undefined || (typeof target === "object" && target.depth === 0);
+
+	const screenKey = useResolvedTransitionKey(currentKey, target);
 
-	const { transitionSources } = screenAnimationStore;
-	const transition = useBuildTransitionAccessor(screenAnimationStore);
-	const transitionTarget = target;
+	const keyedInterpolatorProps = useOptionalScreenAnimationStore(
+		usesLocalStore ? null : screenKey,
+		(store) => store.screenInterpolatorProps,
+	);
+	const keyedBoundsAccessor = useOptionalScreenAnimationStore(
+		usesLocalStore ? null : screenKey,
+		(store) => store.boundsAccessor,
+	);
+
+	const screenInterpolatorProps = usesLocalStore
+		? localInterpolatorProps
+		: keyedInterpolatorProps;
+	const boundsAccessor = usesLocalStore
+		? localBoundsAccessor
+		: keyedBoundsAccessor;
 
 	const animation = useDerivedValue<ScreenInterpolationProps | null>(() => {
-		"worklet";
-		readScreenAnimationRevisions(transitionSources);
-		return transition(transitionTarget);
+		if (!screenInterpolatorProps || !boundsAccessor) return null;
+
+		return {
+			...screenInterpolatorProps.get(),
+			bounds: boundsAccessor,
+		};
 	});
 
 	return animation;