feature profile

deskripsi
- resaourcing drawer

app/(application)/_layout.tsx

@@ -88,7 +88,8 @@ export default function ApplicationLayout() {
           }}
         />
 
-        <Stack.Screen
+        {/* Profile */}
+        {/* <Stack.Screen
           name="profile/index"
           options={{
             title: "Profile",
@@ -101,7 +102,22 @@ export default function ApplicationLayout() {
               />
             ),
           }}
-        />
+        /> */}
+
+        {/* <Stack.Screen
+          name="profile/[id]"
+          options={{
+            title: "Profile",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+          }}
+        /> */}
 
         {/* Event */}
         <Stack.Screen

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

@@ -0,0 +1,145 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { 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 {
+  Text,
+  TouchableOpacity,
+  View,
+  Animated,
+  PanResponder,
+} from "react-native";
+import React, { useRef, useState } from "react";
+
+export default function Profile() {
+  const { id } = useLocalSearchParams();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Animasi menggunakan translateY (lebih kompatibel)
+  const drawerAnim = useRef(new Animated.Value(200)).current; // mulai di luar bawah layar
+
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+    Animated.timing(drawerAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const closeDrawer = () => {
+    Animated.timing(drawerAnim, {
+      toValue: 200,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => setIsDrawerOpen(false));
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return gestureState.dy < -10; // gesek ke atas untuk tutup
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy < -50) {
+          closeDrawer(); // tutup jika gesek cukup tinggi
+        } else {
+          // kembali ke posisi awal
+          Animated.spring(drawerAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  return (
+    <>
+      <ViewWrapper >
+        <Stack.Screen
+          options={{
+            title: "Profile",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+            headerRight: () => (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
+          }}
+        />
+        <Text style={Styles.textLabel}>Profile {id}</Text>
+      </ViewWrapper>
+
+      {/* Custom Bottom Drawer */}
+      {isDrawerOpen && (
+        <Animated.View
+          style={{
+            position: "absolute",
+            left: 0,
+            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={{
+              width: 40,
+              height: 5,
+              backgroundColor: "#ccc",
+              borderRadius: 5,
+              alignSelf: "center",
+              marginVertical: 10,
+            }}
+          />
+
+          <TouchableOpacity
+            style={{ padding: 15 }}
+            onPress={() => {
+              alert("Pilihan 1 diklik");
+              closeDrawer();
+            }}
+          >
+            <Text>Menu Item 1</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={{ padding: 15 }}
+            onPress={() => {
+              alert("Pilihan 2 diklik");
+              closeDrawer();
+            }}
+          >
+            <Text>Menu Item 2</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={{ padding: 15 }} onPress={closeDrawer}>
+            <Text style={{ color: "red" }}>Tutup</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      )}
+    </>
+  );
+}

app/(application)/profile/index.tsx

@@ -1,9 +0,0 @@
-import { Text, View } from "react-native";
-
-export default function Profile() {
-    return (
-        <View>
-            <Text>Profile</Text>
-        </View>
-    );
-}

app/_layout.tsx

@@ -1,3 +1,4 @@
+import "react-native-gesture-handler";
 import { MainColor } from "@/constants/color-palet";
 import { Stack } from "expo-router";
 import { SafeAreaProvider } from "react-native-safe-area-context";

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@expo/vector-icons": "^14.1.0",
         "@react-navigation/bottom-tabs": "^7.4.2",
+        "@react-navigation/drawer": "^7.5.2",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.21",
@@ -390,6 +391,8 @@
 
     "@react-navigation/core": ["@react-navigation/core@7.11.0", "", { "dependencies": { "@react-navigation/routers": "^7.4.1", "escape-string-regexp": "^4.0.0", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-LfYPtxsMjldJ80BBeedaDCN0LE81WU1NP4V9Ia3wSrCPTAXt11y6holaBUrmUMVQVqpEyPRQrjwrT1QkfGKquw=="],
 
+    "@react-navigation/drawer": ["@react-navigation/drawer@7.5.2", "", { "dependencies": { "@react-navigation/elements": "^2.5.2", "color": "^4.2.3", "react-native-drawer-layout": "^4.1.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "react-native-reanimated": ">= 2.0.0", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-1FSo+DyJe2zlIcQBhHcayZCe2aAF2JF+rpn7HnVnTV2HaCEpgJ0/zgHIa9MZByKntp/aSexL9YkDFQhQj2+7ag=="],
+
     "@react-navigation/elements": ["@react-navigation/elements@2.4.5", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-rzoQQ07dZGA3h608imB1nAZ2rPw9vZ2xc2K36XSZoV/7IZRDxI4BCIj38Wc4saQaYhfJIoeVssK4+6IwhZBedg=="],
 
     "@react-navigation/native": ["@react-navigation/native@7.1.12", "", { "dependencies": { "@react-navigation/core": "^7.11.0", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-ezHzrZN+9SE4Co6/H8MgDWlBxfJbVc5xi8szRi2QW8eJlsZsAvgGqtKs4YECraV4Yr9zW8RCzNuUxYiQiPMtEQ=="],
@@ -1352,6 +1355,8 @@
 
     "react-native-country-codes-picker": ["react-native-country-codes-picker@2.3.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-dDQhd0bVvlmgb84NPhTOmTk5UVYPHtk3lqZI+BPb61H1rC2IDrTvPWENg6u1DMGliqWHQDBYpeH37zvxxQL71w=="],
 
+    "react-native-drawer-layout": ["react-native-drawer-layout@4.1.11", "", { "dependencies": { "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "react-native-reanimated": ">= 2.0.0" } }, "sha512-31gilubSKPLToy31/bb0hhgOOenHYJq4JC7g/JkIEqBqSWzoCgiOlccDHlBRG+MV37UtXZnJN2spj3VusdCd4A=="],
+
     "react-native-edge-to-edge": ["react-native-edge-to-edge@1.6.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-2WCNdE3Qd6Fwg9+4BpbATUxCLcouF6YRY7K+J36KJ4l3y+tWN6XCqAC4DuoGblAAbb2sLkhEDp4FOlbOIot2Og=="],
 
     "react-native-gesture-handler": ["react-native-gesture-handler@2.24.0", "", { "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ZdWyOd1C8axKJHIfYxjJKCcxjWEpUtUWgTOVY2wynbiveSQDm8X/PDyAKXSer/GOtIpjudUbACOndZXCN3vHsw=="],
@@ -1770,6 +1775,8 @@
 
     "@react-navigation/bottom-tabs/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
 
+    "@react-navigation/drawer/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
+
     "@react-navigation/native-stack/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
 
     "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.1.0",
     "@react-navigation/bottom-tabs": "^7.4.2",
+    "@react-navigation/drawer": "^7.5.2",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
     "@react-navigation/native-stack": "^7.3.21",

screens/Home/tabsList.ts

@@ -33,7 +33,7 @@ export  const tabsHome: ITabs[] = [
     icon: "person-outline",
     activeIcon: "person",
     label: "Profile",
-    path: "/profile",
+    path: "/profile/coba-id",
     isActive: true,
     disabled: false,
   },