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

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,

package/src/shared/types/screen.types.ts

@@ -46,27 +46,28 @@ export type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
 /**
  * Controls how an inactive screen is retained after it is no longer active.
  *
- * - `keep`
- *   keep inactive screen mounted, attached, visible, not interactive
- *   RNS: activityState=1, visible=true
- *   React Activity: mode="visible"
+ * - `hide`
+ *   keep inactive screen mounted, pause/freeze inactive work where supported,
+ *   and hide inactive paint/native presentation after safe paint
+ *   RNS: activityState=0, visible=false, shouldFreeze=true
+ *   React Activity: mode="hidden" with paint hidden
  *
- * - `freeze`
- *   keep last painted UI visible but stop/suspend inactive work where platform allows
- *   RNS: activityState=1, visible=true, maybe freezeOnBlur/shouldFreeze later
+ * - `pause`
+ *   keep last painted UI visible but pause/freeze inactive work where supported
+ *   RNS: activityState=1, visible=true, shouldFreeze=true
  *   React Activity: mode="hidden" with paint preserved
  *
- * - `detach`
- *   remove inactive screen from native/view presentation after safe paint
- *   RNS: activityState=0, visible=false
- *   React Activity: mode="hidden" + display none, or equivalent
- *
  * - `unmount`
- *   actually remove React subtree when the inactive screen is safe to remove
+ *   remove React subtree when the inactive screen is safe to remove
  *   RNS native: only after safe paint for non-nested screens
  *   web: return null
+ *
+ * - `keep`
+ *   keep inactive screen mounted, attached, visible, not interactive, and running
+ *   RNS: activityState=1, visible=true
+ *   React Activity: mode="visible"
  */
-export type InactiveBehavior = "keep" | "freeze" | "detach" | "unmount";
+export type InactiveBehavior = "hide" | "pause" | "unmount" | "keep";
 
 export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	/**