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

package/src/shared/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -1,3 +1,4 @@
+import { useWindowDimensions } from "react-native";
 import {
 	useAnimatedProps,
 	useAnimatedReaction,
@@ -6,10 +7,12 @@ import {
 } from "react-native-reanimated";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { SystemStore } from "../../../../stores/system.store";
+import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
 import { useDescriptorDerivations } from "../../descriptors";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
 export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
+	const { height } = useWindowDimensions();
 	const { currentScreenKey } = useDescriptorDerivations();
 	const { entering, progress } = AnimationStore.getBag(currentScreenKey);
 
@@ -54,8 +57,21 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 
 	const animatedStyle = useAnimatedStyle(() => {
 		"worklet";
+		/**
+		 * Keep blocked screens physically offscreen. On physical devices,
+		 * opacity: 0 can break Liquid Glass sampling.
+		 *
+		 * See: https://github.com/expo/expo/issues/41024
+		 *
+		 */
+		const offset = getVisibilityBlockOffset(height);
+
 		return {
-			opacity: shouldBlockVisibility.get() ? 0 : 1,
+			transform: [
+				{
+					translateY: shouldBlockVisibility.get() ? offset : 0,
+				},
+			],
 		};
 	});
 

package/src/shared/providers/screen/styles/hooks/use-resolved-slot-style-map.tsx

@@ -3,9 +3,8 @@ import {
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
-import { NO_STYLES } from "../../../../constants";
+import { NO_PROPS, NO_STYLES } from "../../../../constants";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
-import { useScreenAnimationContext } from "../../animation";
 import {
 	type LocalStyleLayers,
 	type ResettableStyleStatesBySlot,
@@ -22,30 +21,18 @@ export const useResolvedStylesMap = ({
 	localStylesMaps,
 	ancestorStylesMap,
 }: UseResolvedStylesMapParams) => {
-	const { screenInterpolatorProps, screenInterpolatorPropsRevision } =
-		useScreenAnimationContext();
-	const previousStyleStatesBySlot = useSharedValue<ResettableStyleStatesBySlot>(
-		{},
-	);
+	const previousStyleStatesBySlot =
+		useSharedValue<ResettableStyleStatesBySlot>(NO_PROPS);
 	const previousResolvedStylesMap =
 		useSharedValue<NormalizedTransitionInterpolatedStyle>(NO_STYLES);
 
 	return useDerivedValue(() => {
 		"worklet";
-		screenInterpolatorPropsRevision.get();
-
-		const props = screenInterpolatorProps.get();
-		// Keep missing local slots alive only when another route drives this screen
-		// and no active local style layer is available. Once a current/next layer
-		// runs, omitted local slots and dropped keys are intentional reset signals.
-		const deferLocalSlotResets = !props.focused && !props.current.closing;
-
 		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
 			resolveSlotStyles({
 				localStylesMaps: localStylesMaps.get(),
 				ancestorStylesMap: ancestorStylesMap?.get() ?? NO_STYLES,
 				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
-				deferLocalSlotResets,
 			});
 
 		previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);

package/src/shared/providers/stack/direct.provider.tsx

@@ -2,8 +2,8 @@ import type * as React from "react";
 import { useMemo } from "react";
 import type { NativeStackDescriptorMap } from "../../../native-stack/types";
 import {
-	StackContext,
 	type StackContextValue,
+	StackProvider,
 } from "../../hooks/navigation/use-stack";
 import {
 	AnimationStore,
@@ -91,8 +91,17 @@ function useDirectStackValue(
 			routes: allRoutes,
 			scenes,
 			optimisticFocusedIndex,
+			focusedIndex,
 		}),
-		[flags, navigatorKey, routeKeys, allRoutes, scenes, optimisticFocusedIndex],
+		[
+			flags,
+			navigatorKey,
+			routeKeys,
+			allRoutes,
+			scenes,
+			optimisticFocusedIndex,
+			focusedIndex,
+		],
 	);
 
 	// DirectStack context value
@@ -125,9 +134,9 @@ function withDirectStack<TProps extends DirectStackProps>(
 		const { stackContextValue, ...lifecycleValue } = useDirectStackValue(props);
 
 		return (
-			<StackContext.Provider value={stackContextValue}>
+			<StackProvider value={stackContextValue}>
 				<Component {...lifecycleValue} />
-			</StackContext.Provider>
+			</StackProvider>
 		);
 	};
 }

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

@@ -0,0 +1,365 @@
+import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	BaseStackScene,
+	StackDescriptorSource,
+	StackSceneActivity,
+} from "../../../../../types/stack.types";
+import { resolveSceneNeighbors } from "../../../../../utils/navigation/resolve-scene-neighbors";
+import { isOverlayVisible } from "../../../../../utils/overlay/visibility";
+import {
+	areDescriptorSourcesEquivalent,
+	areDescriptorsEqual,
+	areRouteChildStateMapsEqual,
+	getRouteChildState,
+	routeKeyListsAreEqual,
+	setsAreEqual,
+} from "./helpers";
+import type {
+	LocalRoutesState,
+	ManagedDescriptorSources,
+	ManagedDescriptors,
+	ManagedRoutes,
+	SceneActivityWindow,
+} from "./types";
+
+type BuildManagedStackStateParams<
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+> = {
+	props: ManagedStackProps<TDescriptor, TNavigation>;
+	routes: ManagedRoutes<TDescriptor>;
+	descriptors: ManagedDescriptorSources<TDescriptor>;
+	closingRouteKeys: ReadonlySet<string>;
+	previousState?: LocalRoutesState<TDescriptor>;
+};
+
+const resolveStableDescriptorSource = <
+	TDescriptor extends BaseStackDescriptor,
+>({
+	routeKey,
+	sourceDescriptor,
+	previousState,
+}: {
+	routeKey: string;
+	sourceDescriptor: StackDescriptorSource<TDescriptor>;
+	previousState?: LocalRoutesState<TDescriptor>;
+}): StackDescriptorSource<TDescriptor> => {
+	const previousSourceDescriptor = previousState?.sourceDescriptors[routeKey];
+
+	if (
+		previousSourceDescriptor &&
+		areDescriptorSourcesEquivalent(previousSourceDescriptor, sourceDescriptor)
+	) {
+		return previousSourceDescriptor;
+	}
+
+	return sourceDescriptor;
+};
+
+const getSceneActivity = ({
+	focusedIndex,
+	isClosing,
+	sceneIndex,
+	topIndex,
+	topIsClosing,
+}: SceneActivityWindow & {
+	isClosing: boolean;
+	sceneIndex: number;
+}): StackSceneActivity => {
+	if (isClosing) {
+		return "closing";
+	}
+
+	if (topIsClosing) {
+		return sceneIndex === focusedIndex ? "inert" : "inactive";
+	}
+
+	if (sceneIndex === topIndex) {
+		return "active";
+	}
+
+	if (sceneIndex === topIndex - 1) {
+		return "inert";
+	}
+
+	return "inactive";
+};
+
+const getSceneActivityWindow = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>({
+	props,
+	routes,
+	closingRouteKeys,
+}: BuildManagedStackStateParams<
+	TDescriptor,
+	TNavigation
+>): SceneActivityWindow => {
+	const focusedRouteKey = props.state.routes[props.state.index]?.key;
+
+	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--;
+	}
+
+	const topIndex = routes.length - 1;
+	const topRoute = routes[topIndex];
+	const topIsClosing =
+		topRoute !== undefined && closingRouteKeys.has(topRoute.key);
+
+	return {
+		focusedIndex,
+		topIndex,
+		topIsClosing,
+	};
+};
+
+const withDescriptorActivityState = <TDescriptor extends BaseStackDescriptor>(
+	descriptor: StackDescriptorSource<TDescriptor>,
+	activity: StackSceneActivity,
+): TDescriptor => {
+	if (descriptor.activity === activity) {
+		return descriptor as TDescriptor;
+	}
+
+	return {
+		...descriptor,
+		activity,
+	} as TDescriptor;
+};
+
+const buildBaseScenes = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>({
+	routes,
+	descriptors,
+	closingRouteKeys,
+	previousState,
+	activityWindow,
+}: BuildManagedStackStateParams<TDescriptor, TNavigation> & {
+	activityWindow: SceneActivityWindow;
+}) => {
+	const routeKeys: string[] = [];
+	const scenes: BaseStackScene<TDescriptor>[] = [];
+	const routeChildStates: Record<string, unknown> = {};
+	const sourceDescriptors = {} as ManagedDescriptorSources<TDescriptor>;
+	const managedDescriptors = {} as ManagedDescriptors<TDescriptor>;
+	let shouldShowFloatOverlay = false;
+
+	for (let sceneIndex = 0; sceneIndex < routes.length; sceneIndex++) {
+		const route = routes[sceneIndex] as TDescriptor["route"];
+
+		const rawSourceDescriptor = descriptors[route.key] as
+			| StackDescriptorSource<TDescriptor>
+			| undefined;
+
+		if (!rawSourceDescriptor) {
+			throw new Error(`Missing descriptor for route "${route.key}"`);
+		}
+
+		const routeChildState = getRouteChildState(route);
+		const childStateUnchanged =
+			!previousState ||
+			Object.is(previousState.routeChildStates[route.key], routeChildState);
+
+		const sourceDescriptor = childStateUnchanged
+			? resolveStableDescriptorSource({
+					routeKey: route.key,
+					sourceDescriptor: rawSourceDescriptor,
+					previousState,
+				})
+			: rawSourceDescriptor;
+
+		const activity = getSceneActivity({
+			...activityWindow,
+			isClosing: closingRouteKeys.has(route.key),
+			sceneIndex,
+		});
+
+		const previousDescriptor = previousState?.descriptors[route.key];
+		const descriptor =
+			previousDescriptor &&
+			childStateUnchanged &&
+			previousDescriptor.route === sourceDescriptor.route &&
+			previousDescriptor.navigation === sourceDescriptor.navigation &&
+			previousDescriptor.options === sourceDescriptor.options &&
+			previousDescriptor.activity === activity
+				? previousDescriptor
+				: withDescriptorActivityState(sourceDescriptor, activity);
+
+		routeKeys.push(route.key);
+		routeChildStates[route.key] = routeChildState;
+		sourceDescriptors[route.key] = sourceDescriptor;
+		managedDescriptors[route.key] = descriptor;
+
+		if (!shouldShowFloatOverlay) {
+			shouldShowFloatOverlay = isOverlayVisible(sourceDescriptor?.options);
+		}
+
+		scenes.push({
+			route: descriptor.route,
+			descriptor,
+		});
+	}
+
+	return {
+		scenes,
+		routeChildStates,
+		sourceDescriptors,
+		descriptors: managedDescriptors,
+		routeKeys,
+		shouldShowFloatOverlay,
+	};
+};
+
+const withSceneRelationships = <TDescriptor extends BaseStackDescriptor>({
+	scenes,
+	sourceDescriptors,
+	closingRouteKeys,
+	previousState,
+}: {
+	scenes: BaseStackScene<TDescriptor>[];
+	sourceDescriptors: ManagedDescriptorSources<TDescriptor>;
+	closingRouteKeys: ReadonlySet<string>;
+	previousState?: LocalRoutesState<TDescriptor>;
+}): BaseStackScene<TDescriptor>[] => {
+	const isRouteClosing = (routeKey: string) => closingRouteKeys.has(routeKey);
+
+	const closingRouteOrder = new Map(
+		Array.from(closingRouteKeys, (routeKey, index) => [routeKey, index]),
+	);
+
+	const previousScenesByRouteKey = previousState
+		? new Map(previousState.scenes.map((scene) => [scene.route.key, scene]))
+		: undefined;
+
+	let reusedEveryScene =
+		previousState !== undefined &&
+		scenes.length === previousState.scenes.length;
+
+	const relationshipScenes = scenes.map((scene) => ({
+		route: scene.route,
+		descriptor: (sourceDescriptors[scene.route.key] ??
+			scene.descriptor) as TDescriptor,
+	}));
+
+	const nextScenes = scenes.map((scene, sceneIndex) => {
+		const { previousDescriptor, nextDescriptor } = resolveSceneNeighbors(
+			relationshipScenes,
+			sceneIndex,
+			isRouteClosing,
+			(routeKey) => closingRouteOrder.get(routeKey),
+		);
+
+		const nextScene = {
+			...scene,
+			previousDescriptor,
+			nextDescriptor,
+		};
+
+		const previousScene =
+			previousState?.scenes[sceneIndex]?.route === scene.route
+				? previousState.scenes[sceneIndex]
+				: previousScenesByRouteKey?.get(scene.route.key);
+
+		if (
+			previousScene &&
+			previousScene.route === nextScene.route &&
+			previousScene.descriptor === nextScene.descriptor &&
+			previousScene.previousDescriptor === nextScene.previousDescriptor &&
+			previousScene.nextDescriptor === nextScene.nextDescriptor
+		) {
+			return previousScene;
+		}
+
+		reusedEveryScene = false;
+		return nextScene;
+	});
+
+	if (reusedEveryScene && previousState) {
+		return previousState.scenes;
+	}
+
+	return nextScenes;
+};
+
+export const buildManagedStackState = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>(
+	params: BuildManagedStackStateParams<TDescriptor, TNavigation>,
+): LocalRoutesState<TDescriptor> => {
+	const activityWindow = getSceneActivityWindow(params);
+	const focusedRouteKey =
+		params.props.state.routes[params.props.state.index]?.key;
+
+	const {
+		scenes: baseScenes,
+		routeChildStates,
+		sourceDescriptors,
+		descriptors: managedDescriptors,
+		routeKeys,
+		shouldShowFloatOverlay,
+	} = buildBaseScenes({
+		...params,
+		activityWindow,
+	});
+
+	const scenes = withSceneRelationships({
+		scenes: baseScenes,
+		sourceDescriptors,
+		closingRouteKeys: params.closingRouteKeys,
+		previousState: params.previousState,
+	});
+
+	const closingRouteKeys = new Set(params.closingRouteKeys);
+
+	return {
+		routes: params.routes,
+		descriptors:
+			params.previousState &&
+			areDescriptorsEqual(params.previousState.descriptors, managedDescriptors)
+				? params.previousState.descriptors
+				: managedDescriptors,
+		sourceDescriptors:
+			params.previousState &&
+			areDescriptorsEqual(
+				params.previousState.sourceDescriptors,
+				sourceDescriptors,
+			)
+				? params.previousState.sourceDescriptors
+				: sourceDescriptors,
+		focusedRouteKey,
+		routeChildStates:
+			params.previousState &&
+			areRouteChildStateMapsEqual(
+				params.previousState.routeChildStates,
+				routeChildStates,
+			)
+				? params.previousState.routeChildStates
+				: routeChildStates,
+		scenes,
+		routeKeys:
+			params.previousState &&
+			routeKeyListsAreEqual(params.previousState.routeKeys, routeKeys)
+				? params.previousState.routeKeys
+				: routeKeys,
+		shouldShowFloatOverlay,
+		closingRouteKeys:
+			params.previousState &&
+			setsAreEqual(params.previousState.closingRouteKeys, closingRouteKeys)
+				? params.previousState.closingRouteKeys
+				: closingRouteKeys,
+	};
+};

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

@@ -0,0 +1,121 @@
+import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	RouteWithKey,
+} from "../../../../../types/stack.types";
+import { buildManagedStackState } from "./build-managed-stack-state";
+import {
+	areDescriptorSourceMapsEquivalent,
+	areDescriptorsEqual,
+	areRouteChildStateMapsEqual,
+	getRouteChildStateMap,
+	routesHaveSameKeys,
+	setsAreEqual,
+} from "./helpers";
+import { reconcileManagedRoutes } from "./reconcile-managed-routes";
+import type { LocalRoutesState, ManagedRoutes } from "./types";
+
+type DeriveManagedStackStateParams<
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+> = {
+	props: ManagedStackProps<TDescriptor, TNavigation>;
+	current: LocalRoutesState<TDescriptor>;
+	previousRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	closingRouteKeys: Set<string>;
+};
+
+const routesAreIdentical = <Route extends RouteWithKey>(
+	a: Route[],
+	b: Route[],
+): boolean => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+
+	return a.every((route, index) => route === b[index]);
+};
+
+export const deriveManagedStackState = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>({
+	props,
+	current,
+	previousRoutesSnapshot,
+	closingRouteKeys,
+}: DeriveManagedStackStateParams<
+	TDescriptor,
+	TNavigation
+>): LocalRoutesState<TDescriptor> => {
+	const nextRoutesSnapshot = props.state.routes;
+	const nextDescriptors = props.descriptors;
+	const nextRouteChildStates = getRouteChildStateMap(nextRoutesSnapshot);
+	const nextFocusedRouteKey = nextRoutesSnapshot[props.state.index]?.key;
+	const focusedRouteUnchanged = current.focusedRouteKey === nextFocusedRouteKey;
+	const closingRouteKeysUnchanged = setsAreEqual(
+		current.closingRouteKeys,
+		closingRouteKeys,
+	);
+	const routeChildStatesUnchanged = areRouteChildStateMapsEqual(
+		current.routeChildStates,
+		nextRouteChildStates,
+	);
+
+	const alreadyAligned =
+		focusedRouteUnchanged &&
+		closingRouteKeysUnchanged &&
+		routeChildStatesUnchanged &&
+		routesAreIdentical(current.routes, nextRoutesSnapshot) &&
+		areDescriptorsEqual(current.sourceDescriptors, nextDescriptors);
+
+	if (alreadyAligned) {
+		return current;
+	}
+
+	const logicallyAligned =
+		focusedRouteUnchanged &&
+		closingRouteKeysUnchanged &&
+		routeChildStatesUnchanged &&
+		routesHaveSameKeys(current.routes, nextRoutesSnapshot) &&
+		areDescriptorSourceMapsEquivalent(
+			current.sourceDescriptors,
+			nextDescriptors,
+		);
+
+	if (logicallyAligned) {
+		return current;
+	}
+
+	const result = reconcileManagedRoutes({
+		current,
+		previousRoutesSnapshot,
+		nextRoutesSnapshot,
+		nextDescriptors,
+		closingRouteKeys,
+	});
+
+	const routesChanged = !routesAreIdentical(current.routes, result.routes);
+	const descriptorsChanged = !areDescriptorsEqual(
+		current.sourceDescriptors,
+		result.descriptors,
+	);
+	const closingRouteKeysChanged = !setsAreEqual(
+		current.closingRouteKeys,
+		closingRouteKeys,
+	);
+
+	if (!routesChanged && !descriptorsChanged && !closingRouteKeysChanged) {
+		return current;
+	}
+
+	return buildManagedStackState({
+		props,
+		routes: routesChanged ? result.routes : current.routes,
+		descriptors: descriptorsChanged
+			? result.descriptors
+			: current.sourceDescriptors,
+		closingRouteKeys,
+		previousState: current,
+	});
+};