feat: pretty native context menu on search items

apps/expo/package.json

@@ -42,6 +42,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.2",
+    "react-native-context-menu-view": "^1.14.1",
     "react-native-css-interop": "~0.0.22",
     "react-native-gesture-handler": "~2.14.1",
     "react-native-quick-base64": "^2.0.8",

apps/expo/src/components/item/item.tsx

@@ -1,4 +1,5 @@
 import { Image, Keyboard, TouchableOpacity, View } from "react-native";
+import ContextMenu from "react-native-context-menu-view";
 import { useRouter } from "expo-router";
 
 import { Text } from "~/components/ui/Text";
@@ -23,28 +24,32 @@ export default function Item({ data }: { data: ItemData }) {
     });
   };
 
+  const contextMenuActions = [
+    { title: "Bookmark" },
+    ...(type === "movie" ? [{ title: "Download" }] : []),
+  ];
+
+  const onContextMenuPress = (_e: unknown) => {
+    // do stuff
+  };
+
   return (
     <TouchableOpacity onPress={handlePress} style={{ width: "100%" }}>
-      {
-        <View className="w-full">
+      <View className="w-full">
+        <ContextMenu actions={contextMenuActions} onPress={onContextMenuPress}>
           <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
-            <Image
-              source={{
-                uri: posterUrl,
-              }}
-              className="h-full w-full"
-            />
-          </View>
-          <Text className="font-bold">{title}</Text>
-          <View className="flex-row items-center gap-3">
-            <Text className="text-xs text-gray-600">
-              {type === "tv" ? "Show" : "Movie"}
-            </Text>
-            <View className="h-1 w-1 rounded-3xl bg-gray-600" />
-            <Text className="text-sm text-gray-600">{year}</Text>
+            <Image source={{ uri: posterUrl }} className="h-full w-full" />
           </View>
+        </ContextMenu>
+        <Text className="font-bold">{title}</Text>
+        <View className="flex-row items-center gap-3">
+          <Text className="text-xs text-gray-600">
+            {type === "tv" ? "Show" : "Movie"}
+          </Text>
+          <View className="h-1 w-1 rounded-3xl bg-gray-600" />
+          <Text className="text-sm text-gray-600">{year}</Text>
         </View>
-      }
+      </View>
     </TouchableOpacity>
   );
 }