diff --git a/apps/expo/package.json b/apps/expo/package.json index 02c8999..0026c21 100644 --- a/apps/expo/package.json +++ b/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", diff --git a/apps/expo/src/components/item/item.tsx b/apps/expo/src/components/item/item.tsx index 43a1337..130c83b 100644 --- a/apps/expo/src/components/item/item.tsx +++ b/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 ( - { - + + - - - {title} - - - {type === "tv" ? "Show" : "Movie"} - - - {year} + + + {title} + + + {type === "tv" ? "Show" : "Movie"} + + + {year} - } + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e56b976..a16c188 100644 --- a/pnpm-lock.yaml +++ b/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'}