react-native-screen-transitions 3.7.0-beta.1 → 3.7.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "3.7.0-beta.1",
+	"version": "3.7.0-beta.2",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",

package/src/shared/index.ts

@@ -61,7 +61,10 @@ export type {
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
+	ScreenTransitionAccessor,
 	ScreenTransitionConfig,
+	ScreenTransitionDepthTarget,
+	ScreenTransitionTarget,
 	TransitionInterpolatedStyle,
 	TransitionSlotStyle,
 	TransitionSpec,

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

@@ -72,6 +72,20 @@ export const createTransitionAccessor = (
 		return {
 			...frame,
 			bounds: source.boundsAccessor,
+			transition: (target?: ScreenTransitionTarget) => {
+				"worklet";
+				const targetIndex = resolveTargetIndex(
+					target,
+					sourceIndex,
+					currentSources.length,
+				);
+
+				if (targetIndex === -1) {
+					return null;
+				}
+
+				return buildScope(targetIndex);
+			},
 		};
 	};
 

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

@@ -23,7 +23,10 @@ import type { SelectedInterpolatorOptions } from "./selected-interpolator-option
 import { deriveStackProgress } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
 
-export type ScreenInterpolatorFrame = Omit<ScreenInterpolationProps, "bounds">;
+export type ScreenInterpolatorFrame = Omit<
+	ScreenInterpolationProps,
+	"bounds" | "transition"
+>;
 
 interface ScreenAnimationPipeline {
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;

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

@@ -0,0 +1,25 @@
+import type {
+	ScreenAnimationDescendantSources,
+	ScreenAnimationSource,
+	ScreenInterpolatorPropsRevision,
+} from "../types";
+
+export const readScreenAnimationRevisions = (
+	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision,
+	ancestorScreenAnimationSources: ScreenAnimationSource[],
+	descendantScreenAnimationSources: ScreenAnimationDescendantSources,
+) => {
+	"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();
+	}
+};

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

@@ -5,10 +5,9 @@ import type {
 } from "../../../types/animation.types";
 import { useScreenAnimationContext } from "./animation.provider";
 import { useBuildTransitionAccessor } from "./helpers/accessors/use-build-transition-accessor";
+import { readScreenAnimationRevisions } from "./helpers/read-screen-animation-revisions";
 import type {
-	ScreenAnimationDescendantSources,
 	ScreenAnimationLegacyTarget,
-	ScreenAnimationSource,
 	ScreenAnimationTarget,
 } from "./types";
 
@@ -58,25 +57,6 @@ export function useScreenAnimation(
 	return animation;
 }
 
-const readScreenAnimationRevisions = (
-	screenInterpolatorPropsRevision: DerivedValue<number>,
-	ancestorScreenAnimationSources: ScreenAnimationSource[],
-	descendantScreenAnimationSources: ScreenAnimationDescendantSources,
-) => {
-	"worklet";
-	screenInterpolatorPropsRevision.get();
-
-	for (let index = 0; index < ancestorScreenAnimationSources.length; index++) {
-		ancestorScreenAnimationSources[
-			index
-		]?.screenInterpolatorPropsRevision.get();
-	}
-
-	// The accessor reads descendant sources through this shared value. Reading it
-	// here makes this derived value rerun when descendants mount or unmount.
-	descendantScreenAnimationSources.get();
-};
-
 const isTransitionTarget = (
 	target: ScreenAnimationTarget,
 ): target is ScreenTransitionTarget => {

package/src/shared/providers/screen/gestures/ownership/shadowing-claims.ts

@@ -0,0 +1,18 @@
+import type { ClaimedDirections } from "../../../../types/ownership.types";
+import type { StackSceneActivity } from "../../../../types/stack.types";
+
+export const resolveShadowingClaimDirections = ({
+	currentActivity,
+	currentClaimedDirections,
+	previousClaimedDirections,
+}: {
+	currentActivity: StackSceneActivity | undefined;
+	currentClaimedDirections: ClaimedDirections;
+	previousClaimedDirections: ClaimedDirections;
+}): ClaimedDirections => {
+	if (currentActivity === "closing") {
+		return previousClaimedDirections;
+	}
+
+	return currentClaimedDirections;
+};

package/src/shared/providers/screen/gestures/ownership/use-walk-up-and-register-shadowing-claims.ts

@@ -4,11 +4,18 @@ import {
 	type ClaimedDirections,
 	DIRECTIONS,
 	type Direction,
+	NO_CLAIMS,
 } from "../../../../types/ownership.types";
-import { useDescriptorDerivations } from "../../../screen/descriptors";
+import {
+	type BaseDescriptor,
+	useDescriptorDerivations,
+	useDescriptors,
+} from "../../../screen/descriptors";
 import { useGestureContext } from "../gestures.provider";
 import { walkGestureAncestors } from "../shared/ancestors";
+import { resolveScreenGestureConfig } from "../shared/policy";
 import type { GestureContextType } from "../types";
+import { resolveShadowingClaimDirections } from "./shadowing-claims";
 
 type ShadowedAncestor = {
 	ancestor: GestureContextType;
@@ -93,6 +100,27 @@ const clearShadowingClaims = (
 	}
 };
 
+const getDescriptorIsFirstKey = (descriptor: BaseDescriptor): boolean => {
+	const navigationState = descriptor.navigation.getState();
+	const routes = navigationState?.routes ?? [];
+	return routes.findIndex((route) => route.key === descriptor.route.key) === 0;
+};
+
+const getDescriptorClaimedDirections = (
+	descriptor: BaseDescriptor | undefined,
+	gestureContext: GestureContextType | null,
+): ClaimedDirections => {
+	if (!descriptor) {
+		return NO_CLAIMS;
+	}
+
+	return resolveScreenGestureConfig({
+		options: descriptor.options,
+		isFirstKey: getDescriptorIsFirstKey(descriptor),
+		gestureContext,
+	}).participation.claimedDirections;
+};
+
 /**
  * Registers this screen with ancestors that claim the same direction.
  *
@@ -108,11 +136,44 @@ export function useWalkUpAndRegisterShadowingClaims(
 	claimedDirections: ClaimedDirections,
 ): void {
 	const parentContext = useGestureContext();
+	const { current, previous } = useDescriptors();
 	const { isTopMostScreen, currentScreenKey } = useDescriptorDerivations();
 
+	/*
+	 * We want to calculate effective claimed directions as claimedDirections is not enough for us.
+	 * What this solves is lingering claimed directions when a screen is closing.
+	 *
+	 * Overlay claims horizontal
+	 *   └─ A has no local horizontal claim
+	 *   └─ B claims horizontal (closing)
+	 *   └─ C claims horizontal (closing)
+	 *
+	 * Closing screens are still mounted, so they can still block parent gestures.
+	 * But they cannot receive touches anymore.
+	 *
+	 * So when B/C are closing and the user is really touching A, B/C should not
+	 * keep blocking the parent with their own gesture config.
+	 *
+	 * A closing screen should act like the visible screen underneath it:
+	 * - if the screen underneath claims the gesture, keep blocking the parent
+	 * - if the screen underneath does not claim it, let the parent handle it
+	 */
+	const effectiveClaimedDirections = useMemo(
+		() =>
+			resolveShadowingClaimDirections({
+				currentActivity: current.activity,
+				currentClaimedDirections: claimedDirections,
+				previousClaimedDirections: getDescriptorClaimedDirections(
+					previous,
+					parentContext,
+				),
+			}),
+		[current.activity, claimedDirections, previous, parentContext],
+	);
+
 	const shadowedAncestors = useMemo(
-		() => findShadowedAncestors(parentContext, claimedDirections),
-		[parentContext, claimedDirections],
+		() => findShadowedAncestors(parentContext, effectiveClaimedDirections),
+		[parentContext, effectiveClaimedDirections],
 	);
 
 	useLayoutEffect(() => {

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -9,7 +9,9 @@ import type {
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
 import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
+import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
 import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
+import { readScreenAnimationRevisions } from "../../animation/helpers/read-screen-animation-revisions";
 import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorDerivations } from "../../descriptors";
 import {
@@ -34,6 +36,7 @@ type RunInterpolatorParams = {
 	progress: ScreenInterpolatorFrame["progress"];
 	next: ScreenInterpolatorFrame["next"];
 	bounds: Parameters<ScreenStyleInterpolator>[0]["bounds"];
+	transition: Parameters<ScreenStyleInterpolator>[0]["transition"];
 	shouldDeferStyleBuckets: boolean;
 };
 
@@ -60,6 +63,7 @@ const runInterpolator = ({
 	progress,
 	next,
 	bounds,
+	transition,
 	shouldDeferStyleBuckets,
 }: RunInterpolatorParams): InterpolatorResult | undefined => {
 	"worklet";
@@ -74,6 +78,7 @@ const runInterpolator = ({
 			progress,
 			next,
 			bounds,
+			transition,
 		});
 
 		const rawStyleMap: TransitionInterpolatedStyle | undefined =
@@ -137,8 +142,11 @@ export const useInterpolatedStylesMap = () => {
 		selectedInterpolatorOptions,
 		nextInterpolator,
 		currentInterpolator,
+		ancestorScreenAnimationSources,
+		descendantScreenAnimationSources,
 	} = useScreenAnimationContext();
 	const boundsAccessor = useBuildBoundsAccessor();
+	const transition = useBuildTransitionAccessor();
 	const pendingLifecycleStartBlockCount = SystemStore.getValue(
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
@@ -148,7 +156,11 @@ export const useInterpolatedStylesMap = () => {
 
 	return useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
-		screenInterpolatorPropsRevision.get();
+		readScreenAnimationRevisions(
+			screenInterpolatorPropsRevision,
+			ancestorScreenAnimationSources,
+			descendantScreenAnimationSources,
+		);
 		const props = screenInterpolatorProps.get();
 
 		/**
@@ -199,6 +211,7 @@ export const useInterpolatedStylesMap = () => {
 			progress: effectiveProgress,
 			next: effectiveNext,
 			bounds: boundsAccessor,
+			transition,
 			shouldDeferStyleBuckets,
 		});
 
@@ -223,6 +236,7 @@ export const useInterpolatedStylesMap = () => {
 			progress: effectiveProgress,
 			next: effectiveNext,
 			bounds: boundsAccessor,
+			transition,
 			shouldDeferStyleBuckets,
 		});
 

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/build-managed-stack-state.ts

@@ -59,11 +59,10 @@ const resolveStableDescriptorSource = <
 };
 
 const getSceneActivity = ({
-	focusedIndex,
+	activeIndex,
+	inertIndex,
 	isClosing,
 	sceneIndex,
-	topIndex,
-	topIsClosing,
 }: SceneActivityWindow & {
 	isClosing: boolean;
 	sceneIndex: number;
@@ -72,21 +71,33 @@ const getSceneActivity = ({
 		return "closing";
 	}
 
-	if (topIsClosing) {
-		return sceneIndex === focusedIndex ? "inert" : "inactive";
-	}
-
-	if (sceneIndex === topIndex) {
+	if (sceneIndex === activeIndex) {
 		return "active";
 	}
 
-	if (sceneIndex === topIndex - 1) {
+	if (sceneIndex === inertIndex) {
 		return "inert";
 	}
 
 	return "inactive";
 };
 
+const getNonClosingSceneIndices = <TDescriptor extends BaseStackDescriptor>(
+	routes: ManagedRoutes<TDescriptor>,
+	closingRouteKeys: ReadonlySet<string>,
+) => {
+	const indices: number[] = [];
+
+	for (let index = 0; index < routes.length; index++) {
+		const route = routes[index];
+		if (route && !closingRouteKeys.has(route.key)) {
+			indices.push(index);
+		}
+	}
+
+	return indices;
+};
+
 const getSceneActivityWindow = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
@@ -98,29 +109,32 @@ const getSceneActivityWindow = <
 	TDescriptor,
 	TNavigation
 >): SceneActivityWindow => {
-	const focusedRouteKey = props.state.routes[props.state.index]?.key;
+	const nonClosingIndices = getNonClosingSceneIndices(routes, closingRouteKeys);
 
-	let focusedIndex = routes.findIndex((route) => route.key === focusedRouteKey);
+	const topNonClosingIndex =
+		nonClosingIndices[nonClosingIndices.length - 1] ?? -1;
 
-	if (focusedIndex === -1) {
+	const hasClosingRouteAboveActive =
+		topNonClosingIndex !== -1 && topNonClosingIndex < routes.length - 1;
+
+	const activeIndex = hasClosingRouteAboveActive ? -1 : topNonClosingIndex;
+	const inertIndex = hasClosingRouteAboveActive
+		? topNonClosingIndex
+		: (nonClosingIndices[nonClosingIndices.length - 2] ?? -1);
+
+	const focusedRouteKey = props.state.routes[props.state.index]?.key;
+	if (
+		focusedRouteKey &&
+		!routes.some((route) => route.key === focusedRouteKey)
+	) {
 		throw new Error(
 			`Focused route "${focusedRouteKey}" is missing from routes`,
 		);
 	}
 
-	while (focusedIndex > 0 && closingRouteKeys.has(routes[focusedIndex]?.key)) {
-		focusedIndex--;
-	}
-
-	const topIndex = routes.length - 1;
-	const topRoute = routes[topIndex];
-	const topIsClosing =
-		topRoute !== undefined && closingRouteKeys.has(topRoute.key);
-
 	return {
-		focusedIndex,
-		topIndex,
-		topIsClosing,
+		activeIndex,
+		inertIndex,
 	};
 };
 

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/types.ts

@@ -51,7 +51,6 @@ export type ReconciledRoutes<TDescriptor extends BaseStackDescriptor> = {
 };
 
 export type SceneActivityWindow = {
-	focusedIndex: number;
-	topIndex: number;
-	topIsClosing: boolean;
+	activeIndex: number;
+	inertIndex: number;
 };

package/src/shared/types/animation.types.ts

@@ -176,6 +176,10 @@ export type ScreenTransitionDepthTarget = {
 
 export type ScreenTransitionTarget = ScreenTransitionDepthTarget;
 
+export type ScreenTransitionAccessor = (
+	target?: ScreenTransitionTarget,
+) => ScreenInterpolationProps | null;
+
 export interface ScreenInterpolationProps {
 	/**
 	 * Values for the screen that came before the current one in the navigation stack.
@@ -239,6 +243,20 @@ export interface ScreenInterpolationProps {
 	 */
 	bounds: BoundsAccessor;
 
+	/**
+	 * Resolves interpolation props for this screen's transition timeline or an
+	 * ancestor/descendant transition timeline.
+	 *
+	 * Calling without a target returns the current transition.
+	 * `transition({ depth: -1 })` returns the immediate parent transition.
+	 * `transition({ depth: 1 })` returns the immediate child transition.
+	 * `transition({ depth: 0 })` returns the current transition.
+	 *
+	 * When called from a returned transition scope, targets are resolved relative
+	 * to that scope.
+	 */
+	transition: ScreenTransitionAccessor;
+
 	/**
 	 * The screen state that is currently driving the transition (either current or next, whichever is focused).
 	 */

package/src/shared/types/index.ts

@@ -4,8 +4,11 @@ export type {
 	AnimationConfig,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
+	ScreenTransitionAccessor,
+	ScreenTransitionDepthTarget,
 	ScreenTransitionOptions,
 	ScreenTransitionState,
+	ScreenTransitionTarget,
 	TransitionInterpolatedStyle,
 	TransitionInterpolatorOptions,
 	TransitionSlotStyle,