tab

src/navigation/BottomTab.js

@@ -29,8 +29,8 @@ export const BottomTabScreen = () => {
         {
           width: Platform.OS === "web" ? 30 : 24,
           height: Platform.OS === "web" ? 30 : 24,
-          marginBottom: Platform.OS === "web" ? 13 : 0,
-          marginTop: Platform.OS === "web" ? 13 : 0,
+          // marginBottom: Platform.OS === "web" ? 13 : 0,
+          // marginTop: Platform.OS === "web" ? 13 : 0,
         },
       ]}
       source={icon}

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,