react-native-screen-transitions 3.2.0-beta.1 → 3.2.0-beta.3

package/src/shared/components/overlay/variations/overlay-host.tsx

@@ -1,131 +1,65 @@
 import {
 	NavigationContext,
 	NavigationRouteContext,
-	type Route,
 } from "@react-navigation/native";
 import { memo, useMemo } from "react";
 import { Animated, StyleSheet, useWindowDimensions, View } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useScreenAnimation } from "../../../hooks/animation/use-screen-animation";
-import { type StackScene, useStack } from "../../../hooks/navigation/use-stack";
-import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
+import { useScreenState } from "../../../hooks/navigation/use-screen-state";
+import type { StackScene } from "../../../hooks/navigation/use-stack";
+import type { BaseDescriptor } from "../../../providers/screen/keys.provider";
 import type { OverlayInterpolationProps } from "../../../types/animation.types";
 import type { OverlayProps } from "../../../types/overlay.types";
 
 type OverlayHostProps = {
 	scene: StackScene;
-	scenes: StackScene[];
-	routes: Route<string>[];
-	overlayIndex: number;
-	isFloating?: boolean;
 };
 
 export const OverlayHost = memo(function OverlayHost({
 	scene,
-	scenes,
-	routes,
-	overlayIndex,
-	isFloating,
 }: OverlayHostProps) {
 	const OverlayComponent = scene.descriptor.options.overlay;
 	const screen = useWindowDimensions();
-
-	const { stackProgress, optimisticFocusedIndex, routeKeys } = useStack();
 	const insets = useSafeAreaInsets();
 
+	const screenAnimation = useScreenAnimation();
+	const screenState = useScreenState();
 	const relativeProgress = useDerivedValue(() => {
 		"worklet";
-		return stackProgress.value - overlayIndex;
+		return screenAnimation.value.stackProgress;
 	});
 
-	// For float overlays: global focused index (can be any screen in the stack)
-	// For screen overlays: relative to overlay position (only screens at or after)
-	const optimisticActiveIndex = useSharedValueState(
-		useDerivedValue(() => {
-			"worklet";
-			if (isFloating) {
-				// For float overlays, use global optimistic focused index directly
-				const globalIndex = optimisticFocusedIndex.get();
-				const clampedIndex = Math.max(
-					0,
-					Math.min(globalIndex, routeKeys.length - 1),
-				);
-				return clampedIndex;
-			}
-
-			// For screen overlays, compute relative to overlay position
-			const screensAbove = routeKeys.length - 1 - overlayIndex;
-			const relativeOptimistic = optimisticFocusedIndex.value - overlayIndex;
-			const result = Math.max(0, Math.min(relativeOptimistic, screensAbove));
-
-			return result;
-		}),
-	);
-
 	const overlayAnimation = useDerivedValue<OverlayInterpolationProps>(() => ({
 		progress: relativeProgress.value,
 		layouts: { screen },
 		insets,
 	}));
 
-	const focusedScene = useMemo(() => {
-		if (overlayIndex === -1) {
-			return scene;
-		}
-
-		if (isFloating) {
-			// For float overlays, optimisticActiveIndex is the global focused index
-			return scenes[optimisticActiveIndex] ?? scene;
-		}
-
-		// For screen overlays, optimisticActiveIndex is relative to overlayIndex
-		const maxOffset = Math.max(scenes.length - overlayIndex - 1, 0);
-		const normalizedIndex = Math.min(
-			Math.max(optimisticActiveIndex, 0),
-			maxOffset,
-		);
-
-		return scenes[overlayIndex + normalizedIndex] ?? scene;
-	}, [overlayIndex, optimisticActiveIndex, scenes, scene, isFloating]);
-
-	const screenAnimation = useScreenAnimation();
+	const overlayProps: OverlayProps<BaseDescriptor["navigation"]> = useMemo(
+		() => ({
+			...screenState,
+			progress: relativeProgress,
+			overlayAnimation, //Deprecated
+			screenAnimation, //Deprecated
+		}),
+		[relativeProgress, overlayAnimation, screenAnimation, screenState],
+	);
 
 	if (!OverlayComponent) {
 		return null;
 	}
 
-	const overlayProps: OverlayProps<typeof scene.descriptor.navigation> = {
-		routes,
-		overlayAnimation,
-		screenAnimation,
-		focusedRoute: focusedScene.route,
-		focusedIndex: optimisticActiveIndex,
-		meta: focusedScene.descriptor.options.meta,
-		navigation: scene.descriptor.navigation,
-	};
-
-	// Cast to OverlayProps function - container overlays are handled by ContainerOverlay component
-	const renderOverlay = OverlayComponent as (
-		props: OverlayProps,
-	) => React.ReactNode;
-
 	return (
 		<Animated.View
 			pointerEvents="box-none"
-			style={[
-				styles.container,
-				isFloating ? styles.floating : { zIndex: 1 },
-				styles.absolute,
-			]}
+			style={[styles.container, styles.floating, styles.absolute]}
 		>
-			<NavigationContext.Provider
-				// biome-ignore lint/suspicious/noExplicitAny: navigation type varies by stack
-				value={scene.descriptor.navigation as any}
-			>
+			<NavigationContext.Provider value={scene.descriptor.navigation as any}>
 				<NavigationRouteContext.Provider value={scene.route}>
 					<View pointerEvents="box-none" style={styles.overlay}>
-						{renderOverlay(overlayProps)}
+						<OverlayComponent {...overlayProps} />
 					</View>
 				</NavigationRouteContext.Provider>
 			</NavigationContext.Provider>

package/src/shared/components/overlay/variations/screen-overlay.tsx

@@ -10,10 +10,14 @@ import { OverlayHost } from "./overlay-host";
 /**
  * Screen overlay component that renders per-screen.
  * Gets current descriptor from keys context.
+ *
+ * @deprecated Screen overlays are deprecated. For per-screen overlays, render an
+ * absolute-positioned view directly in your screen component and use `useScreenAnimation()`
+ * to access animation values. This component will be removed in a future version.
  */
 export function ScreenOverlay() {
 	const { current } = useKeys<StackDescriptor>();
-	const { routeKeys, flags } = useStack();
+	const { flags } = useStack();
 
 	const options = current.options;
 
@@ -25,12 +29,6 @@ export function ScreenOverlay() {
 		[current],
 	);
 
-	// Find the index of this screen in the stack
-	const overlayIndex = useMemo(
-		() => routeKeys.indexOf(current.route.key),
-		[routeKeys, current.route.key],
-	);
-
 	// Skip screens without enableTransitions (native-stack only)
 	if (!flags.TRANSITIONS_ALWAYS_ON && !options.enableTransitions) {
 		return null;
@@ -40,12 +38,5 @@ export function ScreenOverlay() {
 		return null;
 	}
 
-	return (
-		<OverlayHost
-			scene={scene}
-			scenes={[scene]}
-			routes={[]}
-			overlayIndex={overlayIndex}
-		/>
-	);
+	return <OverlayHost scene={scene} />;
 }

package/src/shared/components/root-transition-aware.tsx

@@ -2,6 +2,7 @@ import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { NO_STYLES } from "../constants";
+import { useStackPointerEvents } from "../hooks/use-stack-pointer-events";
 import { useScreenStyles } from "../providers/screen/styles.provider";
 
 type Props = {
@@ -10,6 +11,7 @@ type Props = {
 
 export const RootTransitionAware = memo(({ children }: Props) => {
 	const { stylesMap } = useScreenStyles();
+	const pointerEvents = useStackPointerEvents();
 
 	const animatedContentStyle = useAnimatedStyle(() => {
 		"worklet";
@@ -22,12 +24,15 @@ export const RootTransitionAware = memo(({ children }: Props) => {
 	});
 
 	return (
-		<View style={styles.container}>
+		<View style={[styles.container]} pointerEvents={pointerEvents}>
 			<Animated.View
 				style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
 				pointerEvents="none"
 			/>
-			<Animated.View style={[styles.content, animatedContentStyle]}>
+			<Animated.View
+				style={[styles.content, animatedContentStyle]}
+				pointerEvents={pointerEvents}
+			>
 				{children}
 			</Animated.View>
 		</View>

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

@@ -0,0 +1,168 @@
+import { useLayoutEffect } from "react";
+import {
+	runOnJS,
+	useAnimatedReaction,
+	useDerivedValue,
+} from "react-native-reanimated";
+import { useHighRefreshRate } from "../hooks/animation/use-high-refresh-rate";
+import { useSharedValueState } from "../hooks/reanimated/use-shared-value-state";
+import useStableCallback from "../hooks/use-stable-callback";
+import { useGestureContext } from "../providers/gestures.provider";
+import {
+	type BaseDescriptor,
+	useKeys,
+} from "../providers/screen/keys.provider";
+import { useStackCoreContext } from "../providers/stack/core.provider";
+import { useManagedStackContext } from "../providers/stack/managed.provider";
+import { AnimationStore } from "../stores/animation.store";
+import { StackType } from "../types/stack.types";
+import { startScreenTransition } from "../utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../utils/reset-stores-for-screen";
+
+interface Props {
+	children: React.ReactNode;
+}
+
+interface CloseHookParams {
+	current: BaseDescriptor;
+	animations: ReturnType<typeof AnimationStore.getAll>;
+	activate: () => void;
+	deactivate: () => void;
+}
+
+/**
+ * Managed close - reacts to closingRouteKeysShared from ManagedStackContext.
+ * Used by blank-stack and component-stack.
+ */
+const useManagedClose = ({
+	current,
+	animations,
+	activate,
+	deactivate,
+}: CloseHookParams) => {
+	const { handleCloseRoute, closingRouteKeysShared } = useManagedStackContext();
+
+	const handleCloseEnd = useStableCallback((finished: boolean) => {
+		if (!finished) return;
+		handleCloseRoute({ route: current.route });
+		requestAnimationFrame(() => {
+			deactivate();
+			resetStoresForScreen(current);
+		});
+	});
+
+	useAnimatedReaction(
+		() => closingRouteKeysShared.value,
+		(keys) => {
+			if (!keys?.includes(current.route.key)) return;
+
+			runOnJS(activate)();
+			startScreenTransition({
+				target: "close",
+				spec: current.options.transitionSpec,
+				animations,
+				onAnimationFinish: handleCloseEnd,
+			});
+		},
+	);
+};
+
+/**
+ * Native stack close - listens to beforeRemove navigation event.
+ */
+const useNativeStackClose = ({
+	current,
+	animations,
+	activate,
+	deactivate,
+}: CloseHookParams) => {
+	const gestureCtx = useGestureContext();
+
+	const isAncestorDismissingViaGesture = useSharedValueState(
+		useDerivedValue(() => {
+			"worklet";
+			return (
+				gestureCtx?.ancestorContext?.gestureAnimationValues.isDismissing
+					?.value ?? false
+			);
+		}),
+	);
+
+	const handleBeforeRemove = useStableCallback((e: any) => {
+		const options = current.options as { enableTransitions?: boolean };
+		const isEnabled = options.enableTransitions;
+		const navigation = current.navigation;
+		const isFirstScreen = navigation.getState().index === 0;
+
+		// If transitions are disabled, ancestor is dismissing, or first screen - let native handle it
+		if (!isEnabled || isAncestorDismissingViaGesture || isFirstScreen) {
+			animations.closing.set(1);
+			resetStoresForScreen(current);
+			return;
+		}
+
+		e.preventDefault();
+		activate();
+
+		startScreenTransition({
+			target: "close",
+			spec: current.options.transitionSpec,
+			animations,
+			onAnimationFinish: (finished: boolean) => {
+				deactivate();
+				if (finished) {
+					navigation.dispatch(e.data.action);
+					requestAnimationFrame(() => {
+						resetStoresForScreen(current);
+					});
+				}
+			},
+		});
+	});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Only re-subscribe when navigation changes
+	useLayoutEffect(() => {
+		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
+	}, [current.navigation]);
+};
+
+/**
+ * Unified lifecycle controller for all stack types.
+ */
+export const ScreenLifecycle = ({ children }: Props) => {
+	const { flags } = useStackCoreContext();
+	const { current } = useKeys();
+	const animations = AnimationStore.getAll(current.route.key);
+	const { activateHighRefreshRate, deactivateHighRefreshRate } =
+		useHighRefreshRate(current);
+
+	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
+	useLayoutEffect(() => {
+		activateHighRefreshRate();
+		startScreenTransition({
+			target: "open",
+			spec: current.options.transitionSpec,
+			animations,
+			onAnimationFinish: deactivateHighRefreshRate,
+		});
+	}, []);
+
+	const closeParams: CloseHookParams = {
+		current,
+		animations,
+		activate: activateHighRefreshRate,
+		deactivate: deactivateHighRefreshRate,
+	};
+
+	if (isNativeStack) {
+		// biome-ignore lint/correctness/useHookAtTopLevel: STACK_TYPE is stable per screen instance
+		useNativeStackClose(closeParams);
+	} else {
+		// biome-ignore lint/correctness/useHookAtTopLevel: STACK_TYPE is stable per screen instance
+		useManagedClose(closeParams);
+	}
+
+	return children;
+};

package/src/shared/constants.ts

@@ -71,8 +71,10 @@ export const FULLSCREEN_DIMENSIONS = (
  */
 export const GESTURE_VELOCITY_IMPACT = 0.3;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
-export const DEFAULT_GESTURE_ENABLED = false;
 export const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
 
 export const IS_WEB = Platform.OS === "web";
+
+export const TRUE = 1;
+export const FALSE = 0;

package/src/shared/hooks/animation/use-screen-animation.tsx

@@ -6,7 +6,6 @@ import type { NativeStackScreenTransitionConfig } from "../../../native-stack/ty
 import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../constants";
 import {
 	type BaseDescriptor,
-	type BaseRoute,
 	useKeys,
 } from "../../providers/screen/keys.provider";
 import { AnimationStore } from "../../stores/animation.store";
@@ -16,6 +15,7 @@ import type {
 	ScreenTransitionState,
 } from "../../types/animation.types";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
+import type { BaseStackRoute } from "../../types/stack.types";
 import { derivations } from "../../utils/animation/derivations";
 import { createBounds } from "../../utils/bounds";
 import { useStack } from "../navigation/use-stack";
@@ -25,13 +25,13 @@ type BuiltState = {
 	closing: SharedValue<number>;
 	animating: SharedValue<number>;
 	gesture: GestureStoreMap;
-	route: BaseRoute;
+	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
 	unwrapped: ScreenTransitionState;
 };
 
 const createScreenTransitionState = (
-	route: BaseRoute,
+	route: BaseStackRoute,
 	meta?: Record<string, unknown>,
 ): ScreenTransitionState => ({
 	progress: 0,

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -15,7 +15,6 @@ import {
 	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
 	DEFAULT_GESTURE_DRIVES_PROGRESS,
-	DEFAULT_GESTURE_ENABLED,
 	GESTURE_VELOCITY_IMPACT,
 } from "../../constants";
 import type {
@@ -35,7 +34,6 @@ import { determineDismissal } from "../../utils/gesture/determine-dismissal";
 import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
 import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
 import { velocity } from "../../utils/gesture/velocity";
-import { useStack } from "../navigation/use-stack";
 import useStableCallbackValue from "../use-stable-callback-value";
 
 interface BuildGesturesHookProps {

package/src/shared/hooks/navigation/use-screen-state.tsx

@@ -0,0 +1,99 @@
+import type { Route } from "@react-navigation/native";
+import { useMemo } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+import {
+	type BaseDescriptor,
+	useKeys,
+} from "../../providers/screen/keys.provider";
+import type { ScreenTransitionConfig } from "../../types/screen.types";
+import type { BaseStackNavigation } from "../../types/stack.types";
+import { useSharedValueState } from "../reanimated/use-shared-value-state";
+import { type StackContextValue, useStack } from "./use-stack";
+
+export interface ScreenState<
+	TNavigation extends BaseStackNavigation = BaseStackNavigation,
+> {
+	/**
+	 * The index of this screen in the stack.
+	 */
+	index: number;
+
+	/**
+	 * Screen options for the currently focused screen.
+	 */
+	options: ScreenTransitionConfig;
+
+	/**
+	 * All routes currently in the stack.
+	 */
+	routes: Route<string>[];
+
+	/**
+	 * Route of the currently focused screen in the stack.
+	 */
+	focusedRoute: Route<string>;
+
+	/**
+	 * Index of the focused route in the stack.
+	 */
+	focusedIndex: number;
+
+	/**
+	 * Custom metadata from the focused screen's options.
+	 */
+	meta?: Record<string, unknown>;
+
+	/**
+	 * Navigation object for this screen.
+	 */
+	navigation: TNavigation;
+}
+
+/**
+ * Hook to access screen state information.
+ *
+ * Use this hook to get navigation state and screen information.
+ */
+export function useScreenState<
+	TNavigation extends BaseStackNavigation = BaseStackNavigation,
+>(): ScreenState<TNavigation> {
+	const { routes, scenes, routeKeys, optimisticFocusedIndex } =
+		useStack<StackContextValue>();
+	const { current } = useKeys<BaseDescriptor>();
+
+	const index = useMemo(
+		() => routeKeys.indexOf(current.route.key),
+		[routeKeys, current.route.key],
+	);
+
+	const focusedIndex = useSharedValueState(
+		useDerivedValue(() => {
+			const globalIndex = optimisticFocusedIndex.get();
+			return Math.max(0, Math.min(globalIndex, routeKeys.length - 1));
+		}),
+	);
+
+	const focusedScene = useMemo(() => {
+		return scenes[focusedIndex] ?? scenes[scenes.length - 1];
+	}, [scenes, focusedIndex]);
+
+	return useMemo(
+		() => ({
+			index,
+			options: focusedScene?.descriptor?.options ?? {},
+			routes,
+			focusedRoute: focusedScene?.route ?? current.route,
+			focusedIndex,
+			meta: focusedScene?.descriptor?.options?.meta,
+			navigation: current.navigation as TNavigation,
+		}),
+		[
+			index,
+			focusedScene,
+			routes,
+			focusedIndex,
+			current.navigation,
+			current.route,
+		],
+	);
+}

package/src/shared/hooks/use-stable-callback-value.ts

@@ -10,7 +10,6 @@ import {
 	runOnJS,
 } from "react-native-reanimated";
 
-// biome-ignore lint/suspicious/noExplicitAny: <Does not matter>
 type AnyFunction = (...args: Array<any>) => any;
 
 function useMutableValue<T>(initialValue: T) {

package/src/shared/hooks/use-stack-pointer-events.ts

@@ -0,0 +1,15 @@
+import { useStackCoreContext } from "../providers/stack/core.provider";
+import { StackType } from "../types/stack.types";
+
+/**
+ * Hook that returns the appropriate pointer events value based on current stack type.
+ *
+ * - Component stack: "box-none" (allows touch pass-through to content behind)
+ * - Other stacks: undefined (default behavior, view receives touches)
+ *
+ * Must be used within a StackCoreProvider.
+ */
+export function useStackPointerEvents(): "box-none" | undefined {
+	const { flags } = useStackCoreContext();
+	return flags.STACK_TYPE === StackType.COMPONENT ? "box-none" : undefined;
+}

package/src/shared/index.ts

@@ -20,6 +20,10 @@ export default {
 
 export { useScreenAnimation } from "./hooks/animation/use-screen-animation";
 export { useScreenGesture } from "./hooks/gestures/use-screen-gesture";
+export {
+	type ScreenState,
+	useScreenState,
+} from "./hooks/navigation/use-screen-state";
 
 export type {
 	AnimationConfig,

package/src/shared/providers/gestures.provider.tsx

@@ -6,6 +6,7 @@ import {
 import type { SharedValue } from "react-native-reanimated";
 import { useSharedValue } from "react-native-reanimated";
 import { useBuildGestures } from "../hooks/gestures/use-build-gestures";
+import { useStackPointerEvents } from "../hooks/use-stack-pointer-events";
 import type { GestureStoreMap } from "../stores/gesture.store";
 import createProvider from "../utils/create-provider";
 import { useKeys } from "./screen/keys.provider";
@@ -41,6 +42,7 @@ export const {
 	GestureContextType
 >(({ children }) => {
 	const { current } = useKeys();
+	const pointerEvents = useStackPointerEvents();
 	const ancestorContext = useGestureContext();
 	const scrollConfig = useSharedValue<ScrollConfig | null>(null);
 
@@ -66,7 +68,9 @@ export const {
 		value,
 		children: (
 			<GestureDetector gesture={panGesture}>
-				<View style={styles.container}>{children}</View>
+				<View style={styles.container} pointerEvents={pointerEvents}>
+					{children}
+				</View>
 			</GestureDetector>
 		),
 	};

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

@@ -6,15 +6,7 @@ import type {
 } from "@react-navigation/native";
 import { createContext, useContext, useMemo } from "react";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-} from "../../types/stack.types";
-
-// Re-export for backward compatibility
-export type { BaseStackNavigation as BaseNavigation };
-export type { BaseStackRoute as BaseRoute };
+import type { BaseStackDescriptor } from "../../types/stack.types";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.

package/src/shared/providers/screen/screen-composer.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
-import type { ComponentType } from "react";
 import { RootTransitionAware } from "../../components/root-transition-aware";
+import { ScreenLifecycle } from "../../components/screen-lifecycle";
 import { ScreenGestureProvider } from "../gestures.provider";
 import { type BaseDescriptor, KeysProvider } from "./keys.provider";
 import { ScreenStylesProvider } from "./styles.provider";
@@ -10,7 +10,6 @@ type Props<TDescriptor extends BaseDescriptor> = {
 	current: TDescriptor;
 	next?: TDescriptor;
 	children: React.ReactNode;
-	LifecycleController: ComponentType<any>;
 };
 
 export function ScreenComposer<TDescriptor extends BaseDescriptor>({
@@ -18,7 +17,6 @@ export function ScreenComposer<TDescriptor extends BaseDescriptor>({
 	current,
 	next,
 	children,
-	LifecycleController,
 }: Props<TDescriptor>) {
 	return (
 		<KeysProvider<TDescriptor>
@@ -27,11 +25,11 @@ export function ScreenComposer<TDescriptor extends BaseDescriptor>({
 			next={next}
 		>
 			<ScreenGestureProvider>
-				<LifecycleController>
+				<ScreenLifecycle>
 					<ScreenStylesProvider>
 						<RootTransitionAware>{children}</RootTransitionAware>
 					</ScreenStylesProvider>
-				</LifecycleController>
+				</ScreenLifecycle>
 			</ScreenGestureProvider>
 		</KeysProvider>
 	);

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

@@ -113,7 +113,7 @@ export function useScreenStyles() {
 	const ctx = useContext(ScreenStylesContext);
 	if (!ctx) {
 		throw new Error(
-			"useTransitionStyles must be used within a TransitionStylesProvider",
+			"useScreenStyles must be used within a ScreenStylesProvider",
 		);
 	}
 	return ctx;