tab

src/navigation/TabBar.js

@@ -1,36 +1,21 @@
 import * as Haptics from "expo-haptics";
-import React, { useMemo } from "react";
+import React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 
-import { useGlobal } from "reactn";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
 import useLayoutType from "../hooks/useLayoutType";
 import { gutters, Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
-  const { windowWidth, isWeb } = useLayoutType();
-  const [webLayoutMode] = useGlobal("webLayoutMode");
-
-  const containerWidth = useMemo(() => {
-    if (!isWeb) return "90%";
-
-    const containerFraction = webLayoutMode === "playbacks-wide" ? 0.9 : 0.6;
-    const containerMax = webLayoutMode === "playbacks-wide" ? 1440 : 800;
-    const computedContainerWidth = Math.min(
-      windowWidth * containerFraction,
-      containerMax
-    );
-    const barWidth = Math.max(computedContainerWidth * 0.9, 360);
-    return barWidth;
-  }, [isWeb, webLayoutMode, windowWidth]);
+  const { isWeb } = useLayoutType();
 
   return (
     <View
       style={{
         position: "absolute",
         bottom: gutters * 2,
-        width: containerWidth,
+        width: "90%",
         maxWidth: 700,
         alignSelf: "center",
         zIndex: 1,