fix custom tabs

deskripsi: - penambahan style untuk tabs
2025-06-30 12:09:52 +08:00
parent c1bee77629
commit 5577ef5d1e
7 changed files with 211 additions and 211 deletions
--- a/app/(application)/coba/index.tsx
+++ b/app/(application)/coba/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
 import {
  View,
@@ -86,7 +85,7 @@ const CustomTabNavigator = () => {
      activeIcon: "notifications",
      label: "Forum",
      component: NotificationScreen,
-      path: "/(application)/(home-tabs)/forum",
+      path: "/forum",
    },
    {
      id: "profile",
@@ -94,7 +93,7 @@ const CustomTabNavigator = () => {
      activeIcon: "person",
      label: "Katalog",
      component: ProfileScreen,
-      path: "/(application)/(home-tabs)/katalog",
+      path: "/profile",
    },
  ];

@@ -102,7 +101,7 @@ const CustomTabNavigator = () => {
  // Function untuk handle tab press
  const handleTabPress = (tabId: string) => {
    setActiveTab(tabId);
-    // setShowHome(false); // Hide home when any tab is pressed
+    setShowHome(false); // Hide home when any tab is pressed
  };
  
  // Determine which component to show
@@ -110,8 +109,9 @@ const CustomTabNavigator = () => {
    if (showHome || activeTab === "home") {
      return HomeScreen;
    }
-    const selectedTab = tabs.find((tab) => tab.id === activeTab);
-    return selectedTab ? selectedTab.component : HomeScreen;
+    // const selectedTab = tabs.find((tab) => tab.id === activeTab);
+    // return selectedTab ? selectedTab.component : HomeScreen;
+    return HomeScreen
  };

  const ActiveComponent = getActiveComponent();
@@ -135,7 +135,7 @@ const CustomTabNavigator = () => {
              label={e.label}
              isActive={activeTab === e.id && !showHome}
              onPress={() => {
-                // handleTabPress(e.id);
+                handleTabPress(e.id);
                router.push(e.path as any);
              }}
            />
--- a/components/_Interface/types.ts
+++ b/components/_Interface/types.ts
@@ -0,0 +1,13 @@
+import { Href } from "expo-router";
+
+export { ITabs };
+
+interface ITabs {
+  id: string;
+  icon: string;
+  activeIcon: string;
+  label: string;
+  path: Href;
+  isActive: boolean;
+  disabled: boolean;
+}
--- a/screens/Authentication/RegisterView.tsx
+++ b/screens/Authentication/RegisterView.tsx
@@ -8,7 +8,6 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { Text, View } from "react-native";

-
 export default function RegisterView() {
  return (
    <>
@@ -44,16 +43,16 @@ export default function RegisterView() {
              )}
            />
            <Spacing />
-            {/* <ButtonCustom
-            title="Home"
-            backgroundColor={MainColor.yellow}
-            textColor={MainColor.black}
-            radius={10}
-            onPress={() => {
-              console.log("Home clicked");
-              router.push("/(application)/home");
-            }}
-          /> */}
+            <ButtonCustom
+              title="Coba"
+              backgroundColor={MainColor.yellow}
+              textColor={MainColor.black}
+              radius={10}
+              onPress={() => {
+                console.log("Home clicked");
+                router.push("/(application)/coba");
+              }}
+            />
          </View>
        </View>
      </ViewWrapper>
--- a/screens/Home/UiHome.tsx
+++ b/screens/Home/UiHome.tsx
@@ -1,136 +1,26 @@
-/* eslint-disable no-unused-expressions */
+// import { ITabs } from "@/components/_Interface/types";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { Ionicons } from "@expo/vector-icons";
-import { Href, router, useNavigation } from "expo-router";
+import { useNavigation } from "expo-router";
 import React, { useEffect } from "react";
-import {
-  Dimensions,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
 import Home_BottomFeatureSection from "./bottomFeatureSection";
 import Home_ImageSection from "./imageSection";
+import TabSection from "./tabSection";
+import { tabsHome } from "./tabsList";
 import Home_FeatureSection from "./topFeatureSection";

-interface Tabs {
-  id: string;
-  icon: string;
-  activeIcon: string;
-  label: string;
-  path: Href;
-  isActive: boolean;
-  disabled: boolean;
-}
-
-const { width } = Dimensions.get("window");
-
 export default function NewHomeView() {
-  const tabs: Tabs[] = [
-    {
-      id: "forum",
-      icon: "chatbubble-ellipses-outline",
-      activeIcon: "chatbubble-ellipses",
-      label: "Forum",
-      path: "/forum",
-      isActive: true,
-      disabled: false,
-    },
-    {
-      id: "marketplace",
-      icon: "cart-outline",
-      activeIcon: "cart",
-      label: "Marketplace",
-      path: "/marketplace",
-      isActive: false,
-      disabled: true,
-    },
-    {
-      id: "maps",
-      icon: "map-outline",
-      activeIcon: "map",
-      label: "Maps",
-      path: "/maps",
-      isActive: true,
-      disabled: false,
-    },
-    {
-      id: "profile",
-      icon: "person-outline",
-      activeIcon: "person",
-      label: "Profile",
-      path: "/profile",
-      isActive: true,
-      disabled: false,
-    },
-  ];
-
-  const CustomTab = ({ icon, label, isActive, onPress, disabled }: any) => (
-    <TouchableOpacity
-      style={[styles.tabItem, isActive && styles.activeTab]}
-      onPress={onPress}
-      activeOpacity={0.7}
-    >
-      <View
-        style={[styles.iconContainer, isActive && styles.activeIconContainer]}
-      >
-        <Ionicons name={icon} size={20} color={isActive ? "#fff" : "#666"} />
-      </View>
-      <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
-        {label}
-      </Text>
-      {isActive && <View style={styles.activeIndicator} />}
-    </TouchableOpacity>
-  );
-
  const navigation = useNavigation();

  useEffect(() => {
-    navigation.setOptions({
-      // headerTitle: "HIPMI",
-      // headerLeft: () => (
-      //   <Ionicons
-      //     name="search"
-      //     size={18}
-      //     color={MainColor.white}
-      //     onPress={() => router.push("/(application)/user-search")}
-      //   />
-      // ),
-      // headerRight: () => (
-      //   <Ionicons
-      //     name="notifications"
-      //     size={18}
-      //     color={MainColor.white}
-      //     onPress={() => router.push("/(application)/notifications")}
-      //   />
-      // ),
-    });
+    navigation.setOptions({});
  }, [navigation]);

+
  return (
    <>
-      <ViewWrapper
-        tabBarComponent={
-          <View style={styles.tabBar}>
-            <View style={styles.tabContainer}>
-              {tabs.map((e) => (
-                <CustomTab
-                  key={e.id}
-                  icon={e.icon}
-                  label={e.label}
-                  isActive={e.isActive}
-                  onPress={() => {
-                    e.disabled ? console.log("disabled") : router.push(e.path);
-                  }}
-                />
-              ))}
-            </View>
-          </View>
-        }
-      >
+      <ViewWrapper tabBarComponent={<TabSection tabs={tabsHome} />}>
+        {/* Content Image */}
        <Home_ImageSection />
        <Spacing height={10} />

@@ -145,74 +35,3 @@ export default function NewHomeView() {
    </>
  );
 }
-
-const styles = StyleSheet.create({
-  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",
-  },
-});
--- a/screens/Home/tabSection.tsx
+++ b/screens/Home/tabSection.tsx
@@ -0,0 +1,56 @@
+import { ITabs } from "@/components/_Interface/types";
+import { Styles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+interface ICustomTab {
+  icon: string;
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+}
+const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
+  <TouchableOpacity
+    style={[Styles.tabItem, isActive && Styles.activeTab]}
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <View
+      style={[Styles.iconContainer, isActive && Styles.activeIconContainer]}
+    >
+      <Ionicons
+        name={icon as any}
+        size={20}
+        color={isActive ? "#fff" : "#666"}
+      />
+    </View>
+    <Text style={[Styles.tabLabel, isActive && Styles.activeTabLabel]}>
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
+
+export default function TabSection({ tabs }: { tabs: ITabs[] }) {
+  return (
+    <>
+      <View style={Styles.tabBar}>
+        <View style={Styles.tabContainer}>
+          {tabs.map((e) => (
+            <CustomTab
+              key={e.id}
+              icon={e.icon}
+              label={e.label}
+              isActive={e.isActive}
+              onPress={() => {
+                // eslint-disable-next-line no-unused-expressions
+                e.disabled ? console.log("disabled") : router.push(e.path);
+              }}
+            />
+          ))}
+        </View>
+      </View>
+    </>
+  );
+}
--- a/screens/Home/tabsList.ts
+++ b/screens/Home/tabsList.ts
@@ -0,0 +1,40 @@
+import { ITabs } from "@/components/_Interface/types";
+
+export  const tabsHome: ITabs[] = [
+  {
+    id: "forum",
+    icon: "chatbubble-ellipses-outline",
+    activeIcon: "chatbubble-ellipses",
+    label: "Forum",
+    path: "/forum",
+    isActive: true,
+    disabled: false,
+  },
+  {
+    id: "marketplace",
+    icon: "cart-outline",
+    activeIcon: "cart",
+    label: "Marketplace",
+    path: "/marketplace",
+    isActive: false,
+    disabled: true,
+  },
+  {
+    id: "maps",
+    icon: "map-outline",
+    activeIcon: "map",
+    label: "Maps",
+    path: "/maps",
+    isActive: true,
+    disabled: false,
+  },
+  {
+    id: "profile",
+    icon: "person-outline",
+    activeIcon: "person",
+    label: "Profile",
+    path: "/profile",
+    isActive: true,
+    disabled: false,
+  },
+];
--- a/styles/global-styles.ts
+++ b/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 =============== //
 });