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

package/src/shared/components/screen-lifecycle/hooks/use-close-transition-intent.ts

@@ -1,6 +1,5 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: STACK_TYPE is stable per navigator */
 import { useLayoutEffect, useMemo, useRef } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
 import useStableCallback from "../../../hooks/use-stable-callback";
 import {
 	type BaseDescriptor,
@@ -8,7 +7,6 @@ import {
 } from "../../../providers/screen/descriptors";
 import { useStackCoreContext } from "../../../providers/stack/core.provider";
 import { useManagedStackContext } from "../../../providers/stack/managed.provider";
-import type { AnimationStoreMap } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
 import {
 	LifecycleTransitionRequestKind,
@@ -20,22 +18,24 @@ import { resetStoresForScreen } from "./helpers/reset-stores-for-screen";
 
 interface CloseHookParams {
 	current: BaseDescriptor;
-	animations: AnimationStoreMap;
 	requestLifecycleTransition: SystemStoreActions["requestLifecycleTransition"];
 	resetStores: () => void;
 }
 
-/**
- * Managed close - reacts to closingRouteKeysShared from ManagedStackContext.
- * Used by blank-stack and component-stack.
- */
 const useManagedClose = ({
 	current,
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
-	const { handleCloseRoute, closingRouteKeysShared } = useManagedStackContext();
-	const routeKey = current.route.key;
+	const { handleCloseRoute } = useManagedStackContext();
+
+	useLayoutEffect(() => {
+		if (current.activity !== "closing") {
+			return;
+		}
+
+		requestLifecycleTransition(LifecycleTransitionRequestKind.ManagedClose, 0);
+	}, [current.activity, requestLifecycleTransition]);
 
 	const handleManagedCloseEnd = useStableCallback((finished: boolean) => {
 		if (!finished) return;
@@ -45,21 +45,6 @@ const useManagedClose = ({
 		});
 	});
 
-	useAnimatedReaction(
-		() => {
-			const keys = closingRouteKeysShared.get();
-			return keys?.includes(routeKey) ?? false;
-		},
-		(isClosing, wasClosing) => {
-			if (!isClosing || wasClosing) return;
-
-			requestLifecycleTransition(
-				LifecycleTransitionRequestKind.ManagedClose,
-				0,
-			);
-		},
-	);
-
 	return { handleManagedCloseEnd };
 };
 
@@ -127,7 +112,6 @@ const useNativeStackClose = ({
  */
 export function useCloseTransitionIntent(
 	current: BaseDescriptor,
-	animations: AnimationStoreMap,
 	system: SystemStoreMap,
 ): {
 	handleManagedCloseEnd?: (finished: boolean) => void;
@@ -144,7 +128,6 @@ export function useCloseTransitionIntent(
 
 	const closeParams: CloseHookParams = {
 		current,
-		animations,
 		requestLifecycleTransition,
 		resetStores,
 	};

package/src/shared/components/screen-lifecycle/index.tsx

@@ -21,7 +21,7 @@ export const ScreenLifecycle = ({ children }: Props) => {
 	const system = SystemStore.getBag(current.route.key);
 
 	const { handleManagedCloseEnd, handleNativeCloseEnd } =
-		useCloseTransitionIntent(current, animations, system);
+		useCloseTransitionIntent(current, system);
 
 	useOpenTransitionIntent(current, animations, system);
 

package/src/shared/hooks/navigation/use-navigation-helpers.ts

@@ -1,9 +1,15 @@
 import { StackActions } from "@react-navigation/native";
 import { useCallback } from "react";
-import { useDescriptors } from "../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../providers/screen/descriptors";
+import { useStack } from "./use-stack";
 
 export function useNavigationHelpers() {
-	const { current } = useDescriptors();
+	const current = useDescriptorsStore((store) => store.descriptors.current);
+	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
+
+	const requestDismiss = useCallback((): boolean => {
+		return requestStackDismiss?.({ route: current.route }) ?? false;
+	}, [current.route, requestStackDismiss]);
 
 	const dismissScreen = useCallback((): boolean => {
 		const state = current.navigation.getState();
@@ -21,5 +27,5 @@ export function useNavigationHelpers() {
 		return true;
 	}, [current]);
 
-	return { dismissScreen };
+	return { dismissScreen, requestDismiss };
 }

package/src/shared/hooks/navigation/use-stack.tsx

@@ -1,5 +1,13 @@
 import type { Route } from "@react-navigation/native";
-import { createContext, useContext } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useLayoutEffect,
+	useRef,
+	useSyncExternalStore,
+} from "react";
 import type { DerivedValue } from "react-native-reanimated";
 import type { StackCoreContextValue } from "../../providers/stack/core.provider";
 import type { OverlayProps } from "../../types/overlay.types";
@@ -25,23 +33,124 @@ export interface StackDescriptor<
 export type StackScene<TDescriptor extends StackDescriptor = StackDescriptor> =
 	BaseStackScene<TDescriptor>;
 
+type StackDismissRequest = (payload: { route: BaseStackRoute }) => boolean;
+type StackSelector<T> = (stack: StackContextValue) => T;
+
 export interface StackContextValue extends StackCoreContextValue {
 	navigatorKey: string;
 	routeKeys: string[];
 	routes: Route<string>[];
 	scenes: StackScene[];
 	optimisticFocusedIndex: DerivedValue<number>;
+	focusedIndex: number;
+	requestDismiss?: StackDismissRequest;
+}
+
+interface StackStoreApi {
+	getSnapshot: () => StackContextValue;
+	subscribe: (listener: () => void) => () => void;
 }
 
-export const StackContext = createContext<StackContextValue | null>(null);
+interface MutableStackStoreApi extends StackStoreApi {
+	notify: () => void;
+	setSnapshot: (snapshot: StackContextValue) => boolean;
+}
+
+const createStackStore = (
+	initialSnapshot: StackContextValue,
+): MutableStackStoreApi => {
+	let snapshot = initialSnapshot;
+	const listeners = new Set<() => void>();
+
+	return {
+		getSnapshot: () => snapshot,
+		notify: () => {
+			for (const listener of listeners) {
+				listener();
+			}
+		},
+		setSnapshot: (nextSnapshot) => {
+			if (Object.is(snapshot, nextSnapshot)) {
+				return false;
+			}
+
+			snapshot = nextSnapshot;
+			return true;
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+	};
+};
+
+const StackContext = createContext<StackStoreApi | null>(null);
 StackContext.displayName = "Stack";
 
-export function useStack<T extends StackContextValue = StackContextValue>(): T {
-	const context = useContext(StackContext);
+export function StackProvider({
+	children,
+	value,
+}: {
+	children: ReactNode;
+	value: StackContextValue;
+}) {
+	const storeRef = useRef<MutableStackStoreApi | null>(null);
+	const pendingNotifyRef = useRef(false);
+
+	let store = storeRef.current;
+	if (!store) {
+		store = createStackStore(value);
+		storeRef.current = store;
+	}
 
-	if (context === null) {
+	pendingNotifyRef.current =
+		store.setSnapshot(value) || pendingNotifyRef.current;
+
+	useLayoutEffect(() => {
+		if (!pendingNotifyRef.current) {
+			return;
+		}
+
+		pendingNotifyRef.current = false;
+		store.notify();
+	});
+
+	return (
+		<StackContext.Provider value={store}>{children}</StackContext.Provider>
+	);
+}
+
+function useStackStore(): StackStoreApi {
+	const store = useContext(StackContext);
+
+	if (store === null) {
 		throw new Error("useStack must be used within a Stack provider");
 	}
 
-	return context as T;
+	return store;
+}
+
+export function useStack<T extends StackContextValue = StackContextValue>(): T;
+export function useStack<T>(selector: StackSelector<T>): T;
+export function useStack<T>(
+	selector?: StackSelector<T>,
+): StackContextValue | T {
+	const store = useStackStore();
+	const selectorRef = useRef<StackSelector<StackContextValue | T>>(
+		selector ?? ((stack) => stack),
+	);
+	selectorRef.current = selector ?? ((stack) => stack);
+
+	const getSelectedSnapshot = useCallback(
+		() => selectorRef.current(store.getSnapshot()),
+		[store],
+	);
+
+	return useSyncExternalStore(
+		store.subscribe,
+		getSelectedSnapshot,
+		getSelectedSnapshot,
+	);
 }

package/src/shared/index.ts

@@ -1,4 +1,5 @@
 import { FlatList, Pressable, ScrollView, View } from "react-native";
+import { withScreenTransitions } from "./adapters/with-screen-transitions";
 import {
 	Boundary,
 	createBoundaryComponent,
@@ -10,6 +11,7 @@ import { Presets, Specs } from "./configs";
 export default {
 	createTransitionAwareComponent,
 	createBoundaryComponent,
+	withScreenTransitions,
 	Boundary,
 	View: createTransitionAwareComponent(View),
 	Pressable: createTransitionAwareComponent(Pressable),
@@ -24,6 +26,12 @@ export default {
 	Specs,
 };
 
+export type {
+	NativeStackAdapterOptions,
+	NativeStackNativeGestureOptions,
+	ScreenTransitionDescriptorOptions,
+} from "./adapters/with-screen-transitions";
+export { withScreenTransitions } from "./adapters/with-screen-transitions";
 export { snapTo } from "./animation/snap-to";
 export {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
@@ -53,6 +61,7 @@ export type {
 	BoundsNavigationZoomOpacityRanges,
 	BoundsNavigationZoomOptions,
 	BoundsNavigationZoomStyle,
+	InactiveBehavior,
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,

package/src/shared/providers/screen/descriptors/descriptors.provider.tsx

@@ -8,8 +8,8 @@ import { getAncestorKeys } from "./helpers/get-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
- * This allows blank-stack and native-stack to work with the shared
- * providers without tight coupling to React Navigation.
+ * This allows stack implementations to work with the shared providers without
+ * tight coupling to React Navigation.
  */
 export type BaseDescriptor = BaseStackDescriptor;
 
@@ -23,6 +23,13 @@ export interface DescriptorsContextValue<
 
 export type DescriptorDerivationsContextValue = DescriptorDerivations;
 
+interface DescriptorStoreValue<
+	TDescriptor extends BaseDescriptor = BaseDescriptor,
+> {
+	descriptors: DescriptorsContextValue<TDescriptor>;
+	derivations: DescriptorDerivationsContextValue;
+}
+
 interface DescriptorsProviderProps<TDescriptor extends BaseDescriptor> {
 	children: ReactNode;
 	previous?: TDescriptor;
@@ -30,35 +37,21 @@ interface DescriptorsProviderProps<TDescriptor extends BaseDescriptor> {
 	next?: TDescriptor;
 }
 
-type InternalProviderProps = DescriptorsProviderProps<BaseDescriptor>;
-
 const {
 	DescriptorsProvider: InternalDescriptorsProvider,
-	useDescriptorsContext,
+	useDescriptorsStore,
 } = createProvider("Descriptors", { guarded: true })<
-	InternalProviderProps,
-	DescriptorsContextValue<BaseDescriptor>
->(({ previous, current, next }) => {
-	const value = useMemo(
+	DescriptorsProviderProps<BaseDescriptor>,
+	DescriptorStoreValue<BaseDescriptor>
+>(({ previous, current, next, children }) => {
+	const descriptors = useMemo(
 		() => ({ previous, current, next }),
 		[previous, current, next],
 	);
 
-	return {
-		value,
-	};
-});
-
-const {
-	DescriptorDerivationsProvider: InternalDescriptorDerivationsProvider,
-	useDescriptorDerivationsContext,
-} = createProvider("DescriptorDerivations", { guarded: true })<
-	InternalProviderProps,
-	DescriptorDerivationsContextValue
->(({ previous, current, next, children }) => {
 	const ancestorKeys = useMemo(() => getAncestorKeys(current), [current]);
 
-	const value = useMemo(
+	const derivations = useMemo(
 		() =>
 			deriveDescriptorDerivations({
 				previous,
@@ -69,6 +62,14 @@ const {
 		[previous, current, next, ancestorKeys],
 	);
 
+	const value = useMemo(
+		() => ({
+			descriptors,
+			derivations,
+		}),
+		[descriptors, derivations],
+	);
+
 	return {
 		value,
 		children,
@@ -85,23 +86,22 @@ export function DescriptorsProvider<TDescriptor extends BaseDescriptor>({
 		previous,
 		current,
 		next,
+		children,
 	};
 
-	return (
-		<InternalDescriptorsProvider {...providerProps}>
-			<InternalDescriptorDerivationsProvider {...providerProps}>
-				{children}
-			</InternalDescriptorDerivationsProvider>
-		</InternalDescriptorsProvider>
-	);
+	return <InternalDescriptorsProvider {...providerProps} />;
 }
 
 export function useDescriptors<
 	TDescriptor extends BaseDescriptor = BaseDescriptor,
 >() {
-	return useDescriptorsContext() as DescriptorsContextValue<TDescriptor>;
+	return useDescriptorsStore(
+		(store) => store.descriptors,
+	) as DescriptorsContextValue<TDescriptor>;
 }
 
 export function useDescriptorDerivations(): DescriptorDerivationsContextValue {
-	return useDescriptorDerivationsContext();
+	return useDescriptorsStore((store) => store.derivations);
 }
+
+export { useDescriptorsStore };

package/src/shared/providers/screen/descriptors/index.tsx

@@ -3,4 +3,5 @@ export {
 	DescriptorsProvider,
 	useDescriptorDerivations,
 	useDescriptors,
+	useDescriptorsStore,
 } from "./descriptors.provider";

package/src/shared/providers/screen/gestures/ownership/resolve-ownership.ts

@@ -87,6 +87,7 @@ export function shouldDeferToChildClaim(
 	"worklet";
 	if (!childClaim) return false;
 	if (childClaim.routeKey === selfRouteKey) return false;
-	if (childClaim.isDismissing.get()) return false;
+	// A closing child still owns its axis until its claim is cleaned up; otherwise
+	// an ancestor can steal the next drag while the previous screen is visible.
 	return true;
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useLayoutEffect, useMemo } from "react";
 import { GestureStore } from "../../../../stores/gesture.store";
 import {
 	type ClaimedDirections,
@@ -115,7 +115,7 @@ export function useWalkUpAndRegisterShadowingClaims(
 		[parentContext, claimedDirections],
 	);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!isTopMostScreen || !shadowedAncestors.length) {
 			return;
 		}

package/src/shared/providers/screen/gestures/pan/pan-lifecycle.ts

@@ -1,4 +1,4 @@
-import { clamp } from "react-native-reanimated";
+import { clamp, runOnJS } from "react-native-reanimated";
 import { EPSILON, FALSE, TRUE } from "../../../../constants";
 import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
 import { emit } from "../../../../utils/animation/emit";
@@ -94,9 +94,10 @@ export const trackPanGesture = (
 export const finalizePanRelease = (
 	release: PanReleaseResult,
 	runtime: PanGestureRuntime,
-	dismissScreen: (() => void) | undefined,
+	dismissScreen: ((finished: boolean) => void) | undefined,
 	dimensions: GestureDimensions,
 	rawEvent: PanGestureEvent,
+	requestDismiss?: () => void,
 ) => {
 	"worklet";
 	const {
@@ -132,6 +133,10 @@ export const finalizePanRelease = (
 		return;
 	}
 
+	if (plan.shouldDismiss && requestDismiss) {
+		runOnJS(requestDismiss)();
+	}
+
 	animateToProgress({
 		target: plan.target,
 		onAnimationFinish: plan.shouldDismiss ? dismissScreen : undefined,

package/src/shared/providers/screen/gestures/pan/use-pan-behavior.ts

@@ -26,7 +26,7 @@ export const usePanBehavior = (
 	screenOptions: ScreenOptionsContextValue,
 	dimensions: GestureDimensions,
 ): PanBehavior => {
-	const { dismissScreen } = useNavigationHelpers();
+	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
 		usePanGestureSensitivity(screenOptions);
 
@@ -76,9 +76,17 @@ export const usePanBehavior = (
 				dismissScreen,
 				dimensions,
 				rawEvent,
+				requestDismiss,
 			);
 		},
-		[runtime, screenOptions, dimensions, dismissScreen, withSensitivity],
+		[
+			runtime,
+			screenOptions,
+			dimensions,
+			dismissScreen,
+			requestDismiss,
+			withSensitivity,
+		],
 	);
 
 	return useMemo(

package/src/shared/providers/screen/gestures/pinch/pinch-lifecycle.ts

@@ -1,4 +1,4 @@
-import { clamp } from "react-native-reanimated";
+import { clamp, runOnJS } from "react-native-reanimated";
 import { EPSILON, FALSE, TRUE } from "../../../../constants";
 import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
 import { emit } from "../../../../utils/animation/emit";
@@ -73,7 +73,8 @@ export const trackPinchGesture = (
 export const finalizePinchRelease = (
 	release: PinchReleaseResult,
 	runtime: PinchGestureRuntime,
-	dismissScreen: (() => void) | undefined,
+	dismissScreen: ((finished: boolean) => void) | undefined,
+	requestDismiss?: () => void,
 ) => {
 	"worklet";
 	const {
@@ -92,6 +93,10 @@ export const finalizePinchRelease = (
 		resetValuesImmediately: release.resetValuesImmediately,
 	});
 
+	if (release.shouldDismiss && requestDismiss) {
+		runOnJS(requestDismiss)();
+	}
+
 	animateToProgress({
 		target: release.target,
 		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,

package/src/shared/providers/screen/gestures/pinch/use-pinch-behavior.ts

@@ -24,7 +24,7 @@ export const usePinchBehavior = (
 	runtime: SharedValue<PinchGestureRuntime>,
 	screenOptions: ScreenOptionsContextValue,
 ): PinchBehavior => {
-	const { dismissScreen } = useNavigationHelpers();
+	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
 		usePinchGestureSensitivity(screenOptions);
 
@@ -69,9 +69,14 @@ export const usePinchBehavior = (
 				.hasSnapPoints
 				? resolveSnapPinchRelease(event, latestRuntime)
 				: resolvePinchRelease(event, latestRuntime);
-			finalizePinchRelease(release, latestRuntime, dismissScreen);
+			finalizePinchRelease(
+				release,
+				latestRuntime,
+				dismissScreen,
+				requestDismiss,
+			);
 		},
-		[runtime, screenOptions, dismissScreen, withSensitivity],
+		[runtime, screenOptions, dismissScreen, requestDismiss, withSensitivity],
 	);
 
 	return useMemo(

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/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>
 		);
 	};
 }