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

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

@@ -13,6 +13,7 @@ import {
 	areDescriptorsEqual,
 	areRouteChildStateMapsEqual,
 	getRouteChildState,
+	routeKeyListsAreEqual,
 	setsAreEqual,
 } from "./helpers";
 import type {
@@ -34,13 +35,6 @@ type BuildManagedStackStateParams<
 	previousState?: LocalRoutesState<TDescriptor>;
 };
 
-const areRouteKeysEqual = (a: string[], b: string[]): boolean => {
-	if (a === b) return true;
-	if (a.length !== b.length) return false;
-
-	return a.every((key, index) => key === b[index]);
-};
-
 const resolveStableDescriptorSource = <
 	TDescriptor extends BaseStackDescriptor,
 >({
@@ -106,10 +100,13 @@ const getSceneActivityWindow = <
 >): SceneActivityWindow => {
 	const focusedRouteKey = props.state.routes[props.state.index]?.key;
 
-	let focusedIndex = Math.max(
-		0,
-		routes.findIndex((route) => route.key === focusedRouteKey),
-	);
+	let focusedIndex = routes.findIndex((route) => route.key === focusedRouteKey);
+
+	if (focusedIndex === -1) {
+		throw new Error(
+			`Focused route "${focusedRouteKey}" is missing from routes`,
+		);
+	}
 
 	while (focusedIndex > 0 && closingRouteKeys.has(routes[focusedIndex]?.key)) {
 		focusedIndex--;
@@ -355,7 +352,7 @@ export const buildManagedStackState = <
 		scenes,
 		routeKeys:
 			params.previousState &&
-			areRouteKeysEqual(params.previousState.routeKeys, routeKeys)
+			routeKeyListsAreEqual(params.previousState.routeKeys, routeKeys)
 				? params.previousState.routeKeys
 				: routeKeys,
 		shouldShowFloatOverlay,

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

@@ -10,6 +10,7 @@ import {
 	areDescriptorsEqual,
 	areRouteChildStateMapsEqual,
 	getRouteChildStateMap,
+	routesHaveSameKeys,
 	setsAreEqual,
 } from "./helpers";
 import { reconcileManagedRoutes } from "./reconcile-managed-routes";
@@ -35,15 +36,6 @@ const routesAreIdentical = <Route extends RouteWithKey>(
 	return a.every((route, index) => route === b[index]);
 };
 
-const routeKeysAreEqual = <Route extends RouteWithKey>(
-	a: Route[],
-	b: Route[],
-): boolean => {
-	if (a.length !== b.length) return false;
-
-	return a.every((route, index) => route.key === b[index]?.key);
-};
-
 export const deriveManagedStackState = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
@@ -85,7 +77,7 @@ export const deriveManagedStackState = <
 		focusedRouteUnchanged &&
 		closingRouteKeysUnchanged &&
 		routeChildStatesUnchanged &&
-		routeKeysAreEqual(current.routes, nextRoutesSnapshot) &&
+		routesHaveSameKeys(current.routes, nextRoutesSnapshot) &&
 		areDescriptorSourceMapsEquivalent(
 			current.sourceDescriptors,
 			nextDescriptors,

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

@@ -38,6 +38,25 @@ export const setsAreEqual = <T>(
 	return true;
 };
 
+export const routeKeyListsAreEqual = (
+	a: readonly string[],
+	b: readonly string[],
+): boolean => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+
+	return a.every((key, index) => key === b[index]);
+};
+
+export const routesHaveSameKeys = <Route extends RouteWithKey>(
+	a: readonly Route[],
+	b: readonly Route[],
+): boolean => {
+	if (a.length !== b.length) return false;
+
+	return a.every((route, index) => route.key === b[index]?.key);
+};
+
 export const getRouteChildState = (route: RouteWithKey): unknown => {
 	if (!route || typeof route !== "object") {
 		return undefined;

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

@@ -4,6 +4,7 @@ import type {
 } from "../../../../../types/stack.types";
 import { composeDescriptors } from "../../../../../utils/navigation/compose-descriptors";
 import { syncRoutesWithRemoved } from "../../../../../utils/navigation/sync-routes-with-removed";
+import { routesHaveSameKeys } from "./helpers";
 import type {
 	LocalRoutesState,
 	ManagedDescriptorSources,
@@ -19,17 +20,6 @@ type ReconcileManagedRoutesParams<TDescriptor extends BaseStackDescriptor> = {
 	closingRouteKeys: Set<string>;
 };
 
-const haveSameRouteKeys = <Route extends RouteWithKey>(
-	previous: Route[],
-	next: Route[],
-): boolean => {
-	if (previous.length !== next.length) {
-		return false;
-	}
-
-	return previous.every((route, index) => route?.key === next[index]?.key);
-};
-
 const alignRoutesWithLatest = <
 	Route extends RouteWithKey,
 	DescriptorMap extends Record<string, unknown>,
@@ -155,7 +145,7 @@ export const reconcileManagedRoutes = <TDescriptor extends BaseStackDescriptor>(
 		closingRouteKeys,
 	} = params;
 
-	const routeKeysUnchanged = haveSameRouteKeys(
+	const routeKeysUnchanged = routesHaveSameKeys(
 		previousRoutesSnapshot,
 		nextRoutesSnapshot,
 	);

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

@@ -30,7 +30,7 @@ export const createManagedStackController = <
 ): ManagedStackControllerType<TDescriptor, TNavigation> => {
 	const closingRouteKeys = new Set<string>();
 	let props = initialProps;
-	let previousPropRoutes = initialProps.state.routes;
+	let previousRoutesSnapshot = initialProps.state.routes;
 	let snapshot: ManagedStackControllerSnapshot<TDescriptor> = {
 		state: buildManagedStackState({
 			props,
@@ -60,16 +60,16 @@ export const createManagedStackController = <
 	};
 
 	const update = (nextProps: ManagedStackProps<TDescriptor, TNavigation>) => {
-		const previousRoutesSnapshot = previousPropRoutes;
+		const lastRoutesSnapshot = previousRoutesSnapshot;
 		props = nextProps;
 
 		const nextState = deriveManagedStackState({
 			props,
 			current: snapshot.state,
-			previousRoutesSnapshot,
+			previousRoutesSnapshot: lastRoutesSnapshot,
 			closingRouteKeys,
 		});
-		previousPropRoutes = nextProps.state.routes;
+		previousRoutesSnapshot = nextProps.state.routes;
 
 		if (nextState === snapshot.state) {
 			return;

package/src/shared/types/bounds.types.ts

@@ -231,6 +231,25 @@ export type BoundsNavigationRevealOptions = {
 	 * @default "freeform"
 	 */
 	gestureProgressMode?: GestureProgressMode;
+	/**
+	 * Scale applied to the unfocused background content while the reveal runs
+	 * above it.
+	 *
+	 * @default 0.9375
+	 */
+	backgroundScale?: number;
+	/**
+	 * Whether reveal should reset the unfocused background content scale once the
+	 * transition is logically settled.
+	 *
+	 * By default, reveal restores the background to scale `1` after settle so the
+	 * next drag or programmatic dismiss starts from a fresh, unmodified layout
+	 * measurement. Keeping the background transformed while idle can make the next
+	 * measurement read the scaled screen instead of the real screen geometry.
+	 *
+	 * @default true
+	 */
+	shouldBackgroundScaleResetOnSettled?: boolean;
 	/**
 	 * Temporarily blocks pointer-event pass-through on the inactive content until
 	 * the source element transition handoff reaches progress `0.25`.

package/src/shared/utils/bounds/navigation/reveal/build.ts

@@ -13,6 +13,7 @@ import {
 	DRAG_MASK_HEIGHT_COLLAPSE_END,
 	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
 	IDENTITY_DRAG_SCALE_OUTPUT,
+	REVEAL_BACKGROUND_SCALE,
 	REVEAL_BORDER_RADIUS,
 	REVEAL_SHADOW_OFFSET,
 	REVEAL_USES_TRANSFORM_MASK,
@@ -65,6 +66,10 @@ export function buildRevealStyles({
 	const disablePointerEventsTillElementTransition =
 		revealOptions?.disablePointerEventsTillElementTransition ?? true;
 	const maskSizingMode = revealOptions?.maskSizingMode ?? "auto";
+	const backgroundScale =
+		revealOptions?.backgroundScale ?? REVEAL_BACKGROUND_SCALE;
+	const shouldBackgroundScaleResetOnSettled =
+		revealOptions?.shouldBackgroundScaleResetOnSettled ?? true;
 	const usesTransformMask =
 		maskSizingMode === "auto"
 			? REVEAL_USES_TRANSFORM_MASK
@@ -366,8 +371,6 @@ export function buildRevealStyles({
 			},
 			[link.id]: {
 				style: {
-					position: "relative",
-					zIndex: 999,
 					transform: [{ translateX: elementTX }, { translateY: elementY }],
 				},
 			},
@@ -376,10 +379,11 @@ export function buildRevealStyles({
 
 	/* ---------------------------- Unfocused Screen ---------------------------- */
 
-	const unfocusedScale = mixUnit(1, 0.9375, props.active.progress);
-	const unfocusedContentScale = props.active.logicallySettled
-		? 1
-		: unfocusedScale;
+	const unfocusedScale = mixUnit(1, backgroundScale, props.active.progress);
+	const unfocusedContentScale =
+		props.active.logicallySettled && shouldBackgroundScaleResetOnSettled
+			? 1
+			: unfocusedScale;
 
 	const trackingContentTarget =
 		initialDestinationTarget ?? link.destination.bounds;

package/src/shared/utils/bounds/navigation/reveal/config.ts

@@ -15,6 +15,7 @@ export const DRAG_MASK_HEIGHT_COLLAPSE_END = 0.7;
 export const HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE = 0.5;
 export const DISMISS_SCALE_ORBIT_DEPTH = 0.5;
 export const CLOSE_SOURCE_HANDOFF_PROGRESS = 0.25;
+export const REVEAL_BACKGROUND_SCALE = 0.9375;
 
 export const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 export const ZERO_TO_ONE_RANGE = [0, 1] as const;