react-native-screen-transitions 3.10.0 → 3.11.0

package/src/native-stack/views/NativeStackView.native.tsx

@@ -30,10 +30,11 @@ import {
 } from "react-native-screens";
 import { Overlay } from "../../shared/components/overlay";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
-import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { StackCoreProvider } from "../../shared/providers/stack/core.provider";
 import {
-	type DirectStackContextValue,
-	withDirectStack,
+	type DirectStackProps,
+	DirectStackProvider,
+	useDirectStackStore,
 } from "../../shared/providers/stack/direct.provider";
 import { StackType } from "../../shared/types/stack.types";
 import { isFabric } from "../../shared/utils/platform";
@@ -478,133 +479,143 @@ const SceneView = ({
 	);
 };
 
-export const NativeStackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE },
-	withDirectStack(function NativeStackViewContent({
+function NativeStackViewContent() {
+	const {
 		state,
 		navigation,
 		descriptors,
 		scenes,
 		focusedIndex,
 		shouldShowFloatOverlay,
-	}: DirectStackContextValue) {
-		const { setNextDismissedKey } = useDismissedRouteError(state);
-
-		useInvalidPreventRemoveError(descriptors);
-
-		const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
-
-		return (
-			<>
-				{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-				<ScreenStack style={styles.container}>
-					{scenes.map((scene, index) => {
-						const { route, descriptor, isPreloaded } = scene;
-						const isFocused = focusedIndex === index;
-						const isBelowFocused = focusedIndex - 1 === index;
-
-						// Get previous/next descriptors from state.routes (not scenes) for proper navigation
-						const previousKey = state.routes[index - 1]?.key;
-						const nextKey = state.routes[index + 1]?.key;
-						const previousDescriptor = previousKey
-							? descriptors[previousKey]
-							: undefined;
-						const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-
-						const isModal = modalRouteKeys.includes(route.key);
-
-						// On Fabric, when screen is frozen, animated and reanimated values are not updated
-						// due to component being unmounted. To avoid this, we don't freeze the previous screen there
-						const shouldFreeze = isFabric()
-							? !isPreloaded && !isFocused && !isBelowFocused
-							: !isPreloaded && !isFocused;
-
-						return (
-							<SceneView
-								key={route.key}
-								index={index}
-								focused={isFocused}
-								shouldFreeze={shouldFreeze}
-								descriptor={descriptor}
-								previousDescriptor={previousDescriptor}
-								nextDescriptor={nextDescriptor}
-								isPresentationModal={isModal}
-								isPreloaded={isPreloaded}
-								onWillDisappear={() => {
-									navigation.emit({
-										type: "transitionStart",
-										data: { closing: true },
-										target: route.key,
-									});
-								}}
-								onWillAppear={() => {
-									navigation.emit({
-										type: "transitionStart",
-										data: { closing: false },
-										target: route.key,
-									});
-								}}
-								onAppear={() => {
-									navigation.emit({
-										type: "transitionEnd",
-										data: { closing: false },
-										target: route.key,
-									});
-								}}
-								onDisappear={() => {
-									navigation.emit({
-										type: "transitionEnd",
-										data: { closing: true },
-										target: route.key,
-									});
-								}}
-								onDismissed={(event) => {
-									navigation.dispatch({
-										...StackActions.pop(event.nativeEvent.dismissCount),
-										source: route.key,
-										target: state.key,
-									});
-
-									setNextDismissedKey(route.key);
-								}}
-								onHeaderBackButtonClicked={() => {
-									navigation.dispatch({
-										...StackActions.pop(),
-										source: route.key,
-										target: state.key,
-									});
-								}}
-								onNativeDismissCancelled={(event) => {
-									navigation.dispatch({
-										...StackActions.pop(event.nativeEvent.dismissCount),
-										source: route.key,
-										target: state.key,
-									});
-								}}
-								onGestureCancel={() => {
-									navigation.emit({
-										type: "gestureCancel",
-										target: route.key,
-									});
-								}}
-								onSheetDetentChanged={(event) => {
-									navigation.emit({
-										type: "sheetDetentChange",
-										target: route.key,
-										data: {
-											index: event.nativeEvent.index,
-											stable: event.nativeEvent.isStable,
-										},
-									});
-								}}
-							/>
-						);
-					})}
-				</ScreenStack>
-			</>
-		);
-	}),
-);
+	} = useDirectStackStore();
+	const { setNextDismissedKey } = useDismissedRouteError(state);
+
+	useInvalidPreventRemoveError(descriptors);
+
+	const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
+
+	return (
+		<>
+			{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+			<ScreenStack style={styles.container}>
+				{scenes.map((scene, index) => {
+					const { route, descriptor, isPreloaded } = scene;
+					const isFocused = focusedIndex === index;
+					const isBelowFocused = focusedIndex - 1 === index;
+
+					// Get previous/next descriptors from state.routes (not scenes) for proper navigation
+					const previousKey = state.routes[index - 1]?.key;
+					const nextKey = state.routes[index + 1]?.key;
+					const previousDescriptor = previousKey
+						? descriptors[previousKey]
+						: undefined;
+					const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+
+					const isModal = modalRouteKeys.includes(route.key);
+
+					// On Fabric, when screen is frozen, animated and reanimated values are not updated
+					// due to component being unmounted. To avoid this, we don't freeze the previous screen there
+					const shouldFreeze = isFabric()
+						? !isPreloaded && !isFocused && !isBelowFocused
+						: !isPreloaded && !isFocused;
+
+					return (
+						<SceneView
+							key={route.key}
+							index={index}
+							focused={isFocused}
+							shouldFreeze={shouldFreeze}
+							descriptor={descriptor}
+							previousDescriptor={previousDescriptor}
+							nextDescriptor={nextDescriptor}
+							isPresentationModal={isModal}
+							isPreloaded={isPreloaded}
+							onWillDisappear={() => {
+								navigation.emit({
+									type: "transitionStart",
+									data: { closing: true },
+									target: route.key,
+								});
+							}}
+							onWillAppear={() => {
+								navigation.emit({
+									type: "transitionStart",
+									data: { closing: false },
+									target: route.key,
+								});
+							}}
+							onAppear={() => {
+								navigation.emit({
+									type: "transitionEnd",
+									data: { closing: false },
+									target: route.key,
+								});
+							}}
+							onDisappear={() => {
+								navigation.emit({
+									type: "transitionEnd",
+									data: { closing: true },
+									target: route.key,
+								});
+							}}
+							onDismissed={(event) => {
+								navigation.dispatch({
+									...StackActions.pop(event.nativeEvent.dismissCount),
+									source: route.key,
+									target: state.key,
+								});
+
+								setNextDismissedKey(route.key);
+							}}
+							onHeaderBackButtonClicked={() => {
+								navigation.dispatch({
+									...StackActions.pop(),
+									source: route.key,
+									target: state.key,
+								});
+							}}
+							onNativeDismissCancelled={(event) => {
+								navigation.dispatch({
+									...StackActions.pop(event.nativeEvent.dismissCount),
+									source: route.key,
+									target: state.key,
+								});
+							}}
+							onGestureCancel={() => {
+								navigation.emit({
+									type: "gestureCancel",
+									target: route.key,
+								});
+							}}
+							onSheetDetentChanged={(event) => {
+								navigation.emit({
+									type: "sheetDetentChange",
+									target: route.key,
+									data: {
+										index: event.nativeEvent.index,
+										stable: event.nativeEvent.isStable,
+									},
+								});
+							}}
+						/>
+					);
+				})}
+			</ScreenStack>
+		</>
+	);
+}
+
+export function NativeStackView(props: DirectStackProps) {
+	return (
+		<StackCoreProvider
+			config={{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE }}
+		>
+			<DirectStackProvider {...props}>
+				<NativeStackViewContent />
+			</DirectStackProvider>
+		</StackCoreProvider>
+	);
+}
 
 const styles = StyleSheet.create({
 	container: {

package/src/shared/adapters/with-screen-transitions/context.tsx

@@ -10,6 +10,7 @@ export type ScreenTransitionsAdapterScene =
 export interface ScreenTransitionsAdapterContextValue {
 	routeIndexByKey: ReadonlyMap<string, number>;
 	scenes: ScreenTransitionsAdapterScene[];
+	scenesByKey?: Readonly<Record<string, ScreenTransitionsAdapterScene>>;
 }
 
 const ScreenTransitionsAdapterContext =
@@ -40,3 +41,7 @@ export function useScreenTransitionsAdapterContext() {
 	}
 	return context;
 }
+
+export function useScreenTransitionsAdapterOptionalContext() {
+	return useContext(ScreenTransitionsAdapterContext);
+}

package/src/shared/adapters/with-screen-transitions/stack-layout.tsx

@@ -7,8 +7,8 @@ import {
 } from "../../hooks/navigation/use-stack";
 import { ScreenComposer } from "../../providers/screen/screen-composer";
 import {
-	useStackCoreContext,
-	withStackCore,
+	StackCoreProvider,
+	useStackCoreStore,
 } from "../../providers/stack/core.provider";
 import type { BaseStackDescriptor, BaseStackRoute } from "../../types";
 import { StackType } from "../../types/stack.types";
@@ -102,6 +102,12 @@ function buildTransitionStackState({
 		}
 
 		scenes.push({
+			activity:
+				sceneIndex === state.index
+					? "active"
+					: sceneIndex === state.index - 1
+						? "inert"
+						: "inactive",
 			route,
 			descriptor: normalizedDescriptor,
 			previousDescriptor,
@@ -137,7 +143,7 @@ function ScreenTransitionsStackContent({
 	layout,
 	layoutArgs,
 }: ScreenTransitionsStackContentProps) {
-	const { flags } = useStackCoreContext();
+	const flags = useStackCoreStore((store) => store.flags);
 	const transitionState = useMemo(
 		() =>
 			buildTransitionStackState({
@@ -183,10 +189,17 @@ function ScreenTransitionsStackContent({
 	);
 }
 
-export const ScreenTransitionsStackLayout = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE },
-	ScreenTransitionsStackContent,
-);
+export function ScreenTransitionsStackLayout(
+	props: ScreenTransitionsStackContentProps,
+) {
+	return (
+		<StackCoreProvider
+			config={{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE }}
+		>
+			<ScreenTransitionsStackContent {...props} />
+		</StackCoreProvider>
+	);
+}
 
 export function ScreenTransitionsScreenLayout({
 	screenLayout,

package/src/shared/animation/snap-to.ts

@@ -60,6 +60,7 @@ export function snapDescriptorToIndex(
 
 		animateToProgress({
 			target: targetProgress,
+			markEntering: false,
 			animations,
 			targetProgress: targetProgressValue,
 			animationProgress: animationProgressValue,

package/src/shared/components/activity/variants/activity-screen.tsx

@@ -6,6 +6,7 @@ import { Screen } from "react-native-screens";
 import { IS_WEB } from "../../../constants";
 import { useStack } from "../../../hooks/navigation/use-stack";
 import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../stores/animation.store";
 import type { StackSceneActivity } from "../../../types/stack.types";
 import { DEFAULT_INACTIVE_BEHAVIOR, type InactiveBehavior } from "../helpers";
@@ -26,23 +27,55 @@ const PointerEventsByActivity = {
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
-	activity: StackSceneActivity;
+	activity?: StackSceneActivity;
 	children: React.ReactNode;
 	inactiveBehavior?: InactiveBehavior;
 	paintDriverRouteKey?: string;
 	hasNestedState?: boolean;
+	routeKey?: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
 	activity,
 	children,
-	inactiveBehavior = DEFAULT_INACTIVE_BEHAVIOR,
+	inactiveBehavior,
 	paintDriverRouteKey,
 	hasNestedState,
+	routeKey,
 }: ActivityScreenProps) {
+	const stackActivity = useBlankStackStore((store) =>
+		routeKey ? store?.scenesByKey[routeKey]?.activity : undefined,
+	);
+	const stackInactiveBehavior = useBlankStackStore((store) =>
+		routeKey
+			? (
+					store?.scenesByKey[routeKey]?.descriptor.options as
+						| { inactiveBehavior?: InactiveBehavior }
+						| undefined
+				)?.inactiveBehavior
+			: undefined,
+	);
+	const stackRoute = useBlankStackStore((store) =>
+		routeKey ? store?.scenesByKey[routeKey]?.route : undefined,
+	);
+	const stackPaintDriverRouteKey = useBlankStackStore((store) => {
+		if (!routeKey || !store) {
+			return undefined;
+		}
+
+		const routeIndex = store.routeKeys.indexOf(routeKey);
+		return store.routeKeys[routeIndex + 2];
+	});
+	const resolvedActivity = activity ?? stackActivity ?? "active";
+	const resolvedInactiveBehavior =
+		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
+	const resolvedPaintDriverRouteKey =
+		paintDriverRouteKey ?? stackPaintDriverRouteKey;
+	const resolvedHasNestedState =
+		hasNestedState ?? (stackRoute ? "state" in stackRoute : false);
 	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
-	const paintDriverAnimations = paintDriverRouteKey
-		? AnimationStore.getBag(paintDriverRouteKey)
+	const paintDriverAnimations = resolvedPaintDriverRouteKey
+		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
 		: undefined;
 
 	/**
@@ -64,14 +97,14 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
 
-	let activityState: ActivityState = ActivityStateByActivity[activity];
+	let activityState: ActivityState = ActivityStateByActivity[resolvedActivity];
 	let shouldFreeze = false;
-	let visible = activity !== "inactive";
+	let visible = resolvedActivity !== "inactive";
 
 	const shouldWaitForPaintDriver = !isPaintDriverSettledOnJS;
 
-	if (activity === "inactive") {
-		if (inactiveBehavior === "keep") {
+	if (resolvedActivity === "inactive") {
+		if (resolvedInactiveBehavior === "keep") {
 			activityState = 1;
 			visible = true;
 		} else if (shouldWaitForPaintDriver) {
@@ -79,7 +112,7 @@ export const ActivityScreen = memo(function ActivityScreen({
 			// a blank frame during the transition.
 			activityState = 1;
 			visible = true;
-		} else if (inactiveBehavior === "pause") {
+		} else if (resolvedInactiveBehavior === "pause") {
 			activityState = 1;
 			shouldFreeze = true;
 			visible = true;
@@ -93,12 +126,12 @@ export const ActivityScreen = memo(function ActivityScreen({
 	}
 
 	const shouldUnmount =
-		inactiveBehavior === "unmount" &&
-		activity === "inactive" &&
-		!hasNestedState &&
+		resolvedInactiveBehavior === "unmount" &&
+		resolvedActivity === "inactive" &&
+		!resolvedHasNestedState &&
 		isPaintDriverSettledOnJS;
 
-	const pointerEvents = PointerEventsByActivity[activity];
+	const pointerEvents = PointerEventsByActivity[resolvedActivity];
 
 	if (shouldUnmount) {
 		return null;

package/src/shared/components/boundary/components/boundary-target.tsx

@@ -13,7 +13,7 @@ import {
 import { BoundaryPortal } from "../portal/components/boundary-portal";
 import {
 	TARGET_OUTSIDE_ROOT_WARNING,
-	useBoundaryRootContext,
+	useBoundaryRootStore,
 } from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
@@ -36,7 +36,7 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		style,
 		...rest
 	} = props;
-	const rootContext = useBoundaryRootContext();
+	const rootContext = useBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
 	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;

package/src/shared/components/boundary/hooks/lifecycles/use-initial-destination-measurement.ts

@@ -19,7 +19,9 @@ import { logger } from "../../../../utils/logger";
 import type { MeasureBoundary } from "../../types";
 import { getInitialDestinationMeasurementSignal } from "../../utils/destination-signals";
 
-const HANDSHAKE_RETRY_DELAY_MS = 100;
+// A missed layout should be retried on the next frame. The previous 100 ms
+// interval made each ordinary Android layout miss visibly delay navigation.
+const HANDSHAKE_RETRY_DELAY_MS = 16;
 /**
  * A destination whose initial handshake never completes must not hold the
  * transition gate forever. After this budget, release the block with a warning
@@ -122,25 +124,32 @@ export const useInitialDestinationMeasurement = ({
 	useAnimatedReaction(
 		() => {
 			"worklet";
+
+			if (
+				!destinationEnabled ||
+				!initialDestinationPairKey ||
+				isBlockingLifecycleStart.get() <= 0
+			) {
+				return null;
+			}
+
+			if (progress.get() > 0) {
+				return null;
+			}
+
 			const retryTick = retryToken.get();
-			const isWaitingForOpenToStart = progress.get() <= 0;
-			const sourceScreenKey = initialDestinationPairKey
-				? getSourceScreenKeyFromPairKey(initialDestinationPairKey)
-				: undefined;
+			const sourceScreenKey = getSourceScreenKeyFromPairKey(
+				initialDestinationPairKey,
+			);
 			const signal = getInitialDestinationMeasurementSignal({
-				enabled:
-					destinationEnabled &&
-					isWaitingForOpenToStart &&
-					isBlockingLifecycleStart.get() > 0,
+				enabled: destinationEnabled,
 				destinationPairKey,
 				ancestorDestinationPairKey,
 				linkId: linkKey,
 				group,
 				destinationPresent: getEntry(tag, currentScreenKey) !== null,
-				sourcePresent:
-					sourceScreenKey !== undefined &&
-					getEntry(tag, sourceScreenKey) !== null,
-				linkState: initialDestinationPairKey ? pairs.get() : undefined,
+				sourcePresent: getEntry(tag, sourceScreenKey) !== null,
+				linkState: pairs.get(),
 			});
 
 			return [
@@ -149,8 +158,13 @@ export const useInitialDestinationMeasurement = ({
 				retryTick,
 			] as const;
 		},
-		([measurePairKey, action, retryTick], previous) => {
+		(next, previous) => {
 			"worklet";
+			if (!next) {
+				return;
+			}
+
+			const [measurePairKey, action, retryTick] = next;
 			if (!measurePairKey || !action) {
 				return;
 			}

package/src/shared/components/boundary/hooks/lifecycles/use-refresh-boundary.ts

@@ -3,7 +3,6 @@ import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
-import { GestureStore } from "../../../../stores/gesture.store";
 import type { MeasureBoundary } from "../../types";
 import { getRefreshBoundarySignal } from "../../utils/refresh-signals";
 
@@ -38,25 +37,16 @@ export const useRefreshBoundary = ({
 		"willAnimate",
 	);
 	const refreshClosing = AnimationStore.getValue(refreshScreenKey, "closing");
-	const refreshEntering = AnimationStore.getValue(refreshScreenKey, "entering");
-	const refreshAnimating = AnimationStore.getValue(
-		refreshScreenKey,
-		"progressAnimating",
-	);
-	const refreshProgress = AnimationStore.getValue(
-		refreshScreenKey,
-		"transitionProgress",
-	);
-	const refreshDragging = GestureStore.getValue(refreshScreenKey, "dragging");
-	const refreshDismissing = GestureStore.getValue(
-		refreshScreenKey,
-		"dismissing",
-	);
-	const refreshSettling = GestureStore.getValue(refreshScreenKey, "settling");
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
+
+			const shouldRefresh = enabled && !!refreshWillAnimate.get();
+			if (!shouldRefresh) {
+				return null;
+			}
+
 			return getRefreshBoundarySignal({
 				enabled,
 				currentScreenKey,
@@ -66,15 +56,8 @@ export const useRefreshBoundary = ({
 				nextScreenKey,
 				linkId: linkKey,
 				group,
-				shouldRefresh: !!refreshWillAnimate.get(),
+				shouldRefresh,
 				closing: !!refreshClosing.get(),
-				entering: !!refreshEntering.get(),
-				animating: !!refreshAnimating.get(),
-				progress: refreshProgress.get(),
-				gestureInProgress:
-					!!refreshDragging.get() ||
-					!!refreshDismissing.get() ||
-					!!refreshSettling.get(),
 				linkState: pairs.get(),
 			});
 		},