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>
   );
 }

components/pages/(tablet_pages)/ViewSwitch.tsx

@@ -1,10 +1,20 @@
 import { Text, TouchableOpacity, View } from "react-native-ui-lib";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { StyleSheet } from "react-native";
+import { NavigationProp } from "@react-navigation/native";
+import view from "react-native-ui-lib/src/components/view";
 
-const ViewSwitch = () => {
-  const [view, setView] = useState<boolean>(false);
+interface ViewSwitchProps {
+  navigation: NavigationProp<any>; // Adjust according to your navigation structure
+}
 
+const ViewSwitch: React.FC<ViewSwitchProps> = ({ navigation }) => {
+  const [pageIndex, setPageIndex] = useState<number>(navigation.getState().index);
+
+  useEffect(() => {
+    setPageIndex(navigation.getState().index);
+  }, [navigation.getState().index])
+  
   return (
     <View
       row
@@ -26,7 +36,7 @@ const ViewSwitch = () => {
     >
       <TouchableOpacity
         onPress={() => {
-          setView(true);
+          navigation.navigate("calendar");
         }}
       >
         <View
@@ -34,9 +44,9 @@ const ViewSwitch = () => {
           centerH
           height={54}
           paddingH-15
-          style={view ? styles.switchBtnActive : styles.switchBtn}
+          style={ pageIndex == 1 || pageIndex == 0 ? styles.switchBtnActive : styles.switchBtn}
         >
-          <Text color={view ? "white" : "black"} style={styles.switchTxt}>
+          <Text color={pageIndex == 1 || pageIndex == 0 ? "white" : "black"} style={styles.switchTxt}>
             Calendar
           </Text>
         </View>
@@ -44,7 +54,7 @@ const ViewSwitch = () => {
 
       <TouchableOpacity
         onPress={() => {
-          setView(false);
+          navigation.navigate("todos");
         }}
       >
         <View
@@ -52,9 +62,9 @@ const ViewSwitch = () => {
           centerH
           height={54}
           paddingH-15
-          style={!view ? styles.switchBtnActive : styles.switchBtn}
+          style={pageIndex == 6 ? styles.switchBtnActive : styles.switchBtn}
         >
-          <Text color={!view ? "white" : "black"} style={styles.switchTxt}>
+          <Text color={pageIndex == 6 ? "white" : "black"} style={styles.switchTxt}>
             Chores
           </Text>
         </View>

components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx

@@ -1,56 +1,29 @@
 import { View, Text } from "react-native-ui-lib";
 import React, { useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
-import { Dimensions, StyleSheet } from "react-native";
 import { InnerCalendar } from "../../calendar/InnerCalendar";
-
-const { width, height } = Dimensions.get("window");
+import TabletContainer from "../tablet_components/TabletContainer";
 
 const TabletCalendarPage = () => {
-  // Function to lock the screen orientation to landscape
   const lockScreenOrientation = async () => {
     await ScreenOrientation.lockAsync(
-      ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
+      ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
     );
   };
 
   useEffect(() => {
-    lockScreenOrientation(); // Lock orientation when the component mounts
+    lockScreenOrientation();
 
     return () => {
-      // Optional: Unlock to default when the component unmounts
       ScreenOrientation.unlockAsync();
     };
   }, []);
 
   return (
-    <View style={styles.container}>
-      <View row>
-        <View style={styles.calendarContainer}>
-          <InnerCalendar />
-        </View>
-        <View style={styles.profilesContainer}></View>
-      </View>
-    </View>
+    <TabletContainer>
+      <InnerCalendar />
+    </TabletContainer>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "white",
-    width: "100%",
-    flex: 1,
-  },
-  calendarContainer: {
-    backgroundColor: "white",
-    height: height,
-    width: width * 0.85,
-  },
-  profilesContainer: {
-    width: width * 0.15,
-    backgroundColor: "green",
-    height: height,
-  },
-});
-
 export default TabletCalendarPage;

components/pages/(tablet_pages)/chores/TabletChoresPage.tsx

@@ -5,7 +5,7 @@ import * as ScreenOrientation from 'expo-screen-orientation';
 const TabletChoresPage = () => {
   // Function to lock the screen orientation to landscape
   const lockScreenOrientation = async () => {
-    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
+    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
   };
 
   useEffect(() => {

components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx

@@ -0,0 +1,46 @@
+import { View, Text, ViewProps } from "react-native-ui-lib";
+import React, { ReactNode } from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import UsersList from "./UsersList";
+
+interface TabletContainerProps extends ViewProps {
+  children: ReactNode;
+}
+
+const { width, height } = Dimensions.get("window");
+
+const TabletContainer: React.FC<TabletContainerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <View style={styles.container}>
+      <View row>
+        <View style={styles.calendarContainer}>{children}</View>
+        <View style={styles.profilesContainer}>
+          <UsersList />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "white",
+    width: "100%",
+    flex: 1,
+  },
+  calendarContainer: {
+    backgroundColor: "white",
+    height: height,
+    width: width * 0.85,
+  },
+  profilesContainer: {
+    width: width * 0.15,
+    backgroundColor: "green",
+    height: height,
+  },
+});
+
+export default TabletContainer;

components/pages/(tablet_pages)/tablet_components/UsersList.tsx

@@ -0,0 +1,27 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+
+const UsersList = () => {
+  return (
+    <View centerH gap-20>
+      <View
+        style={{
+          aspectRatio: 1,
+          width: 113,
+          backgroundColor: "red",
+          borderRadius: 100,
+        }}
+      />
+      <View
+        style={{
+          aspectRatio: 1,
+          width: 113,
+          backgroundColor: "red",
+          borderRadius: 100,
+        }}
+      />
+    </View>
+  );
+};
+
+export default UsersList;