use workaround for hamburger menu since the double forwarded ref does…

…n't work on android
icssc · Jun 7, 2024 · 4b26c6b · 4b26c6b
1 parent d5b1389
commit 4b26c6b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/apps/expo/src/app/home/_components/date-picker.tsx b/apps/expo/src/app/home/_components/date-picker.tsx
@@ -16,7 +16,7 @@ export const UniversalDatePicker = ({
   date,
   setDate,
 }: Readonly<{ date: Date; setDate: (date: Date) => void }>) => {
-  const [showDatePicker, setShowDatePicker] = useState<boolean>(true);
+  const [showDatePicker, setShowDatePicker] = useState<boolean>(false);
 
   return (
     <>

diff --git a/apps/expo/src/components/navigation/HamburgerMenu.tsx b/apps/expo/src/components/navigation/HamburgerMenu.tsx
@@ -1,5 +1,5 @@
 import type { Href } from "expo-router";
-import { Link, useSegments } from "expo-router";
+import { router, useSegments } from "expo-router";
 import {
   CalendarDays,
   ChevronRight,
@@ -63,6 +63,8 @@ const screens = [
   },
 ] as const satisfies Screen[];
 
+// ! Forwarding ref from Popover.close to Link to ListItem does not work on android, so we have to use a workaround
+// ! If its fixed later on, we can use the forwarded ref
 export function HamburgerMenu() {
   const currentSegment = useSegments()[0] ?? "";
 
@@ -81,9 +83,8 @@ export function HamburgerMenu() {
           paddingVertical={0}
           theme="dark"
           pressTheme
-        >
-          <Menu color="white" size="$2" />
-        </Button>
+          icon={<Menu color="white" size="$2" />}
+        />
       </Popover.Trigger>
       <Adapt when={"sm" as unknown as undefined} platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom snapPoints={[65, 90]}>
@@ -123,7 +124,15 @@ export function HamburgerMenu() {
         <YGroup separator={<Separator />}>
           {screens.map(({ href, ...props }) => (
             <YGroup.Item key={href}>
-              <Popover.Close
+              <ListItem
+                {...props}
+                size="$5"
+                onPress={() => router.push(href)}
+                pressTheme
+                disabled={href.replaceAll("/", "") === currentSegment}
+                iconAfter={ChevronRight}
+              />
+              {/* <Popover.Close
                 disabled={href.replaceAll("/", "") === currentSegment}
                 asChild
                 flexDirection="row"
@@ -142,7 +151,7 @@ export function HamburgerMenu() {
                     iconAfter={ChevronRight}
                   />
                 </Link>
-              </Popover.Close>
+              </Popover.Close> */}
             </YGroup.Item>
           ))}
         </YGroup>