fix(app): prevent white flashes between workspace routes

Nested native stacks fell back to the navigation library's light background during cross-stack swaps. Share the active app surface color across every stack without subscribing route layouts to all theme runtime changes.
2026-07-12 00:27:40 +02:00
parent d28e174b38
commit 92d7066601
4 changed files with 49 additions and 15 deletions
@@ -0,0 +1,26 @@
+import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
+import { Stack } from "expo-router";
+import { type ReactNode, useMemo } from "react";
+import { withUnistyles } from "react-native-unistyles";
+
+interface ThemedStackBaseProps {
+  backgroundColor: string;
+  children?: ReactNode;
+  screenOptions?: NativeStackNavigationOptions;
+}
+
+function ThemedStackBase({ backgroundColor, children, screenOptions }: ThemedStackBaseProps) {
+  const themedScreenOptions = useMemo<NativeStackNavigationOptions>(
+    () => ({
+      ...screenOptions,
+      contentStyle: [{ backgroundColor }, screenOptions?.contentStyle],
+    }),
+    [backgroundColor, screenOptions],
+  );
+
+  return <Stack screenOptions={themedScreenOptions}>{children}</Stack>;
+}
+
+export const ThemedStack = withUnistyles(ThemedStackBase, (theme) => ({
+  backgroundColor: theme.colors.surface0,
+}));