chore: Expo SDK 54

app/app.config.ts

@@ -48,6 +48,7 @@ const config: ExpoConfig = {
     [
       "@sentry/react-native/expo",
       {
+        url: "https://sentry.io/",
         project: "app",
         organization: "ian-banks-llc",
       },
@@ -58,6 +59,7 @@ const config: ExpoConfig = {
     bundleIdentifier: "app.ridebeep.App",
     buildNumber: "32",
     infoPlist: {
+      ITSAppUsesNonExemptEncryption: false,
       NSLocationWhenInUseUsageDescription:
         "The Beep App uses your location to pick origins, destinations, and predict ride times",
       NSLocationAlwaysUsageDescription:

app/components/Beep.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as ContextMenu from "zeego/context-menu";
 import { View } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { Card } from "@/components/Card";
@@ -12,6 +11,7 @@ import { printStars } from "./Stars";
 
 import { useMutation } from "@tanstack/react-query";
 import { useQueryClient } from "@tanstack/react-query";
+import { Menu, MenuProps } from "./Menu";
 
 interface Props {
   item: RouterOutput["beep"]["beeps"]["beeps"][number];
@@ -40,9 +40,68 @@ export function Beep({ item }: Props) {
     }),
   );
 
+  const options: MenuProps["options"] = [];
+
+  if (isRider && item.beeper.venmo) {
+    options.push({
+      title: "Pay Beeper With Venmo",
+      onClick: () =>
+        openVenmo(
+          item.beeper.venmo,
+          item.groupSize,
+          item.beeper.groupRate,
+          item.beeper.singlesRate,
+          "pay",
+        ),
+    });
+  }
+
+  if (isBeeper && item.rider.venmo && item.status === "complete") {
+    options.push({
+      title: "Charge Rider with Venmo",
+      onClick: () =>
+        openVenmo(
+          item.rider.venmo,
+          item.groupSize,
+          item.beeper.groupRate,
+          item.beeper.singlesRate,
+          "charge",
+        ),
+    });
+  }
+
+  if (myRating) {
+    options.push({
+      onClick: () => deleteRating({ ratingId: myRating.id }),
+      title: "Delete Rating",
+    });
+  }
+
+  if (!myRating && item.status === "complete") {
+    options.push({
+      title: "Rate",
+      onClick: () =>
+        navigation.navigate("Rate", {
+          userId: otherUser.id,
+          beepId: item.id,
+        }),
+    });
+  }
+
+  options.push({
+    title: "Report",
+    onClick: () =>
+      navigation.navigate("Report", {
+        userId: otherUser.id,
+        beepId: item.id,
+      }),
+  });
+
   return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
+    <Menu
+      options={options}
+      activationMethod="longPress"
+      trigger={
         <Card
           style={{ padding: 16, gap: 8 }}
           pressable
@@ -127,80 +186,7 @@ export function Beep({ item }: Props) {
             )}
           </View>
         </Card>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content>
-        {isRider && item.beeper.venmo && (
-          <ContextMenu.Item
-            key="pay-beeper"
-            onSelect={() =>
-              openVenmo(
-                item.beeper.venmo,
-                item.groupSize,
-                item.beeper.groupRate,
-                item.beeper.singlesRate,
-                "pay",
-              )
-            }
-          >
-            <ContextMenu.ItemTitle>Pay Beeper with Venmo</ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        )}
-        {isBeeper && item.rider.venmo && item.status === "complete" && (
-          <ContextMenu.Item
-            key="request-rider"
-            onSelect={() =>
-              openVenmo(
-                item.rider.venmo,
-                item.groupSize,
-                item.beeper.groupRate,
-                item.beeper.singlesRate,
-                "charge",
-              )
-            }
-          >
-            <ContextMenu.ItemTitle>
-              Charge Rider with Venmo
-            </ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        )}
-        {myRating && (
-          <ContextMenu.Item
-            key="delete-rating"
-            destructive
-            onSelect={() => {
-              if (myRating) {
-                deleteRating({ ratingId: myRating.id });
-              }
-            }}
-          >
-            <ContextMenu.ItemTitle>Delete Rating</ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        )}
-        {!myRating && item.status === "complete" && (
-          <ContextMenu.Item
-            key="rate"
-            onSelect={() =>
-              navigation.navigate("Rate", {
-                userId: otherUser.id,
-                beepId: item.id,
-              })
-            }
-          >
-            <ContextMenu.ItemTitle>Rate</ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        )}
-        <ContextMenu.Item
-          key="report"
-          onSelect={() =>
-            navigation.navigate("Report", {
-              userId: otherUser.id,
-              beepId: item.id,
-            })
-          }
-        >
-          <ContextMenu.ItemTitle>Report</ContextMenu.ItemTitle>
-        </ContextMenu.Item>
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+      }
+    />
   );
 }

app/components/Menu.android.tsx

@@ -0,0 +1,31 @@
+import { MenuProps } from "./Menu";
+
+import { MenuView } from "@react-native-menu/menu";
+import { View } from "react-native";
+
+export function Menu(props: MenuProps) {
+  if (props.disabled) {
+    return props.trigger;
+  }
+
+  return (
+    <View>
+      <MenuView
+        onPressAction={({ nativeEvent }) => {
+          const option = props.options.find(
+            (option) => option.title === nativeEvent.event,
+          );
+          option?.onClick();
+        }}
+        actions={props.options.map((option) => ({
+          id: option.title,
+          title: option.title,
+          attributes: option.destructive ? { destructive: true } : {},
+        }))}
+        shouldOpenOnLongPress={props.activationMethod === "longPress"}
+      >
+        {props.trigger}
+      </MenuView>
+    </View>
+  );
+}

app/components/Menu.ios.tsx

@@ -0,0 +1,31 @@
+import { Button, ContextMenu, Host } from "@expo/ui/swift-ui";
+import { MenuProps } from "./Menu";
+import { View } from "react-native";
+
+export function Menu(props: MenuProps) {
+  if (props.disabled) {
+    return props.trigger;
+  }
+
+  return (
+    <Host matchContents={{ horizontal: true, vertical: false }}>
+      <ContextMenu activationMethod={props.activationMethod ?? "singlePress"}>
+        <ContextMenu.Items>
+          {props.options.map((option) => (
+            <Button
+              role={option.destructive ? "destructive" : undefined}
+              onPress={option.onClick}
+            >
+              {option.title}
+            </Button>
+          ))}
+        </ContextMenu.Items>
+        <ContextMenu.Trigger>
+          <View>
+            <Host>{props.trigger}</Host>
+          </View>
+        </ContextMenu.Trigger>
+      </ContextMenu>
+    </Host>
+  );
+}

app/components/Menu.tsx

@@ -0,0 +1,26 @@
+import { ContextMenuProps } from "@expo/ui/swift-ui";
+
+interface Option {
+  title: string;
+  onClick: () => void;
+  destructive?: boolean;
+}
+
+export interface MenuProps extends Omit<ContextMenuProps, "children"> {
+  /**
+   * The trigger for the men
+   */
+  trigger: React.ReactNode;
+  /**
+   * Options that render in the Menu
+   */
+  options: Option[];
+  /**
+   * If the Menu is disabled, the tigger will just be returned
+   */
+  disabled?: boolean;
+}
+
+export const Menu = (props: MenuProps) => {
+  return props.trigger;
+};

app/components/Menu.web.tsx

@@ -0,0 +1,21 @@
+import { useId } from "react";
+import { MenuProps } from "./Menu";
+
+export function Menu(props: MenuProps) {
+  const id = useId();
+
+  return (
+    <>
+      <button style={{ all: "unset" }} popoverTarget={id}>
+        {props.trigger}
+      </button>
+      <div popover="" popoverTargetAction="toggle" id={id}>
+        {props.options.map((option, index) => (
+          <button role="menuitem" key={index} onClick={option.onClick}>
+            {option.title}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+}