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
+            <Image source={{ uri: posterUrl }} className="h-full w-full" />
-              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>
           </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>
   );
 }

pnpm-lock.yaml

@@ -103,6 +103,9 @@ importers:
       react-native:
         specifier: 0.73.2
         version: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+      react-native-context-menu-view:
+        specifier: ^1.14.1
+        version: 1.14.1(react-native@0.73.2)(react@18.2.0)
       react-native-css-interop:
         specifier: ~0.0.22
         version: 0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1)
@@ -8949,6 +8952,16 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-native-context-menu-view@1.14.1(react-native@0.73.2)(react@18.2.0):
+    resolution: {integrity: sha512-rPtC6RCbEVismTQ6M7WSt1HisNvgbS9bWqWX4RQXNXHKOKsVvXpI+bWRypFAjeBN/P+winn6Dxn1+meLBMrjmQ==}
+    peerDependencies:
+      react: ^16.8.1 || ^17.0.0 || ^18.0.0
+      react-native: '>=0.60.0-rc.0 <1.0.x'
+    dependencies:
+      react: 18.2.0
+      react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+    dev: false
+
   /react-native-css-interop@0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1):
     resolution: {integrity: sha512-JHLYHlLEqM13dy0XSxIPOWvqmQkPrqUt+KHPkbLV0sIiw/4aN6B5TPsNKZFX9bJJaZ//dAECn782R0MqDrTBWQ==}
     engines: {node: '>=16'}