update

src/navigation/TabBar.js

@@ -1,9 +1,14 @@
 import React from "react";
-import { View, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity, Text } from "react-native";
 import * as Haptics from "expo-haptics";
 
 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 { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
   const { isDesktop, windowWidth, mediumDesktopBreakpoint, isWeb } =
@@ -14,70 +19,98 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
       style={{
         position: "absolute",
         bottom: gutters * 2,
-        borderRadius: 500,
-        flexDirection: "row",
-        height: 60,
-        width: "60%",
+        width: "90%",
         alignSelf: "center",
-        maxWidth: isDesktop ? 200 : 220,
-        borderColor: Palette.ultraLightWhite,
-        borderWidth: 3,
-        paddingHorizontal: 1.2 * gutters,
-        backgroundColor: Palette.darkPurple,
-        ...Style.containerSpaceBetween,
-        ...Style.defaultShadows,
+        zIndex: 1,
+        justifyContent: "center",
       }}
     >
-      {state?.routes?.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const isFocused = state?.index === index;
+      <ItemContainer
+        height={64}
+        gradientProps={{
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 0 },
+        }}
+        style={{
+          height: 65,
+        }}
+      >
+        <View
+          style={{
+            ...Style.containerSpaceBetween,
+            paddingHorizontal: 4,
+            flex: 1,
+          }}
+        >
+          {state?.routes?.map((route, index) => {
+            const { options } = descriptors[route.key];
+            const isFocused = state?.index === index;
 
-        const _onPressTabBar = () => {
-          if (!isWeb) {
-            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-          }
+            const label =
+              options.tabBarLabel !== undefined
+                ? options.tabBarLabel
+                : options.title !== undefined
+                ? options.title
+                : route.name;
 
-          const event = navigation.emit({
-            type: "tabPress",
-            target: route.key,
-            canPreventDefault: true,
-          });
+            const _onPressTabBar = () => {
+              if (!isWeb) {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+              }
 
-          if (!isFocused && !event.defaultPrevented) {
-            // The `merge: true` option makes sure that the params inside the tab screen are preserved
-            navigation.navigate({ name: route.name, merge: true });
-          }
-        };
+              const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+              });
 
-        const onLongPress = () => {
-          navigation.emit({
-            type: "tabLongPress",
-            target: route.key,
-          });
-        };
+              if (!isFocused && !event.defaultPrevented) {
+                // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                navigation.navigate({ name: route.name, merge: true });
+              }
+            };
 
-        return (
-          !options?.hide && (
-            <TouchableOpacity
-              key={route.key}
-              style={{
-                alignSelf: "center",
-                width: `${100 / state?.routes?.length}%`,
-                height: 40,
-                ...Style.containerCenter,
-              }}
-              accessibilityRole="button"
-              accessibilityState={isFocused ? { selected: true } : {}}
-              accessibilityLabel={options.tabBarAccessibilityLabel}
-              testID={options.tabBarTestID}
-              onPress={_onPressTabBar}
-              onLongPress={onLongPress}
-            >
-              {options?.tabBarIcon({ focused: isFocused })}
-            </TouchableOpacity>
-          )
-        );
-      })}
+            const onLongPress = () => {
+              navigation.emit({
+                type: "tabLongPress",
+                target: route.key,
+              });
+            };
+
+            return (
+              !options?.hide && (
+                <TouchableOpacity
+                  key={route.key}
+                  style={{
+                    alignSelf: "center",
+                    width: `${100 / state?.routes?.length}%`,
+                    height: "100%",
+                    ...Style.containerCenter,
+                  }}
+                  accessibilityRole="button"
+                  accessibilityState={isFocused ? { selected: true } : {}}
+                  accessibilityLabel={options.tabBarAccessibilityLabel}
+                  testID={options.tabBarTestID}
+                  onPress={_onPressTabBar}
+                  onLongPress={onLongPress}
+                >
+                  {options?.tabBarIcon({ focused: isFocused })}
+                  <Text
+                    style={{
+                      fontSize: 10,
+                      color: isFocused ? Palette.white : "#8B8883",
+                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                      marginTop: 2,
+                    }}
+                  >
+                    {label}
+                  </Text>
+                </TouchableOpacity>
+              )
+            );
+          })}
+        </View>
+      </ItemContainer>
     </View>
   );
 };