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

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

@@ -3,13 +3,11 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../types/animation.types";
-import { useScreenAnimationContext } from "./animation.provider";
+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 type {
-	ScreenAnimationLegacyTarget,
-	ScreenAnimationTarget,
-} from "./types";
+import type { ScreenAnimationTarget } from "./types";
 
 export type { ScreenAnimationTarget } from "./types";
 
@@ -17,75 +15,36 @@ export function useScreenAnimation(): DerivedValue<ScreenInterpolationProps>;
 export function useScreenAnimation(target: {
 	depth: 0;
 }): DerivedValue<ScreenInterpolationProps>;
-/** @deprecated Use `{ depth: 0 }`. */
-export function useScreenAnimation(
-	target: "self",
-): DerivedValue<ScreenInterpolationProps>;
 export function useScreenAnimation(
 	target: ScreenTransitionTarget,
 ): DerivedValue<ScreenInterpolationProps | null>;
-/** @deprecated Use `{ depth }`. */
-export function useScreenAnimation(
-	target: Exclude<ScreenAnimationLegacyTarget, "self">,
-): DerivedValue<ScreenInterpolationProps | null>;
 export function useScreenAnimation(
 	target?: ScreenAnimationTarget,
 ):
 	| DerivedValue<ScreenInterpolationProps>
 	| DerivedValue<ScreenInterpolationProps | null> {
-	const {
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationContext();
-	const transition = useBuildTransitionAccessor();
-	const transitionTarget = normalizeScreenAnimationTarget(
-		target,
-		ancestorScreenAnimationSources.length,
+	const routeKey = useNavigationRoute().key;
+	const localAnimationStore = useOptionalScreenAnimationStore();
+	const keyedAnimationStore = useOptionalScreenAnimationStore(
+		localAnimationStore ? null : routeKey,
 	);
+	const screenAnimationStore = localAnimationStore ?? keyedAnimationStore;
+
+	if (!screenAnimationStore) {
+		throw new Error(
+			`ScreenAnimationStore is unavailable for route "${routeKey}"`,
+		);
+	}
+
+	const { transitionSources } = screenAnimationStore;
+	const transition = useBuildTransitionAccessor(screenAnimationStore);
+	const transitionTarget = target;
 
 	const animation = useDerivedValue<ScreenInterpolationProps | null>(() => {
 		"worklet";
-		readScreenAnimationRevisions(
-			screenInterpolatorPropsRevision,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-		);
+		readScreenAnimationRevisions(transitionSources);
 		return transition(transitionTarget);
 	});
 
 	return animation;
 }
-
-const isTransitionTarget = (
-	target: ScreenAnimationTarget,
-): target is ScreenTransitionTarget => {
-	return typeof target === "object" && target !== null && "depth" in target;
-};
-
-const normalizeScreenAnimationTarget = (
-	target: ScreenAnimationTarget | undefined,
-	ancestorCount: number,
-): ScreenTransitionTarget | undefined => {
-	if (target === undefined || isTransitionTarget(target)) {
-		return target;
-	}
-
-	if (target === "self") {
-		return { depth: 0 };
-	}
-
-	if (target === "parent") {
-		return { depth: -1 };
-	}
-
-	if (target === "root") {
-		return { depth: ancestorCount > 0 ? -ancestorCount : -1 };
-	}
-
-	if (!Number.isInteger(target.ancestor) || target.ancestor < 1) {
-		return { depth: Number.NaN };
-	}
-
-	return { depth: -target.ancestor };
-};

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

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { useLayoutEffect, useMemo } from "react";
+import { screenTopology } from "../../../factories/screen-topology";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import type { BaseStackDescriptor } from "../../../types/stack.types";
 import createProvider from "../../../utils/create-provider";
 import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
 import { deriveDescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-import { getAncestorKeyState } from "./helpers/get-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -13,99 +14,122 @@ import { getAncestorKeyState } from "./helpers/get-ancestor-keys";
  */
 export type BaseDescriptor = BaseStackDescriptor;
 
-export interface DescriptorsContextValue<
-	TDescriptor extends BaseDescriptor = BaseDescriptor,
-> {
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
+export interface DescriptorsContextValue {
+	previous?: BaseDescriptor;
+	current: BaseDescriptor;
+	next?: BaseDescriptor;
 }
 
 export type DescriptorDerivationsContextValue = DescriptorDerivations;
 
-interface DescriptorStoreValue<
-	TDescriptor extends BaseDescriptor = BaseDescriptor,
-> {
-	descriptors: DescriptorsContextValue<TDescriptor>;
+interface DescriptorStoreValue extends DescriptorsContextValue {
+	descriptors: DescriptorsContextValue;
 	derivations: DescriptorDerivationsContextValue;
+	options: BaseDescriptor["options"];
 }
 
-interface DescriptorsProviderProps<TDescriptor extends BaseDescriptor> {
+type DescriptorsProviderProps = {
 	children: ReactNode;
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-}
+	previous?: BaseDescriptor;
+	current?: BaseDescriptor;
+	next?: BaseDescriptor;
+	routeKey?: string;
+};
+
+const createDescriptorsProvider = createProvider("Descriptors", {
+	global: true,
+})<DescriptorsProviderProps, DescriptorStoreValue>;
 
 const {
-	DescriptorsProvider: InternalDescriptorsProvider,
+	DescriptorsProvider,
 	useDescriptorsStore,
-} = createProvider("Descriptors", { guarded: true })<
-	DescriptorsProviderProps<BaseDescriptor>,
-	DescriptorStoreValue<BaseDescriptor>
->(({ previous, current, next, children }) => {
-	const descriptors = useMemo(
-		() => ({ previous, current, next }),
-		[previous, current, next],
-	);
-
-	const { ancestorKeys, ancestorDestinationPairKey } = useMemo(
-		() => getAncestorKeyState(current),
-		[current],
-	);
-
-	const derivations = useMemo(
-		() =>
-			deriveDescriptorDerivations({
-				previous,
-				current,
-				next,
-				ancestorKeys,
-				ancestorDestinationPairKey,
+	useOptionalDescriptorsStore,
+}: ReturnType<typeof createDescriptorsProvider> = createDescriptorsProvider(
+	({ previous, current, next, routeKey, children }) => {
+		const parentScreenKey = useOptionalDescriptorsStore(
+			(store) => store?.derivations.currentScreenKey,
+		);
+		const blankStackCurrent = useBlankStackStore((store) =>
+			routeKey ? store.scenesByKey[routeKey]?.descriptor : undefined,
+		);
+		const blankStackPrevious = useBlankStackStore((store) =>
+			routeKey ? store.scenesByKey[routeKey]?.previousDescriptor : undefined,
+		);
+		const blankStackNext = useBlankStackStore((store) =>
+			routeKey ? store.scenesByKey[routeKey]?.nextDescriptor : undefined,
+		);
+		const blankStackFocusedScene = useBlankStackStore(
+			(store) => store.scenes[store.focusedIndex],
+		);
+		const resolvedCurrent = current ?? blankStackCurrent;
+		const resolvedPrevious = previous ?? blankStackPrevious;
+		const resolvedNext = next ?? blankStackNext;
+		const currentScreenKey = current?.route.key ?? routeKey;
+		const focusedScene = blankStackFocusedScene;
+		const isActiveScreen =
+			focusedScene?.route.key === currentScreenKey &&
+			focusedScene?.activity === "active";
+
+		if (!resolvedCurrent) {
+			throw new Error(
+				`Descriptors scene "${routeKey ?? "unknown"}" was not found.`,
+			);
+		}
+
+		const descriptors = useMemo(
+			() => ({
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
 			}),
-		[previous, current, next, ancestorKeys, ancestorDestinationPairKey],
-	);
-
-	const value = useMemo(
-		() => ({
-			descriptors,
-			derivations,
-		}),
-		[descriptors, derivations],
-	);
-
-	return {
-		value,
-		children,
-	};
-});
-
-export function DescriptorsProvider<TDescriptor extends BaseDescriptor>({
-	children,
-	previous,
-	current,
-	next,
-}: DescriptorsProviderProps<TDescriptor>) {
-	const providerProps = {
-		previous,
-		current,
-		next,
-		children,
-	};
-
-	return <InternalDescriptorsProvider {...providerProps} />;
-}
+			[resolvedPrevious, resolvedCurrent, resolvedNext],
+		);
 
-export function useDescriptors<
-	TDescriptor extends BaseDescriptor = BaseDescriptor,
->() {
-	return useDescriptorsStore(
-		(store) => store.descriptors,
-	) as DescriptorsContextValue<TDescriptor>;
-}
+		const derivations = useMemo(
+			() =>
+				deriveDescriptorDerivations({
+					previous: resolvedPrevious,
+					current: resolvedCurrent,
+					next: resolvedNext,
+				}),
+			[resolvedPrevious, resolvedCurrent, resolvedNext],
+		);
 
-export function useDescriptorDerivations(): DescriptorDerivationsContextValue {
-	return useDescriptorsStore((store) => store.derivations);
-}
+		useLayoutEffect(() => {
+			screenTopology.register({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey,
+			});
+
+			return () => {
+				screenTopology.unregister(derivations.currentScreenKey);
+			};
+		}, [derivations.currentScreenKey, parentScreenKey]);
+
+		useLayoutEffect(() => {
+			if (!isActiveScreen || !parentScreenKey) {
+				return;
+			}
+
+			return screenTopology.activate({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey,
+			});
+		}, [isActiveScreen, derivations.currentScreenKey, parentScreenKey]);
+
+		return {
+			key: derivations.currentScreenKey,
+			value: {
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
+				descriptors,
+				derivations,
+				options: resolvedCurrent.options,
+			},
+			children,
+		};
+	},
+);
 
-export { useDescriptorsStore };
+export { DescriptorsProvider, useDescriptorsStore };

package/src/providers/screen/descriptors/helpers/derive-descriptor-derivations.ts

@@ -8,11 +8,8 @@ export interface DescriptorDerivations {
 	nextScreenKey?: string;
 	sourcePairKey?: ScreenPairKey;
 	destinationPairKey?: ScreenPairKey;
-	ancestorDestinationPairKey?: ScreenPairKey;
-	parentScreenKey?: string;
 	isFirstKey: boolean;
 	isTopMostScreen: boolean;
-	ancestorKeys: string[];
 	hasConfiguredInterpolator: boolean;
 }
 
@@ -20,16 +17,12 @@ interface Params {
 	previous?: BaseStackDescriptor;
 	current: BaseStackDescriptor;
 	next?: BaseStackDescriptor;
-	ancestorKeys: string[];
-	ancestorDestinationPairKey?: ScreenPairKey;
 }
 
 export function deriveDescriptorDerivations({
 	previous,
 	current,
 	next,
-	ancestorKeys,
-	ancestorDestinationPairKey,
 }: Params): DescriptorDerivations {
 	const previousScreenKey = previous?.route.key;
 	const currentScreenKey = current.route.key;
@@ -56,11 +49,8 @@ export function deriveDescriptorDerivations({
 		nextScreenKey,
 		sourcePairKey,
 		destinationPairKey,
-		ancestorDestinationPairKey,
-		parentScreenKey: ancestorKeys[0],
 		isFirstKey,
 		isTopMostScreen,
-		ancestorKeys,
 		hasConfiguredInterpolator,
 	};
 }

package/src/providers/screen/descriptors/index.tsx

@@ -1,7 +1,5 @@
 export {
 	type BaseDescriptor,
 	DescriptorsProvider,
-	useDescriptorDerivations,
-	useDescriptors,
 	useDescriptorsStore,
 } from "./descriptors.provider";

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

@@ -1,100 +1,123 @@
-import { useMemo } from "react";
+import { Fragment, useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import { useSharedValue } from "react-native-reanimated";
 import { ScrollStore } from "../../../stores/scroll.store";
 import createProvider from "../../../utils/create-provider";
-import { useDescriptorDerivations } from "../descriptors";
+import { useDescriptorsStore } from "../descriptors";
+import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
-import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
+import { GestureOwnershipBridge } from "./ownership/gesture-ownership-bridge";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
-import { useBuildRotationGesture } from "./rotation/use-build-rotation-gesture";
 import {
 	type DirectionClaimMap,
 	type GestureCompositionOwner,
 	type GestureContextType,
 	NO_DIRECTION_CLAIMS,
+	type ScreenGestureSource,
 } from "./types";
 
 interface ScreenGestureProviderProps {
 	children: React.ReactNode;
 }
 
-export const {
-	ScreenGestureProvider,
-	useScreenGestureContext: useGestureContext,
-} = createProvider("ScreenGesture", { guarded: false })<
-	ScreenGestureProviderProps,
-	GestureContextType
->(({ children }): { value: GestureContextType; children: React.ReactNode } => {
-	const gestureContext = useGestureContext();
-	const gestureConfig = useScreenGestureConfig();
-	const { currentScreenKey } = useDescriptorDerivations();
-
-	const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
-
-	// Ancestors read this before activating. If a nested screen claims the same
-	// direction, it writes here so the ancestor can fail and let it take priority.
-	const childDirectionClaims =
-		useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
-
-	// The first gesture to activate owns navigation release. Other gestures may
-	// still join as companion trackers during the same simultaneous composition.
-	const gestureCompositionOwner = useSharedValue<GestureCompositionOwner>(null);
-
-	const panGesture = useBuildPanGesture({
-		scrollState,
-		gestureConfig,
-		childDirectionClaims,
-		gestureCompositionOwner,
-	});
+type ScreenGestureStoreValue = GestureContextType & {
+	relationshipGestureSources: readonly ScreenGestureSource[];
+};
 
-	const pinchGesture = useBuildPinchGesture({
-		gestureConfig,
-		gestureCompositionOwner,
-	});
+const EMPTY_GESTURE_SOURCES: readonly ScreenGestureSource[] = [];
 
-	const rotationGesture = useBuildRotationGesture({
-		gestureConfig,
-		gestureCompositionOwner,
-	});
+const createScreenGestureProvider = createProvider("ScreenGesture", {
+	global: true,
+})<ScreenGestureProviderProps, ScreenGestureStoreValue>;
 
-	const detectorGesture = useMemo(
-		() => Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-		[panGesture, pinchGesture, rotationGesture],
-	);
-
-	const value = useMemo<GestureContextType>(
-		() => ({
-			routeKey: currentScreenKey,
-			detectorGesture,
-			panGesture,
-			pinchGesture,
-			rotationGesture,
-			scrollState,
-			gestureContext,
-			claimedDirections: gestureConfig.participation.claimedDirections,
-			childDirectionClaims,
-		}),
-		[
-			currentScreenKey,
-			detectorGesture,
-			panGesture,
-			pinchGesture,
-			rotationGesture,
+export const {
+	ScreenGestureProvider,
+	useOptionalScreenGestureStore,
+	useScreenGestureStore,
+}: ReturnType<typeof createScreenGestureProvider> = createScreenGestureProvider(
+	({ children }) => {
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const isTopMostScreen = useDescriptorsStore(
+			(store) => store.derivations.isTopMostScreen,
+		);
+		const relationships = useCurrentScreenRelationships();
+		const relationshipAncestorGestures =
+			useOptionalScreenGestureStore(
+				relationships.parentScreenKey,
+				(store) => store.relationshipGestureSources,
+			) ?? EMPTY_GESTURE_SOURCES;
+		const ancestorGestures = isTopMostScreen
+			? relationshipAncestorGestures
+			: EMPTY_GESTURE_SOURCES;
+		const gestureConfig = useScreenGestureConfig(ancestorGestures);
+		const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
+		const childDirectionClaims =
+			useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
+		const gestureCompositionOwner =
+			useSharedValue<GestureCompositionOwner>(null);
+		const panGesture = useBuildPanGesture({
 			scrollState,
-			gestureContext,
-			gestureConfig.participation.claimedDirections,
+			gestureConfig,
 			childDirectionClaims,
-		],
-	);
-
-	useWalkUpAndRegisterShadowingClaims(
-		gestureConfig.participation.claimedDirections,
-	);
+			gestureCompositionOwner,
+		});
+		const pinchGesture = useBuildPinchGesture({
+			gestureConfig,
+			gestureCompositionOwner,
+		});
+		const detectorGesture = useMemo(
+			() => Gesture.Simultaneous(panGesture, pinchGesture),
+			[panGesture, pinchGesture],
+		);
+		const source = useMemo<ScreenGestureSource>(
+			() => ({
+				routeKey: currentScreenKey,
+				detectorGesture,
+				panGesture,
+				pinchGesture,
+				scrollState,
+				claimedDirections: gestureConfig.participation.claimedDirections,
+				childDirectionClaims,
+			}),
+			[
+				currentScreenKey,
+				detectorGesture,
+				panGesture,
+				pinchGesture,
+				scrollState,
+				gestureConfig.participation.claimedDirections,
+				childDirectionClaims,
+			],
+		);
+		const relationshipGestureSources = useMemo(
+			() => [source, ...ancestorGestures],
+			[source, ancestorGestures],
+		);
+		const value = useMemo<ScreenGestureStoreValue>(
+			() => ({
+				...source,
+				ancestorGestures,
+				relationshipGestureSources,
+			}),
+			[source, ancestorGestures, relationshipGestureSources],
+		);
+		const content = useMemo(
+			() => (
+				<Fragment>
+					<GestureOwnershipBridge />
+					{children}
+				</Fragment>
+			),
+			[children],
+		);
 
-	return {
-		value,
-		children,
-	};
-});
+		return {
+			key: currentScreenKey,
+			value,
+			children: content,
+		};
+	},
+);

package/src/providers/screen/gestures/hooks/use-screen-gesture-config.ts

@@ -1,24 +1,22 @@
 import { useMemo } from "react";
-import { useDescriptorDerivations, useDescriptors } from "../../descriptors";
-import { useGestureContext } from "../gestures.provider";
+import { useDescriptorsStore } from "../../descriptors";
 import { resolveScreenGestureConfig } from "../shared/policy";
-import type { ScreenGestureConfig } from "../types";
-
-export function useScreenGestureConfig(): ScreenGestureConfig {
-	const gestureContext = useGestureContext();
-	const {
-		current: { options },
-	} = useDescriptors();
-
-	const { isFirstKey } = useDescriptorDerivations();
+import type { ScreenGestureConfig, ScreenGestureSource } from "../types";
 
+export function useScreenGestureConfig(
+	ancestorGestures: readonly ScreenGestureSource[],
+): ScreenGestureConfig {
+	const options = useDescriptorsStore((store) => store.options);
+	const isFirstKey = useDescriptorsStore(
+		(store) => store.derivations.isFirstKey,
+	);
 	return useMemo(
 		() =>
 			resolveScreenGestureConfig({
 				options,
 				isFirstKey,
-				gestureContext,
+				ancestorGestures,
 			}),
-		[isFirstKey, options, gestureContext],
+		[isFirstKey, options, ancestorGestures],
 	);
 }

package/src/providers/screen/gestures/hooks/use-screen-gesture.ts

@@ -2,8 +2,7 @@ import {
 	type ChainTarget,
 	resolveChainTarget,
 } from "../../../../utils/resolve-chain-target";
-import { useGestureContext } from "../gestures.provider";
-import { walkGestureAncestors } from "../shared/ancestors";
+import { useOptionalScreenGestureStore } from "../gestures.provider";
 
 export type ScreenGestureTarget = ChainTarget;
 
@@ -21,13 +20,13 @@ export type ScreenGestureTarget = ChainTarget;
  * ```
  */
 export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const ctx = useGestureContext();
+	const ctx = useOptionalScreenGestureStore();
 
 	return (
 		resolveChainTarget({
 			target,
 			self: ctx,
-			ancestors: walkGestureAncestors(ctx?.gestureContext),
+			ancestors: ctx?.ancestorGestures ?? [],
 		})?.panGesture ?? null
 	);
 };

package/src/providers/screen/gestures/hooks/use-stable-runtime-config.ts

@@ -3,7 +3,7 @@ import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { GestureStore } from "../../../../stores/gesture.store";
 import { SystemStore } from "../../../../stores/system.store";
-import { useDescriptorDerivations } from "../../descriptors";
+import { useDescriptorsStore } from "../../descriptors";
 import type { GesturePolicy, GestureRuntime } from "../types";
 
 type RuntimeConfigInput<TPolicy extends GesturePolicy> = Omit<
@@ -14,7 +14,9 @@ type RuntimeConfigInput<TPolicy extends GesturePolicy> = Omit<
 export function useStableRuntimeConfig<TPolicy extends GesturePolicy>(
 	runtimeConfigInput: RuntimeConfigInput<TPolicy>,
 ): SharedValue<GestureRuntime<TPolicy>> {
-	const { currentScreenKey } = useDescriptorDerivations();
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
 	const { participation, policy } = runtimeConfigInput;
 
 	const stores = useMemo(() => {

package/src/providers/screen/gestures/index.tsx

@@ -1,6 +1,7 @@
 export {
 	ScreenGestureProvider,
-	useGestureContext,
+	useOptionalScreenGestureStore,
+	useScreenGestureStore,
 } from "./gestures.provider";
 export type {
 	DirectionClaim,