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}

src/navigation/TabBar.js

@@ -1,13 +1,10 @@
-import React from "react";
-import { View, TouchableOpacity, Text } from "react-native";
 import * as Haptics from "expo-haptics";
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
 
-import { gutters, Palette, Style } from "../styles";
-import useLayoutType from "../hooks/useLayoutType";
-import BorderGradient from "../components/BorderGradient/BorderGradient";
-import { colors } from "react-native-swiper-flatlist/src/themes";
-import { BlurView } from "expo-blur";
 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 = {} }) => {
@@ -32,7 +29,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
           end: { x: 1, y: 0 },
         }}
         style={{
-          height: 65,
+          height: isWeb ? 80 : 65,
         }}
       >
         <View
@@ -50,8 +47,8 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
               options.tabBarLabel !== undefined
                 ? options.tabBarLabel
                 : options.title !== undefined
-                ? options.title
-                : route.name;
+                  ? options.title
+                  : route.name;
 
             const _onPressTabBar = () => {
               if (!isWeb) {
@@ -97,7 +94,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
                   {options?.tabBarIcon({ focused: isFocused })}
                   <Text
                     style={{
-                      fontSize: 10,
+                      fontSize: isWeb ? 14 : 10,
                       color: isFocused ? Palette.white : "#8B8883",
                       fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                       marginTop: 2,