feature

deksripsi:
- resourcing drawer dan alert

app/(application)/profile/[id].tsx

@@ -1,23 +1,27 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { Styles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import React, { useRef, useState } from "react";
 import {
+  Alert,
+  Animated,
+  PanResponder,
+  StyleSheet,
   Text,
   TouchableOpacity,
   View,
-  Animated,
-  PanResponder,
 } from "react-native";
-import React, { useRef, useState } from "react";
 
+const DRAWER_HEIGHT = 300; // tinggi drawer
 export default function Profile() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
 
   // Animasi menggunakan translateY (lebih kompatibel)
-  const drawerAnim = useRef(new Animated.Value(200)).current; // mulai di luar bawah layar
+  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -30,22 +34,31 @@ export default function Profile() {
 
   const closeDrawer = () => {
     Animated.timing(drawerAnim, {
-      toValue: 200,
+      toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
       duration: 300,
       useNativeDriver: true,
-    }).start(() => setIsDrawerOpen(false));
+    }).start(() => {
+      setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
+    });
   };
 
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (_, gestureState) => {
-        return gestureState.dy < -10; // gesek ke atas untuk tutup
+        return gestureState.dy > 10; // gesek ke bawah
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const offset = gestureState.dy;
+        if (offset >= 0 && offset <= DRAWER_HEIGHT) {
+          drawerAnim.setValue(offset); // batasi hingga max 500
+        }
       },
       onPanResponderRelease: (_, gestureState) => {
-        if (gestureState.dy < -50) {
+        if (gestureState.dy > 200) {
-          closeDrawer(); // tutup jika gesek cukup tinggi
+          // Tutup drawer sepenuhnya jika gesek lebih dari 200
+          closeDrawer();
         } else {
-          // kembali ke posisi awal
+          // Reset ke posisi awal jika gesek kurang
           Animated.spring(drawerAnim, {
             toValue: 0,
             useNativeDriver: true,
@@ -57,7 +70,7 @@ export default function Profile() {
 
   return (
     <>
-      <ViewWrapper >
+      <ViewWrapper>
         <Stack.Screen
           options={{
             title: "Profile",
@@ -83,40 +96,37 @@ export default function Profile() {
         <Text style={Styles.textLabel}>Profile {id}</Text>
       </ViewWrapper>
 
+      {/* Overlay Gelap */}
+      {isDrawerOpen && (
+        <View
+          style={[
+            stylesDrawer.overlay,
+            { opacity: isDrawerOpen ? 0.6 : 0 }, // tampilkan overlay hanya saat drawer terbuka
+          ]}
+          pointerEvents={isDrawerOpen ? "auto" : "none"}
+        >
+          <TouchableOpacity onPress={closeDrawer} />
+        </View>
+      )}
+
       {/* Custom Bottom Drawer */}
       {isDrawerOpen && (
         <Animated.View
-          style={{
+          style={[
-            position: "absolute",
+            stylesDrawer.drawer,
-            left: 0,
+            { transform: [{ translateY: drawerAnim }] },
-            right: 0,
+          ]}
-            bottom: 0,
-            height: 200,
-            backgroundColor: "white",
-            borderTopLeftRadius: 20,
-            borderTopRightRadius: 20,
-            padding: 20,
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: -2 },
-            shadowOpacity: 0.2,
-            elevation: 5,
-            transform: [{ translateY: drawerAnim }],
-          }}
           {...panResponder.panHandlers}
         >
           <View
-            style={{
+            style={[
-              width: 40,
+              stylesDrawer.headerBar,
-              height: 5,
+              { backgroundColor: MainColor.white },
-              backgroundColor: "#ccc",
+            ]}
-              borderRadius: 5,
-              alignSelf: "center",
-              marginVertical: 10,
-            }}
           />
 
           <TouchableOpacity
-            style={{ padding: 15 }}
+            style={stylesDrawer.menuItem}
             onPress={() => {
               alert("Pilihan 1 diklik");
               closeDrawer();
@@ -126,7 +136,7 @@ export default function Profile() {
           </TouchableOpacity>
 
           <TouchableOpacity
-            style={{ padding: 15 }}
+            style={stylesDrawer.menuItem}
             onPress={() => {
               alert("Pilihan 2 diklik");
               closeDrawer();
@@ -135,11 +145,163 @@ export default function Profile() {
             <Text>Menu Item 2</Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={{ padding: 15 }} onPress={closeDrawer}>
+          <TouchableOpacity
-            <Text style={{ color: "red" }}>Tutup</Text>
+            style={stylesDrawer.menuItem}
+            onPress={() => setShowLogoutAlert(true)}
+          >
+            <Text style={{ color: "red" }}>Logout Custom</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={stylesDrawer.menuItem}
+            onPress={() =>
+              Alert.alert(
+                "Konfirmasi Logout",
+                "Apakah Anda sudah yakin?",
+                [
+                  {
+                    text: "Batal",
+                    onPress: () => console.log("Batal logout"),
+                    style: "cancel",
+                  },
+                  {
+                    text: "Ya",
+                    onPress: () => {
+                      console.log("Logout dipilih");
+                      // Di sini Anda bisa tambahkan fungsi logout seperti clear token, redirect, dll
+                      closeDrawer();
+                    },
+                  },
+                ],
+                { cancelable: true }
+              )
+            }
+          >
+            <Text style={{ color: "red" }}>Keluar</Text>
           </TouchableOpacity>
         </Animated.View>
       )}
+
+      {showLogoutAlert && (
+        <View style={styles.alertOverlay}>
+          <View style={styles.alertBox}>
+            <Text style={styles.alertTitle}>Konfirmasi Logout</Text>
+            <Text style={styles.alertMessage}>Apakah Anda sudah yakin?</Text>
+            <View style={styles.alertButtons}>
+              <TouchableOpacity
+                style={[styles.alertButton, styles.cancelButton]}
+                onPress={() => setShowLogoutAlert(false)}
+              >
+                <Text style={styles.buttonText}>Batal</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.alertButton, styles.confirmButton]}
+                onPress={() => {
+                  console.log("Logout dipilih");
+                  setShowLogoutAlert(false);
+                  closeDrawer();
+                }}
+              >
+                <Text style={styles.buttonText}>Ya</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      )}
     </>
   );
 }
+
+const stylesDrawer = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "black",
+    opacity: 0.4,
+  },
+  drawer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: DRAWER_HEIGHT,
+    backgroundColor: AccentColor.darkblue,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.2,
+    elevation: 5,
+  },
+  headerBar: {
+    width: 40,
+    height: 5,
+    backgroundColor: MainColor.white,
+    borderRadius: 5,
+    alignSelf: "center",
+    marginVertical: 10,
+  },
+  menuItem: {
+    padding: 15,
+  },
+});
+
+const styles = StyleSheet.create({
+  alertOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+  alertBox: {
+    width: "80%",
+    backgroundColor: "white",
+    borderRadius: 10,
+    padding: 20,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    elevation: 5,
+  },
+  alertTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  alertMessage: {
+    textAlign: "center",
+    marginBottom: 20,
+  },
+  alertButtons: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  alertButton: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 5,
+    marginHorizontal: 5,
+    alignItems: "center",
+  },
+  cancelButton: {
+    backgroundColor: "#ccc",
+  },
+  confirmButton: {
+    backgroundColor: "red",
+  },
+  buttonText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});

app/_layout.tsx

@@ -1,35 +1,71 @@
-import "react-native-gesture-handler";
 import { MainColor } from "@/constants/color-palet";
 import { Stack } from "expo-router";
+import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function RootLayout() {
   return (
-    <SafeAreaProvider
+    <>
-      style={{
+      <SafeAreaProvider>
-        backgroundColor: MainColor.darkblue,
+        <Stack
-      }}
+          screenOptions={{
-    >
+            headerStyle: { backgroundColor: MainColor.darkblue },
-      <Stack
+            headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
-        screenOptions={{
+            headerTitleAlign: "center",
-          headerStyle: { backgroundColor: MainColor.darkblue },
+            // contentStyle: {
-          headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+            //   borderBottomColor: AccentColor.blue,
-          headerTitleAlign: "center",
+            //   borderBottomWidth: 2,
-          // contentStyle: {
+            // },
-          //   borderBottomColor: AccentColor.blue,
+            // headerLargeStyle: {
-          //   borderBottomWidth: 2,
+            //   backgroundColor: MainColor.darkblue,
-          // },
+            // },
-          // headerLargeStyle: {
+            // headerShadowVisible: false,
-          //   backgroundColor: MainColor.darkblue,
+          }}
-          // },
+        >
-          // headerShadowVisible: false,
+          <Stack.Screen name="index" options={{ headerShown: false }} />
-        }}
+          <Stack.Screen name="verification" options={{ headerShown: false }} />
-      >
+          <Stack.Screen name="register" options={{ headerShown: false }} />
-        <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="(application)" options={{ headerShown: false }} />
-        <Stack.Screen name="verification" options={{ headerShown: false }} />
+        </Stack>
-        <Stack.Screen name="register" options={{ headerShown: false }} />
+      </SafeAreaProvider>
-        <Stack.Screen name="(application)" options={{ headerShown: false }} />
+    </>
-      </Stack>
+    // <SafeAreaProvider
-    </SafeAreaProvider>
+    //   style={{
+    //     backgroundColor: AccentColor.darkblue,
+    //   }}
+    // >
+    //   <SafeAreaView
+    //     edges={[
+    //       "bottom",
+    //       // "top",
+    //     ]}
+    //     style={{
+    //       flex: 1,
+    //       // paddingTop: StatusBar.currentHeight,
+    //       // backgroundColor: MainColor.darkblue,
+    //     }}
+    //   >
+    //     <Stack
+    //       screenOptions={{
+    //         headerStyle: { backgroundColor: MainColor.darkblue },
+    //         headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+    //         headerTitleAlign: "center",
+    //         // contentStyle: {
+    //         //   borderBottomColor: AccentColor.blue,
+    //         //   borderBottomWidth: 2,
+    //         // },
+    //         // headerLargeStyle: {
+    //         //   backgroundColor: MainColor.darkblue,
+    //         // },
+    //         // headerShadowVisible: false,
+    //       }}
+    //     >
+    //       <Stack.Screen name="index" options={{ headerShown: false }} />
+    //       <Stack.Screen name="verification" options={{ headerShown: false }} />
+    //       <Stack.Screen name="register" options={{ headerShown: false }} />
+    //       <Stack.Screen name="(application)" options={{ headerShown: false }} />
+    //     </Stack>
+    //   </SafeAreaView>
+    // </SafeAreaProvider>
   );
 }

components/_ShareComponent/ViewWrapper.tsx

@@ -1,6 +1,7 @@
+import { MainColor } from "@/constants/color-palet";
 import { Styles } from "@/styles/global-styles";
 import { ImageBackground, ScrollView, View } from "react-native";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 interface ViewWrapperProps {
   children: React.ReactNode;
@@ -16,7 +17,7 @@ const ViewWrapper = ({
   const assetBackground = require("../../assets/images/main-background.png");
 
   return (
-    <SafeAreaProvider>
+    <>
       <SafeAreaView
         edges={[
           "bottom",
@@ -25,6 +26,7 @@ const ViewWrapper = ({
         style={{
           flex: 1,
           // paddingTop: StatusBar.currentHeight,
+          backgroundColor: MainColor.darkblue,
         }}
       >
         <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
@@ -42,7 +44,36 @@ const ViewWrapper = ({
         </ScrollView>
         {tabBarComponent}
       </SafeAreaView>
-    </SafeAreaProvider>
+    </>
+    
+    // <SafeAreaProvider>
+    //   <SafeAreaView
+    //     edges={[
+    //       "bottom",
+    //       // "top",
+    //     ]}
+    //     style={{
+    //       flex: 1,
+    //       // paddingTop: StatusBar.currentHeight,
+    //       backgroundColor: MainColor.darkblue,
+    //     }}
+    //   >
+    //     <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>
+    //     {tabBarComponent}
+    //   </SafeAreaView>
+    // </SafeAreaProvider>
   );
 };
 

screens/Authentication/RegisterView.tsx

@@ -42,7 +42,7 @@ export default function RegisterView() {
                 router.push("/(application)/home")
               )}
             />
-            <Spacing />
+            {/* <Spacing />
             <ButtonCustom
               title="Coba"
               backgroundColor={MainColor.yellow}
@@ -52,7 +52,7 @@ export default function RegisterView() {
                 console.log("Home clicked");
                 router.push("/(application)/coba");
               }}
-            />
+            /> */}
           </View>
         </View>
       </ViewWrapper>