movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 12:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: pretty native context menu on search items

Browse Source
This commit is contained in:
Adrian Castro
2024-02-15 20:59:54 +01:00
parent b3dbb7f334
commit 149daa3435
3 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/expo/package.json
View File

@@ -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",

39
apps/expo/src/components/item/item.tsx
View File

@@ -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>
);
}

13
pnpm-lock.yaml generated
View File

@@ -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'}