1import { NavigationContainer, NavigationIndependentTree } from "@react-navigation/native";
2import type { ReactNode } from "react";
3import { Platform } from "react-native";
4
5import { useMobileNavigationTheme } from "../../lib/useMobileNavigationTheme";
6import { useUniwindTheme } from "../../lib/useUniwindTheme";
7import { createV5StackNavigator } from "../../native/createV5StackNavigator";
8import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
9import type { AppScreenOptions } from "../../native/glass-header-options";
10import { pageRoute } from "./route-options";
11
12/**
13 * Screen options for a stack nested in a sheet, so its pages push inside the sheet with the
14 * same bar as a sheet route. Android hides the native header: pages draw AppBar in-tree.
15 */
16export function useSheetStackOptions(): AppScreenOptions {
17 const theme = useUniwindTheme();
18 const background = theme["--color-sheet-solid"];
19 return {
20 ...pageRoute({ itemStyle: "standard" }),
21 animation: Platform.OS === "android" ? "default" : "slide_from_right",
22 contentStyle: { backgroundColor: background },
23 gestureEnabled: true,
24 headerShown: Platform.OS !== "android",
25 headerStyle: { backgroundColor: NATIVE_LIQUID_GLASS_SUPPORTED ? "transparent" : background },
26 headerTintColor: theme["--color-foreground"],
27 };
28}
29
30const Standalone = createV5StackNavigator<{ Standalone: undefined }>();
31
32/**
33 * One native stack screen outside the app's navigation tree, for content that needs a native bar
34 * but is not a route: a popover, or a column the workspace hosts. Its bar is set from inside with
35 * AppBar or SheetHeader like any screen.
36 */
37export function StandaloneStack(props: {
38 readonly surface?: "screen" | "sidebar";
39 readonly options?: AppScreenOptions;
40 readonly children: ReactNode;
41}) {
42 const navigationTheme = useMobileNavigationTheme(props.surface);
43 return (
44 <NavigationIndependentTree>
45 <NavigationContainer theme={navigationTheme}>
46 <Standalone.Navigator
47 screenOptions={{
48 ...pageRoute({ itemStyle: "standard" }),
49 contentStyle: { backgroundColor: "transparent" },
50 headerShown: Platform.OS !== "android",
51 ...props.options,
52 }}
53 >
54 <Standalone.Screen name="Standalone">{() => props.children}</Standalone.Screen>
55 </Standalone.Navigator>
56 </NavigationContainer>
57 </NavigationIndependentTree>
58 );
59}