obytes · yjose · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "prebuild": "cross-env EXPO_NO_DOTENV=1 pnpm expo prebuild",
     "android": "cross-env EXPO_NO_DOTENV=1 expo run:android",
     "ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios",
+    "web": "cross-env EXPO_NO_DOTENV=1 expo start --web",
     "xcode": "xed -b ios",
     "doctor": "npx expo-doctor@latest",
     "preinstall": "npx only-allow pnpm",
@@ -61,7 +62,7 @@
     "i18next": "^23.14.0",
     "lodash.memoize": "^4.1.2",
     "moti": "^0.29.0",
-    "nativewind": "4.0.36",
+    "nativewind": "^4.1.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
@@ -118,7 +119,7 @@
     "lint-staged": "^15.2.9",
     "np": "^10.0.7",
     "prettier": "^3.3.3",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.4.4",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/project.d.ts b/project.d.ts
diff --git a/scripts/eas-pre-install b/scripts/eas-pre-install
diff --git a/src/app/+html.tsx b/src/app/+html.tsx
@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/*
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;
diff --git a/src/app/[...messing].tsx b/src/app/[...messing].tsx
@@ -0,0 +1,20 @@
+import { Link, Stack } from 'expo-router';
+
+import { Text, View } from '@/ui';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View className="flex-1 items-center justify-center p-4">
+        <Text className="mb-4 text-2xl font-bold">
+          This screen doesn't exist.
+        </Text>
+
+        <Link href="/" className="mt-4">
+          <Text className="text-blue-500 underline">Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}
diff --git a/src/core/hooks/use-selected-theme.tsx b/src/core/hooks/use-selected-theme.tsx
@@ -22,7 +22,7 @@ export const useSelectedTheme = () => {
       setColorScheme(t);
       _setTheme(t);
     },
-    [setColorScheme, _setTheme]
+    [setColorScheme, _setTheme],
   );
 
   const selectedTheme = (theme ?? 'system') as ColorSchemeType;

diff --git a/tsconfig.json b/tsconfig.json
@@ -20,5 +20,11 @@
     "ios",
     "lint-staged.config.js"
   ],
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ]
 }