refactor to tamagui

apps/expo/src/app/_layout.tsx

@@ -1,26 +1,28 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useEffect } from "react";
-import { useColorScheme } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+// @ts-expect-error - No exported types
+import { ModalView } from "react-native-ios-modal";
 import { useFonts } from "expo-font";
 import { SplashScreen, Stack } from "expo-router";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
-import {
-  DarkTheme,
-  DefaultTheme,
-  ThemeProvider,
-} from "@react-navigation/native";
+import { DarkTheme, ThemeProvider } from "@react-navigation/native";
+import { setupNativeSheet } from "@tamagui/sheet";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { TamaguiProvider, Theme, useTheme } from "tamagui";
+import tamaguiConfig from "tamagui.config";
 
-import "../styles/global.css";
-
-import { defaultTheme } from "@movie-web/tailwind-config/themes";
+import { useThemeStore } from "~/stores/theme";
+// @ts-expect-error - Without named import it causes an infinite loop
+import _styles from "../../tamagui-web.css";
 
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
 } from "expo-router";
 
+setupNativeSheet("ios", ModalView);
+
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
   initialRouteName: "(tabs)",
@@ -68,38 +70,50 @@ export default function RootLayout() {
   );
 }
 
+function ScreenStacks() {
+  const theme = useTheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        autoHideHomeIndicator: true,
+        gestureEnabled: true,
+        animation: "default",
+        animationTypeForReplace: "push",
+        presentation: "card",
+        headerShown: false,
+        contentStyle: {
+          backgroundColor: theme.screenBackground.val,
+        },
+      }}
+    >
+      <Stack.Screen
+        name="(tabs)"
+        options={{
+          headerShown: false,
+          autoHideHomeIndicator: true,
+          gestureEnabled: true,
+          animation: "default",
+          animationTypeForReplace: "push",
+          presentation: "card",
+        }}
+      />
+    </Stack>
+  );
+}
+
 function RootLayoutNav() {
-  const colorScheme = useColorScheme();
+  const themeStore = useThemeStore((s) => s.theme);
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-        <Stack
-          screenOptions={{
-            autoHideHomeIndicator: true,
-            gestureEnabled: true,
-            animation: "default",
-            animationTypeForReplace: "push",
-            presentation: "card",
-            headerShown: false,
-            contentStyle: {
-              backgroundColor: defaultTheme.extend.colors.background.main,
-            },
-          }}
-        >
-          <Stack.Screen
-            name="(tabs)"
-            options={{
-              headerShown: false,
-              autoHideHomeIndicator: true,
-              gestureEnabled: true,
-              animation: "default",
-              animationTypeForReplace: "push",
-              presentation: "card",
-            }}
-          />
-        </Stack>
-      </ThemeProvider>
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="main">
+        <ThemeProvider value={DarkTheme}>
+          <Theme name={themeStore}>
+            <ScreenStacks />
+          </Theme>
+        </ThemeProvider>
+      </TamaguiProvider>
     </QueryClientProvider>
   );
 }