fix custom tabs

deskripsi:
- penambahan style untuk tabs

styles/global-styles.ts

@@ -1,5 +1,7 @@
-import { StyleSheet } from "react-native";
-import { MainColor } from "../constants/color-palet";
+import { Dimensions, StyleSheet } from "react-native";
+import { AccentColor, MainColor } from "../constants/color-palet";
+
+const { width } = Dimensions.get("window");
 
 export const Styles = StyleSheet.create({
   container: {
@@ -17,7 +19,7 @@ export const Styles = StyleSheet.create({
     height: "100%",
     width: "100%",
   },
-  
+
   // AUTHENTICATION
   authContainer: {
     flex: 1,
@@ -37,7 +39,7 @@ export const Styles = StyleSheet.create({
     color: MainColor.yellow,
     fontWeight: "bold",
   },
-  
+
   // TEXT & LABEL
   textLabel: {
     fontSize: 14,
@@ -61,4 +63,75 @@ export const Styles = StyleSheet.create({
     paddingBlock: 10,
     backgroundColor: MainColor.darkblue,
   },
+
+  // =============== TAB =============== //
+  tabBar: {
+    backgroundColor: MainColor.darkblue,
+    borderTopColor: AccentColor.blue,
+    borderTopWidth: 1,
+    // borderTopEndRadius: 10,
+    // borderTopStartRadius: 10,
+    // tintColor: MainColor.yellow
+    // paddingBottom: 20,
+    // paddingTop: 10,
+    // shadowColor: AccentColor.blue,
+    // shadowOffset: {
+    //   width: 0,
+    //   height: -2,
+    // },
+    // shadowOpacity: 0.9,
+    // shadowRadius: 3,
+    // elevation: 5,
+  },
+  tabContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    paddingHorizontal: 0,
+  },
+  tabItem: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    minWidth: width / 5,
+    position: "relative",
+  },
+  activeTab: {
+    transform: [{ scale: 1.05 }],
+  },
+  iconContainer: {
+    padding: 8,
+    borderRadius: 20,
+    // marginBottom: 4,
+  },
+  activeIconContainer: {
+    // backgroundColor: "#007AFF",
+    // shadowColor: "#007AFF",
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 2,
+    // },
+    // shadowOpacity: 0.3,
+    // shadowRadius: 4,
+    // elevation: 4,
+  },
+  tabLabel: {
+    fontSize: 10,
+    color: "#666",
+    fontWeight: "500",
+  },
+  activeTabLabel: {
+    color: MainColor.white,
+    fontWeight: "600",
+  },
+  activeIndicator: {
+    position: "absolute",
+    bottom: -2,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#007AFF",
+  },
+  // =============== TAB =============== //
 });