bottom tab

src/navigation/BottomTab.js

@@ -1,34 +1,20 @@
-import React, { useGlobal } from "reactn";
-import { StyleSheet } from "react-native";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Motion } from "@legendapp/motion";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "reactn";
 
-import { responsiveHeight } from "../actions/responsiveSizes.js";
-
-import useLayoutType from "../hooks/useLayoutType.js";
-
-import { Routes } from "./Routes";
 import { Palette } from "../styles";
+import { Routes } from "./Routes";
 
 import { tabs } from "../assets";
 
 import TabBar from "./TabBar";
 
-import HomeStack from "./HomeStack";
-import ChatStack from "./ChatStack";
-import SettingsStack from "./SettingsStack";
-import Library from "../screens/Library/Library.js";
-import Profile from "../screens/Profile/Profile.js";
+import { Platform } from "react-native";
 import HitParade from "../screens/HitParade/HitParade.js";
+import Library from "../screens/Library/Library.js";
 import Playbacks from "../screens/Playbacks.js";
-
-const bottomTabStyles = StyleSheet.create({
-  icon: {
-    width: responsiveHeight(5),
-    height: responsiveHeight(5),
-    resizeMode: "contain",
-  },
-});
+import Profile from "../screens/Profile/Profile.js";
+import HomeStack from "./HomeStack";
 
 const BottomTab = createBottomTabNavigator();
 
@@ -40,10 +26,11 @@ export const BottomTabScreen = () => {
         tintColor: focused ? Palette.white : "#8B8883",
       }}
       style={[
-        bottomTabStyles.icon,
         {
-          width: 24,
-          height: 24,
+          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}