changes to tablet detection and more

app/(auth)/_layout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Drawer } from "expo-router/drawer";
 import { useSignOut } from "@/hooks/firebase/useSignOut";
 import {
@@ -32,6 +32,9 @@ import {
   userSettingsView,
 } from "@/components/pages/calendar/atoms";
 import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
+import Constants from "expo-constants";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 export default function TabLayout() {
   const { mutateAsync: signOut } = useSignOut();
@@ -44,11 +47,11 @@ export default function TabLayout() {
     <Drawer
       initialRouteName={"index"}
       detachInactiveScreens
-      screenOptions={{
+      screenOptions={({ navigation }) => ({
         headerShown: true,
         headerRight: () =>
-          Constants.isTablet ? (
-            <ViewSwitch />
+          Device.deviceType === DeviceType.TABLET ? (
+            <ViewSwitch navigation={navigation} />
           ) : (
             <></>
           ),
@@ -57,7 +60,7 @@ export default function TabLayout() {
           backgroundColor: "#f9f8f7",
           height: "100%",
         },
-      }}
+      })}
       drawerContent={(props) => {
         return (
           <DrawerContentScrollView {...props} style={{}}>

app/(auth)/calendar/index.tsx

@@ -2,7 +2,17 @@ import React from "react";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
 import { Constants } from "react-native-ui-lib";
 import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
+import { DeviceType } from "expo-device";
+import * as Device from "expo-device";
 
 export default function Screen() {
-  return <>{Constants.isTablet ? <TabletCalendarPage /> : <CalendarPage />}</>;
+  return (
+    <>
+      {Device.deviceType === DeviceType.TABLET ? (
+        <TabletCalendarPage />
+      ) : (
+        <CalendarPage />
+      )}
+    </>
+  );
 }

app/(auth)/todos/index.tsx

@@ -10,11 +10,16 @@ import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
 import { AntDesign } from "@expo/vector-icons";
 import { ScrollView } from "react-native-gesture-handler";
 import { Button, ButtonSize, View, Text, Constants } from "react-native-ui-lib";
+import * as Device from "expo-device";
 
 export default function Screen() {
   return (
     <ToDosContextProvider>
-      {Constants.isTablet ? <TabletChoresPage /> : <ToDosPage />}
+      {Device.deviceType === Device.DeviceType.TABLET ? (
+        <TabletChoresPage />
+      ) : (
+        <ToDosPage />
+      )}
     </ToDosContextProvider>
   );
 }