fix folder component

components/Home/HomeView.tsx

@@ -1,33 +1,18 @@
 import Spacing from "@/components/_ShareComponent/Spacing";
-import { MainColor } from "@/constants/color-palet";
-import { globalStyles } from "@/constants/global-styles";
+import { Styles } from "@/constants/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { useNavigation } from "expo-router";
-import { useEffect } from "react";
+import { router } from "expo-router";
 import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import DynamicTruncatedText from "../_ShareComponent/TruncatedText";
 import { stylesHome } from "./homeViewStyle";
 
 export default function HomeView() {
-  const navigation = useNavigation();
-  useEffect(() => {
-    navigation.setOptions({
-      title: "HIPMI",
-      headerLeft: () => (
-        <Ionicons name="search" size={20} color={MainColor.white} />
-      ),
-      headerRight: () => (
-        <Ionicons name="notifications" size={20} color={MainColor.white} />
-      ),
-    });
-  }, [navigation]);
-
   return (
     <>
       <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <View style={globalStyles.mainContainer}>
+        <View style={Styles.homeContainer}>
           <Spacing height={20} />
           <View
             style={{
@@ -54,7 +39,10 @@ export default function HomeView() {
 
           {/* Grid Section */}
           <View style={stylesHome.gridContainer}>
-            <TouchableOpacity style={stylesHome.gridItem}>
+            <TouchableOpacity
+              style={stylesHome.gridItem}
+              onPress={() => router.push("/(application)/event")}
+            >
               <Ionicons name="analytics" size={48} color="white" />
               <Text style={stylesHome.gridLabel}>Event</Text>
             </TouchableOpacity>

components/_ShareComponent/Button/ButtonCustom.tsx

@@ -35,6 +35,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
       style={[styles.button, disabled && styles.disabled]}
       onPress={onPress}
       disabled={disabled}
+      activeOpacity={0.8}
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}

components/_ShareComponent/ViewWrapper.tsx

@@ -1,35 +1,43 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { MainColor } from "@/constants/color-palet";
-import { globalStyles } from "@/constants/global-styles";
+import { Styles } from "@/constants/global-styles";
 import { ImageBackground, ScrollView, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 
 interface ViewWrapperProps {
   children: React.ReactNode;
+  withBackground?: boolean;
 }
 
-const ViewWrapper = ({ children }: ViewWrapperProps) => {
+const ViewWrapper = ({
+  children,
+  withBackground = false,
+}: ViewWrapperProps) => {
+
   const assetBackground = require("../../assets/images/main-background.png");
 
   return (
-    <SafeAreaView
-      edges={[]}
-      style={{
-        flex: 1,
-        // paddingTop: StatusBar.currentHeight,
-      }}
-      
-    >
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }} >
-        <ImageBackground
-          source={require("../../assets/images/main-background.png")}
-          resizeMode="cover"
-          style={globalStyles.imageBackground}
-        >
-          <View style={globalStyles.container}>{children}</View>
-        </ImageBackground>
-      </ScrollView>
-    </SafeAreaView>
+    <SafeAreaProvider>
+      <SafeAreaView
+        edges={[]}
+        style={{
+          flex: 1,
+          // paddingTop: StatusBar.currentHeight,
+        }}
+      >
+        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+          {withBackground ? (
+            <ImageBackground
+              source={assetBackground}
+              resizeMode="cover"
+              style={Styles.imageBackground}
+            >
+              <View style={Styles.containerWithBackground}>{children}</View>
+            </ImageBackground>
+          ) : (
+            <View style={Styles.container}>{children}</View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 };