diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx index 9045b69..01afae9 100644 --- a/app/(application)/_layout.tsx +++ b/app/(application)/_layout.tsx @@ -88,7 +88,8 @@ export default function ApplicationLayout() { }} /> - ), }} - /> + /> */} + + {/* ( + router.back()} + /> + ), + }} + /> */} {/* Event */} { + 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 ( + <> + + ( + router.back()} + /> + ), + headerRight: () => ( + + + + ), + }} + /> + Profile {id} + + + {/* Custom Bottom Drawer */} + {isDrawerOpen && ( + + + + { + alert("Pilihan 1 diklik"); + closeDrawer(); + }} + > + Menu Item 1 + + + { + alert("Pilihan 2 diklik"); + closeDrawer(); + }} + > + Menu Item 2 + + + + Tutup + + + )} + + ); +} diff --git a/app/(application)/profile/index.tsx b/app/(application)/profile/index.tsx deleted file mode 100644 index 657677d..0000000 --- a/app/(application)/profile/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Text, View } from "react-native"; - -export default function Profile() { - return ( - - Profile - - ); -} \ No newline at end of file diff --git a/app/_layout.tsx b/app/_layout.tsx index 58bcc64..b7a0950 100644 --- a/app/_layout.tsx +++ b/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"; diff --git a/bun.lock b/bun.lock index a36c2c3..b6f3ced 100644 --- a/bun.lock +++ b/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=="], diff --git a/package.json b/package.json index 79705a2..0bd2d65 100644 --- a/package.json +++ b/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", diff --git a/screens/Home/tabsList.ts b/screens/Home/tabsList.ts index e1677bf..afa6fbb 100644 --- a/screens/Home/tabsList.ts +++ b/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, },