tabbar width

src/navigation/BottomTab.js

@@ -1,14 +1,10 @@
 import { Motion } from "@legendapp/motion";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import React from "reactn";
-
 import { Palette } from "../styles";
 import { Routes } from "./Routes";
-
 import { tabs } from "../assets";
-
 import TabBar from "./TabBar";
-
 import { Platform } from "react-native";
 import HitParade from "../screens/HitParade/HitParade.js";
 import Library from "../screens/Library/Library";
@@ -30,8 +26,6 @@ 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,
         },
       ]}
       source={icon}

src/navigation/TabBar.js

@@ -2,7 +2,6 @@ import { Motion } from "@legendapp/motion";
 import * as Haptics from "expo-haptics";
 import React, { useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
-
 import ItemContainer from "../components/ItemContainer/ItemContainer";
 import useLayoutType from "../hooks/useLayoutType";
 import { gutters, Palette, Style } from "../styles";
@@ -18,7 +17,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
         position: "absolute",
         bottom: gutters * 2,
         width: "90%",
-        maxWidth: 700,
+        maxWidth: 500,
         alignSelf: "center",
         zIndex: 1,
         justifyContent: "center",