mobile: fix landscape tablet mode

apps/mobile/app/components/tabs/index.tsx

@@ -196,6 +196,10 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       },
       isDrawerOpen: () => isDrawerOpen.value,
       openDrawer: (animated = true) => {
+        if (deviceMode === "tablet") {
+          translateX.value = animated ? withTiming(0) : 0;
+          return;
+        }
         translateX.value = animated
           ? withSpring(drawerPosition, {
               mass: 0.5
@@ -379,6 +383,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       ]
     };
   }, []);
+
   return (
     <GestureDetector gesture={gesture}>
       <Animated.View
@@ -391,7 +396,15 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
             width: containerWidth,
             flexDirection: "row"
           },
-          animatedStyles
+          deviceMode === "tablet"
+            ? {
+                transform: [
+                  {
+                    translateX: 0
+                  }
+                ]
+              }
+            : animatedStyles
         ]}
       >
         {children}

apps/mobile/app/navigation/tabs-holder.js

@@ -23,13 +23,14 @@ import {
 } from "@sayem314/react-native-keep-awake";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Platform, StatusBar, View } from "react-native";
+import changeNavigationBarColor from "react-native-navigation-bar-color";
 import {
+  addOrientationListener,
   addSpecificOrientationListener,
   getInitialOrientation,
   getSpecificOrientation,
-  removeSpecificOrientationListener,
-  addOrientationListener,
-  removeOrientationListener
+  removeOrientationListener,
+  removeSpecificOrientationListener
 } from "react-native-orientation";
 import Animated, {
   useAnimatedStyle,
@@ -68,7 +69,6 @@ import {
 import { editorRef, tabBarRef } from "../utils/global-refs";
 import { sleep } from "../utils/time";
 import { NavigationStack } from "./navigation-stack";
-import changeNavigationBarColor from "react-native-navigation-bar-color";
 
 const _TabsHolder = () => {
   const colors = useThemeStore((state) => state.colors);
@@ -199,11 +199,7 @@ const _TabsHolder = () => {
     toggleView
   ]);
 
-  const _onLayout = async (event) => {
-    if (layoutTimer) {
-      clearTimeout(layoutTimer);
-      layoutTimer = null;
-    }
+  const _onLayout = (event) => {
     let size = event?.nativeEvent?.layout;
     if (!size || (size.width === dimensions.width && deviceMode !== null)) {
       DDS.setSize(size, orientation);
@@ -226,11 +222,13 @@ const _TabsHolder = () => {
       : DDS.isSmallTab
       ? "smallTablet"
       : "mobile";
+
     setDeviceMode(nextDeviceMode, size);
   }
 
   function setDeviceMode(current, size) {
     setDeviceModeState(current);
+
     let needsUpdate = current !== deviceMode;
 
     if (fullscreen && current !== "mobile") {
@@ -289,7 +287,7 @@ const _TabsHolder = () => {
           }
           break;
       }
-    }, 1);
+    }, 1000);
   }
 
   const onScroll = (scrollOffset) => {

apps/mobile/app/services/device-detection.js

@@ -47,7 +47,7 @@ export class DeviceDetectionService {
   }
 
   setSize(size, orientation) {
-    windowSize = size;
+    windowSize = size || windowSize;
     this.width = windowSize.width;
     this.height = windowSize.height;
     this.adjustedWidth = this.width * this.pixelDensity;

apps/mobile/app/services/settings.ts

@@ -127,22 +127,22 @@ function onFirstLaunch() {
 }
 
 function checkOrientation() {
-  Orientation.getOrientation((e: Error, orientation: string) => {
-    DDS.checkSmallTab(orientation);
-    useSettingStore.getState().setDimensions({
-      width: DDS.width as number,
-      height: DDS.height as number
-    });
-    useSettingStore
-      .getState()
-      .setDeviceMode(
-        DDS.isLargeTablet()
-          ? "tablet"
-          : DDS.isSmallTab
-          ? "smallTablet"
-          : "mobile"
-      );
-  });
+  //Orientation.getOrientation((e: Error, orientation: string) => {
+  // DDS.checkSmallTab(orientation);
+  // useSettingStore.getState().setDimensions({
+  //   width: DDS.width as number,
+  //   height: DDS.height as number
+  // });
+  // useSettingStore
+  //   .getState()
+  //   .setDeviceMode(
+  //     DDS.isLargeTablet()
+  //       ? "tablet"
+  //       : DDS.isSmallTab
+  //       ? "smallTablet"
+  //       : "mobile"
+  //   );
+  //});
 }
 
 const SettingsService = {