react-native-screen-transitions 3.0.0 → 3.2.0-beta.0

package/src/shared/__tests__/sync-routes-with-removed.test.ts

@@ -0,0 +1,283 @@
+import { beforeEach, describe, expect, it } from "bun:test";
+import { AnimationStore } from "../stores/animation.store";
+import { GestureStore } from "../stores/gesture.store";
+import { syncRoutesWithRemoved } from "../utils/navigation/sync-routes-with-removed";
+
+const createRoute = (key: string) => ({ key });
+
+const createClosingRouteKeys = () => {
+	const keys = new Set<string>();
+	const sharedValue: string[] = [];
+	return {
+		ref: { current: keys } as React.RefObject<Set<string>>,
+		shared: {
+			value: sharedValue,
+			get: () => sharedValue,
+			set: (v: string[]) => {
+				sharedValue.length = 0;
+				sharedValue.push(...v);
+			},
+			addListener: () => () => {},
+			removeListener: () => {},
+			modify: (fn?: (v: string[]) => string[], _forceUpdate?: boolean) => {
+				if (fn) {
+					const result = fn(sharedValue);
+					sharedValue.length = 0;
+					sharedValue.push(...result);
+				}
+			},
+		},
+		add: (key: string) => {
+			keys.add(key);
+		},
+		remove: (key: string) => {
+			keys.delete(key);
+		},
+		clear: () => keys.clear(),
+	};
+};
+
+// Helper to set up a route's animation state
+const setRouteState = (
+	routeKey: string,
+	state: {
+		progress?: number;
+		closing?: number;
+		isDragging?: number;
+		isDismissing?: number;
+	},
+) => {
+	const animations = AnimationStore.getAll(routeKey);
+	const gestures = GestureStore.getRouteGestures(routeKey);
+
+	if (state.progress !== undefined) animations.progress.value = state.progress;
+	if (state.closing !== undefined) animations.closing.value = state.closing;
+	if (state.isDragging !== undefined)
+		gestures.isDragging.value = state.isDragging;
+	if (state.isDismissing !== undefined)
+		gestures.isDismissing.value = state.isDismissing;
+};
+
+// Reset stores before each test
+beforeEach(() => {
+	globalThis.resetMutableRegistry();
+});
+
+describe("syncRoutesWithRemoved", () => {
+	describe("basic routing", () => {
+		it("returns empty routes when nextRoutes is empty", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a")],
+				prevDescriptors: {},
+				nextRoutes: [],
+				nextDescriptors: {},
+				closingRouteKeys,
+			});
+			expect(result.routes).toEqual([]);
+		});
+
+		it("returns nextRoutes unchanged for normal push (A -> B)", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			// Both routes fully visible
+			setRouteState("a", { progress: 1 });
+			setRouteState("b", { progress: 1 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a")],
+				prevDescriptors: { a: {} },
+				nextRoutes: [createRoute("a"), createRoute("b")],
+				nextDescriptors: { a: {}, b: {} },
+				closingRouteKeys,
+			});
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b"]);
+		});
+
+		it("returns nextRoutes unchanged for normal stack (A -> B -> C)", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b", { progress: 1 });
+			setRouteState("c", { progress: 1 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b")],
+				prevDescriptors: { a: {}, b: {} },
+				nextRoutes: [createRoute("a"), createRoute("b"), createRoute("c")],
+				nextDescriptors: { a: {}, b: {}, c: {} },
+				closingRouteKeys,
+			});
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b", "c"]);
+		});
+	});
+
+	describe("mid-dismiss route reordering", () => {
+		it("moves mid-dismiss route to end when pushing while swiping (progress < 0.5)", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b-old", { progress: 0.3 }); // Mid-dismiss
+			setRouteState("b-new", { progress: 0 }); // Just pushed
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b-old")],
+				prevDescriptors: { a: {}, "b-old": {} },
+				nextRoutes: [
+					createRoute("a"),
+					createRoute("b-old"),
+					createRoute("b-new"),
+				],
+				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
+				closingRouteKeys,
+			});
+
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
+		});
+
+		it("marks moved route as closing", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b-old", { progress: 0.3 });
+			setRouteState("b-new", { progress: 0 });
+
+			syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b-old")],
+				prevDescriptors: { a: {}, "b-old": {} },
+				nextRoutes: [
+					createRoute("a"),
+					createRoute("b-old"),
+					createRoute("b-new"),
+				],
+				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
+				closingRouteKeys,
+			});
+
+			expect(closingRouteKeys.ref.current.has("b-old")).toBe(true);
+		});
+
+		it("detects dismissing via isDragging flag", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b-old", { progress: 1, isDragging: 1 }); // Being dragged
+			setRouteState("b-new", { progress: 0 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b-old")],
+				prevDescriptors: { a: {}, "b-old": {} },
+				nextRoutes: [
+					createRoute("a"),
+					createRoute("b-old"),
+					createRoute("b-new"),
+				],
+				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
+				closingRouteKeys,
+			});
+
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
+		});
+
+		it("detects dismissing via isDismissing flag", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b-old", { progress: 1, isDismissing: 1 });
+			setRouteState("b-new", { progress: 0 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b-old")],
+				prevDescriptors: { a: {}, "b-old": {} },
+				nextRoutes: [
+					createRoute("a"),
+					createRoute("b-old"),
+					createRoute("b-new"),
+				],
+				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
+				closingRouteKeys,
+			});
+
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
+		});
+
+		it("detects dismissing via closing flag", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b-old", { progress: 1, closing: 1 });
+			setRouteState("b-new", { progress: 0 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b-old")],
+				prevDescriptors: { a: {}, "b-old": {} },
+				nextRoutes: [
+					createRoute("a"),
+					createRoute("b-old"),
+					createRoute("b-new"),
+				],
+				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
+				closingRouteKeys,
+			});
+
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
+		});
+
+		it("does not move first route even if dismissing", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 0.3 }); // First route, low progress
+			setRouteState("b", { progress: 1 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a")],
+				prevDescriptors: { a: {} },
+				nextRoutes: [createRoute("a"), createRoute("b")],
+				nextDescriptors: { a: {}, b: {} },
+				closingRouteKeys,
+			});
+
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b"]);
+		});
+
+		it("does not move last route even if low progress (newly pushed)", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b", { progress: 1 });
+			setRouteState("c", { progress: 0.1 }); // Last route, low progress (just pushed)
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b")],
+				prevDescriptors: { a: {}, b: {} },
+				nextRoutes: [createRoute("a"), createRoute("b"), createRoute("c")],
+				nextDescriptors: { a: {}, b: {}, c: {} },
+				closingRouteKeys,
+			});
+
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b", "c"]);
+		});
+	});
+
+	describe("normal back navigation", () => {
+		it("keeps closing route at end for normal back (C -> B)", () => {
+			const closingRouteKeys = createClosingRouteKeys();
+
+			setRouteState("a", { progress: 1 });
+			setRouteState("b", { progress: 1 });
+			setRouteState("c", { progress: 1 });
+
+			const result = syncRoutesWithRemoved({
+				prevRoutes: [createRoute("a"), createRoute("b"), createRoute("c")],
+				prevDescriptors: { a: {}, b: {}, c: {} },
+				nextRoutes: [createRoute("a"), createRoute("b")],
+				nextDescriptors: { a: {}, b: {} },
+				closingRouteKeys,
+			});
+
+			// c should be added to end for close animation
+			expect(result.routes.map((r) => r.key)).toEqual(["a", "b", "c"]);
+			expect(closingRouteKeys.ref.current.has("c")).toBe(true);
+		});
+	});
+});

package/src/shared/components/create-transition-aware-component.tsx

@@ -8,8 +8,7 @@ import { useAssociatedStyles } from "../hooks/animation/use-associated-style";
 import { useScrollRegistry } from "../hooks/gestures/use-scroll-registry";
 import { useGestureContext } from "../providers/gestures.provider";
 import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
-import type { TransitionAwareProps } from "../types/core.types";
-import type { Any } from "../types/utils.types";
+import type { TransitionAwareProps } from "../types/screen.types";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
@@ -26,7 +25,7 @@ export function createTransitionAwareComponent<P extends object>(
 	const ScrollableInner = forwardRef<
 		React.ComponentRef<typeof Wrapped>,
 		TransitionAwareProps<P>
-	>((props: Any, ref) => {
+	>((props: any, ref) => {
 		const { nativeGesture } = useGestureContext()!;
 		const { scrollHandler, onContentSizeChange, onLayout } = useScrollRegistry({
 			onScroll: props.onScroll,
@@ -37,7 +36,7 @@ export function createTransitionAwareComponent<P extends object>(
 		return (
 			<GestureDetector gesture={nativeGesture}>
 				<AnimatedComponent
-					{...(props as Any)}
+					{...(props as any)}
 					ref={ref}
 					onScroll={scrollHandler}
 					onContentSizeChange={onContentSizeChange}
@@ -53,7 +52,7 @@ export function createTransitionAwareComponent<P extends object>(
 		TransitionAwareProps<P>
 	>((props, _) => {
 		const { children, style, sharedBoundTag, styleId, onPress, ...rest } =
-			props as Any;
+			props as any;
 
 		const animatedRef = useAnimatedRef<View>();
 
@@ -71,7 +70,7 @@ export function createTransitionAwareComponent<P extends object>(
 			>
 				{({ captureActiveOnPress, handleInitialLayout }) => (
 					<AnimatedComponent
-						{...(rest as Any)}
+						{...(rest as any)}
 						ref={animatedRef}
 						style={[style, associatedStyles]}
 						onPress={captureActiveOnPress}

package/src/shared/components/overlay/helpers/get-active-overlay.ts

@@ -0,0 +1,64 @@
+import type { StackScene } from "../../../hooks/navigation/use-stack";
+
+/**
+ * Find the active float overlay from scenes.
+ * Scans from the top of the stack downward to find the first screen
+ * with overlayMode="float" and overlayShown=true.
+ */
+export function getActiveFloatOverlay(
+	scenes: StackScene[],
+	index: number,
+	transitionsAlwaysOn: boolean,
+): { scene: StackScene; overlayIndex: number } | null {
+	if (scenes.length === 0) {
+		return null;
+	}
+
+	// When navigating back, closing scenes are kept at the top of the local stack
+	// while the focused index already points to the destination screen. We need to
+	// start scanning from the actual top of the stack so the overlay can animate
+	// out together with its closing screen instead of disappearing immediately.
+	const startIndex = Math.max(index, scenes.length - 1);
+
+	for (let i = startIndex; i >= 0; i--) {
+		const scene = scenes[i];
+		const options = scene?.descriptor?.options;
+
+		// Skip screens without enableTransitions (native-stack only)
+		if (!transitionsAlwaysOn && !options?.enableTransitions) {
+			continue;
+		}
+
+		if (options?.overlayMode === "float" && options?.overlayShown) {
+			return { scene, overlayIndex: i };
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Find the active container overlay from scenes.
+ * Scans from the bottom of the stack upward to find the first screen
+ * with overlayMode="container" and overlayShown=true.
+ */
+export function getActiveContainerOverlay(
+	scenes: StackScene[],
+	transitionsAlwaysOn: boolean,
+): { scene: StackScene; overlayIndex: number } | null {
+	for (let i = 0; i < scenes.length; i++) {
+		const scene = scenes[i];
+		const options = scene?.descriptor?.options;
+
+		// Skip screens without enableTransitions (native-stack only)
+		if (!transitionsAlwaysOn && !options?.enableTransitions) {
+			continue;
+		}
+
+		if (options?.overlayMode === "container" && options?.overlayShown) {
+			return { scene, overlayIndex: i };
+		}
+	}
+
+	return null;
+}

package/src/shared/components/overlay/index.ts

@@ -0,0 +1,9 @@
+import { ContainerOverlay } from "./variations/container-overlay";
+import { FloatOverlay } from "./variations/float-overlay";
+import { ScreenOverlay } from "./variations/screen-overlay";
+
+export const Overlay = {
+	Float: FloatOverlay,
+	Screen: ScreenOverlay,
+	Container: ContainerOverlay,
+};

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

@@ -0,0 +1,98 @@
+import { memo, useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import { useDerivedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { useScreenAnimation } from "../../../hooks/animation/use-screen-animation";
+import { type StackScene, useStack } from "../../../hooks/navigation/use-stack";
+import type { OverlayInterpolationProps } from "../../../types/animation.types";
+import type { ContainerOverlayProps } from "../../../types/overlay.types";
+import { getActiveContainerOverlay } from "../helpers/get-active-overlay";
+
+/**
+ * Inner component that renders when container overlay is active.
+ * Separated to ensure hooks are called unconditionally.
+ */
+const ContainerOverlayHost = memo(function ContainerOverlayHost({
+	children,
+	scene,
+	scenes,
+	overlayIndex,
+}: {
+	children: React.ReactNode;
+	scene: StackScene;
+	scenes: StackScene[];
+	overlayIndex: number;
+}) {
+	const { routes, focusedIndex, stackProgress } = useStack();
+	const screen = useWindowDimensions();
+	const insets = useSafeAreaInsets();
+
+	const OverlayComponent = scene.descriptor.options.overlay;
+
+	// Compute relative progress from overlay position
+	const relativeProgress = useDerivedValue(() => {
+		"worklet";
+		return stackProgress.value - overlayIndex;
+	});
+
+	const overlayAnimation = useDerivedValue<OverlayInterpolationProps>(() => ({
+		progress: relativeProgress.value,
+		layouts: { screen },
+		insets,
+	}));
+
+	// Get focused scene for meta and route info
+	const focusedScene = scenes[focusedIndex] ?? scene;
+
+	if (!OverlayComponent) {
+		return <>{children}</>;
+	}
+
+	const overlayProps: ContainerOverlayProps<
+		typeof scene.descriptor.navigation
+	> = {
+		children,
+		routes,
+		overlayAnimation,
+		// screenAnimation is not available at container level, pass a placeholder
+		screenAnimation: overlayAnimation as unknown as ReturnType<
+			typeof useScreenAnimation
+		>,
+		focusedRoute: focusedScene.route,
+		focusedIndex,
+		meta: focusedScene.descriptor.options.meta,
+		navigation: scene.descriptor.navigation,
+	};
+
+	return <OverlayComponent {...overlayProps} />;
+});
+
+/**
+ * Container overlay component that wraps all screen content.
+ * Receives children (the screens) and passes them to the overlay component.
+ */
+export function ContainerOverlay({ children }: { children: React.ReactNode }) {
+	const { scenes, flags } = useStack();
+
+	const activeOverlay = useMemo(
+		() => getActiveContainerOverlay(scenes, flags.TRANSITIONS_ALWAYS_ON),
+		[scenes, flags.TRANSITIONS_ALWAYS_ON],
+	);
+
+	// If no container overlay, just render children directly
+	if (!activeOverlay) {
+		return <>{children}</>;
+	}
+
+	const { scene, overlayIndex } = activeOverlay;
+
+	return (
+		<ContainerOverlayHost
+			scene={scene}
+			scenes={scenes}
+			overlayIndex={overlayIndex}
+		>
+			{children}
+		</ContainerOverlayHost>
+	);
+}

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

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { useStack } from "../../../hooks/navigation/use-stack";
+import { KeysProvider } from "../../../providers/screen/keys.provider";
+import { ScreenStylesProvider } from "../../../providers/screen/styles.provider";
+import { getActiveFloatOverlay } from "../helpers/get-active-overlay";
+import { OverlayHost } from "./overlay-host";
+
+/**
+ * Float overlay component that renders above all screens.
+ * Gets routes and descriptors from stack context.
+ */
+export function FloatOverlay() {
+	const { routes, scenes, focusedIndex, flags } = useStack();
+
+	const activeOverlay = useMemo(
+		() =>
+			getActiveFloatOverlay(scenes, focusedIndex, flags.TRANSITIONS_ALWAYS_ON),
+		[scenes, focusedIndex, flags.TRANSITIONS_ALWAYS_ON],
+	);
+
+	if (!activeOverlay) {
+		return null;
+	}
+
+	const { scene, overlayIndex } = activeOverlay;
+
+	const previous = scenes[overlayIndex - 1]?.descriptor;
+	const current = scene.descriptor;
+	const next = scenes[overlayIndex + 1]?.descriptor;
+
+	return (
+		<KeysProvider current={current} previous={previous} next={next}>
+			<ScreenStylesProvider>
+				<OverlayHost
+					scene={scene}
+					scenes={scenes}
+					routes={routes}
+					overlayIndex={overlayIndex}
+					isFloating
+				/>
+			</ScreenStylesProvider>
+		</KeysProvider>
+	);
+}

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

@@ -0,0 +1,148 @@
+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 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 relativeProgress = useDerivedValue(() => {
+		"worklet";
+		return stackProgress.value - overlayIndex;
+	});
+
+	// 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();
+
+	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,
+			]}
+		>
+			<NavigationContext.Provider
+				// biome-ignore lint/suspicious/noExplicitAny: navigation type varies by stack
+				value={scene.descriptor.navigation as any}
+			>
+				<NavigationRouteContext.Provider value={scene.route}>
+					<View pointerEvents="box-none" style={styles.overlay}>
+						{renderOverlay(overlayProps)}
+					</View>
+				</NavigationRouteContext.Provider>
+			</NavigationContext.Provider>
+		</Animated.View>
+	);
+});
+
+const styles = StyleSheet.create({
+	overlay: {
+		...StyleSheet.absoluteFillObject,
+		zIndex: 1,
+	},
+	container: {
+		flex: 1,
+	},
+	absolute: StyleSheet.absoluteFillObject,
+	floating: {
+		zIndex: 1000,
+	},
+});