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

package/src/providers/screen/animation/helpers/read-screen-animation-revisions.ts

@@ -1,39 +1,15 @@
 import type { SharedValue } from "react-native-reanimated";
-import type {
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenInterpolatorPropsRevision,
-} from "../types";
+import type { ScreenAnimationTransitionSource } from "../types";
 
 type ScreenInterpolatorExternalDeps = Pick<SharedValue<unknown>, "get">[];
 
 export const readScreenAnimationRevisions = (
-	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision,
-	ancestorScreenAnimationSources: ScreenAnimationSource[],
-	descendantScreenAnimationSources: ScreenAnimationDescendantSources,
-	screenInterpolatorExternalDeps?: ScreenInterpolatorExternalDeps,
+	sources: readonly ScreenAnimationTransitionSource[],
+	externalRevisions: ScreenInterpolatorExternalDeps = [],
 ) => {
 	"worklet";
-	screenInterpolatorPropsRevision.get();
-
-	for (let index = 0; index < ancestorScreenAnimationSources.length; index++) {
-		ancestorScreenAnimationSources[
-			index
-		]?.screenInterpolatorPropsRevision.get();
-	}
-
-	const descendantSources = descendantScreenAnimationSources.get();
-	for (let index = 0; index < descendantSources.length; index++) {
-		descendantSources[index]?.source.screenInterpolatorPropsRevision.get();
-	}
-
-	if (screenInterpolatorExternalDeps) {
-		for (
-			let index = 0;
-			index < screenInterpolatorExternalDeps.length;
-			index++
-		) {
-			screenInterpolatorExternalDeps[index]?.get();
-		}
+	for (const source of sources) {
+		source.screenInterpolatorPropsRevision.get();
 	}
+	for (const revision of externalRevisions) revision.get();
 };

package/src/providers/screen/animation/helpers/selected-interpolator-options.ts

@@ -49,30 +49,6 @@ const areGestureDirectionsEqual = (
 	return true;
 };
 
-const areGestureActivationAreasEqual = (
-	left: TransitionInterpolatorOptions["gestureActivationArea"],
-	right: TransitionInterpolatorOptions["gestureActivationArea"],
-) => {
-	"worklet";
-	if (left === right) return true;
-
-	if (
-		typeof left !== "object" ||
-		left === null ||
-		typeof right !== "object" ||
-		right === null
-	) {
-		return false;
-	}
-
-	return (
-		left.left === right.left &&
-		left.right === right.right &&
-		left.top === right.top &&
-		left.bottom === right.bottom
-	);
-};
-
 const areInterpolatorOptionsEqual = (
 	left?: TransitionInterpolatorOptions,
 	right?: TransitionInterpolatorOptions,
@@ -88,13 +64,6 @@ const areInterpolatorOptionsEqual = (
 		left.gestureVelocityImpact === right.gestureVelocityImpact &&
 		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
 		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
-		left.gestureResponseDistance === right.gestureResponseDistance &&
-		left.gestureProgressMode === right.gestureProgressMode &&
-		left.gestureDrivesProgress === right.gestureDrivesProgress &&
-		areGestureActivationAreasEqual(
-			left.gestureActivationArea,
-			right.gestureActivationArea,
-		) &&
 		left.gestureSnapLocked === right.gestureSnapLocked &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior

package/src/providers/screen/animation/helpers/stack-progress.ts

@@ -1,44 +1,25 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export const syncStackProgressValues = (
-	visualProgressValues: SharedValue<number>[],
-	stackProgressValues: SharedValue<number>[],
-) => {
-	"worklet";
-	let total = 0;
-
-	for (let i = visualProgressValues.length - 1; i >= 0; i--) {
-		total += visualProgressValues[i]?.get() ?? 0;
-		const stackProgress = stackProgressValues[i];
-
-		if (stackProgress && stackProgress.get() !== total) {
-			stackProgress.set(total);
-		}
-	}
+export type StackProgressEntry = {
+	routeKey: string;
+	visualProgress: SharedValue<number>;
 };
 
-export const resolveStackProgress = (
-	stackProgress: SharedValue<number> | undefined,
+export const readStackProgress = (
+	entries: readonly StackProgressEntry[],
+	routeKey: string,
 	fallbackProgress: number,
-	currentProgress: number,
-	previousCurrentProgress: number | undefined,
-	nextProgress: number | undefined,
-	previousNextProgress: number | undefined,
 ) => {
 	"worklet";
-	if (!stackProgress) {
-		return fallbackProgress;
-	}
+	let progress = 0;
 
-	let total = stackProgress.get();
-
-	if (previousCurrentProgress !== undefined) {
-		total += currentProgress - previousCurrentProgress;
-	}
+	for (let index = entries.length - 1; index >= 0; index--) {
+		const entry = entries[index];
+		if (!entry) continue;
 
-	if (nextProgress !== undefined && previousNextProgress !== undefined) {
-		total += nextProgress - previousNextProgress;
+		progress += entry.visualProgress.get();
+		if (entry.routeKey === routeKey) return progress;
 	}
 
-	return total;
+	return fallbackProgress;
 };

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

@@ -22,7 +22,6 @@ import { toPlainRoute, toPlainValue } from "./worklet";
 type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
-	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
@@ -68,7 +67,6 @@ export const useBuildTransitionState = (
 		return {
 			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
 			visualProgress: AnimationStore.getValue(key, "visualProgress"),
-			stackProgress: AnimationStore.getValue(key, "stackProgress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),

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

@@ -1,5 +1,6 @@
 export {
 	ScreenAnimationProvider,
+	useOptionalScreenAnimationStore,
 	useScreenAnimationStore,
 } from "./animation.provider";
 export {

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

@@ -5,40 +5,10 @@ import type { ScreenInterpolatorFrame } from "./helpers/pipeline";
 
 export type ScreenInterpolatorPropsRevision = Pick<SharedValue<number>, "get">;
 
-export type ScreenAnimationLegacyTarget =
-	| "self"
-	| "parent"
-	| "root"
-	| { ancestor: number };
+export type ScreenAnimationTarget = ScreenTransitionTarget;
 
-export type ScreenAnimationTarget =
-	| ScreenTransitionTarget
-	| ScreenAnimationLegacyTarget;
-
-export type ScreenAnimationSource = {
+export type ScreenAnimationTransitionSource = {
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
 	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision;
-};
-
-export type ScreenAnimationTransitionSource = ScreenAnimationSource & {
 	boundsAccessor: BoundsAccessor;
 };
-
-export type ScreenAnimationDescendantSource = {
-	source: ScreenAnimationTransitionSource;
-	depth: number;
-};
-
-export type ScreenAnimationDescendantSources = SharedValue<
-	ScreenAnimationDescendantSource[]
->;
-
-export type RegisterScreenAnimationDescendant = (
-	source: ScreenAnimationTransitionSource,
-	depth: number,
-) => () => void;
-
-export type ScreenAnimationAncestorDescendantRegistrar = {
-	register: RegisterScreenAnimationDescendant;
-	depth: number;
-};

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

@@ -3,13 +3,11 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../types/animation.types";
-import { useScreenAnimationStore } 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,
-	} = useScreenAnimationStore();
-	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,12 +1,11 @@
 import type { ReactNode } from "react";
-import { useMemo } from "react";
-import { useScreenTransitionsAdapterOptionalContext } from "../../../adapters/with-screen-transitions/context";
+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 { getAncestorKeys } from "./helpers/get-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -15,22 +14,18 @@ import { getAncestorKeys } 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,
-> extends DescriptorsContextValue<TDescriptor> {
-	descriptors: DescriptorsContextValue<TDescriptor>;
+interface DescriptorStoreValue extends DescriptorsContextValue {
+	descriptors: DescriptorsContextValue;
 	derivations: DescriptorDerivationsContextValue;
-	options: TDescriptor["options"];
+	options: BaseDescriptor["options"];
 }
 
 type DescriptorsProviderProps = {
@@ -41,33 +36,39 @@ type DescriptorsProviderProps = {
 	routeKey?: string;
 };
 
-export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
-	"Descriptors",
-	{ guarded: true },
-)<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>(
+const createDescriptorsProvider = createProvider("Descriptors", {
+	global: true,
+})<DescriptorsProviderProps, DescriptorStoreValue>;
+
+const {
+	DescriptorsProvider,
+	useDescriptorsStore,
+	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,
+			routeKey ? store.scenesByKey[routeKey]?.descriptor : undefined,
 		);
 		const blankStackPrevious = useBlankStackStore((store) =>
-			routeKey ? store?.scenesByKey[routeKey]?.previousDescriptor : undefined,
+			routeKey ? store.scenesByKey[routeKey]?.previousDescriptor : undefined,
 		);
 		const blankStackNext = useBlankStackStore((store) =>
-			routeKey ? store?.scenesByKey[routeKey]?.nextDescriptor : undefined,
+			routeKey ? store.scenesByKey[routeKey]?.nextDescriptor : undefined,
 		);
-		const adapterContext = useScreenTransitionsAdapterOptionalContext();
-		const adapterScene = routeKey
-			? (adapterContext?.scenesByKey?.[routeKey] ??
-				adapterContext?.scenes[
-					adapterContext.routeIndexByKey.get(routeKey) ?? -1
-				])
-			: undefined;
-
-		const resolvedCurrent =
-			current ?? blankStackCurrent ?? adapterScene?.descriptor;
-		const resolvedPrevious =
-			previous ?? blankStackPrevious ?? adapterScene?.previousDescriptor;
-		const resolvedNext = next ?? blankStackNext ?? adapterScene?.nextDescriptor;
+		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(
@@ -84,23 +85,40 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 			[resolvedPrevious, resolvedCurrent, resolvedNext],
 		);
 
-		const ancestorKeys = useMemo(
-			() => getAncestorKeys(resolvedCurrent),
-			[resolvedCurrent],
-		);
-
 		const derivations = useMemo(
 			() =>
 				deriveDescriptorDerivations({
 					previous: resolvedPrevious,
 					current: resolvedCurrent,
 					next: resolvedNext,
-					ancestorKeys,
 				}),
-			[resolvedPrevious, resolvedCurrent, resolvedNext, ancestorKeys],
+			[resolvedPrevious, resolvedCurrent, resolvedNext],
 		);
 
+		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,
@@ -113,3 +131,5 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		};
 	},
 );
+
+export { DescriptorsProvider, useDescriptorsStore };

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

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