diff options
Diffstat (limited to 'apps/mobile/components/bookmarks')
4 files changed, 45 insertions, 27 deletions
diff --git a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx index 8fa88c8b..35726e4b 100644 --- a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx +++ b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx @@ -1,14 +1,25 @@ -import { Image } from "react-native"; +import { View } from "react-native"; +import { Image, ImageContentFit } from "expo-image"; import { useAssetUrl } from "@/lib/hooks"; export default function BookmarkAssetImage({ assetId, className, + contentFit = "cover", }: { assetId: string; className: string; + contentFit?: ImageContentFit; }) { const assetSource = useAssetUrl(assetId); - return <Image source={assetSource} className={className} />; + return ( + <View className={className}> + <Image + source={assetSource} + style={{ width: "100%", height: "100%" }} + contentFit={contentFit} + /> + </View> + ); } diff --git a/apps/mobile/components/bookmarks/BookmarkAssetView.tsx b/apps/mobile/components/bookmarks/BookmarkAssetView.tsx index 5fe2f470..e009a027 100644 --- a/apps/mobile/components/bookmarks/BookmarkAssetView.tsx +++ b/apps/mobile/components/bookmarks/BookmarkAssetView.tsx @@ -48,7 +48,7 @@ export default function BookmarkAssetView({ <Pressable onPress={() => setImageZoom(true)}> <BookmarkAssetImage assetId={bookmark.content.assetId} - className="h-56 min-h-56 w-full object-cover" + className="h-56 min-h-56 w-full" /> </Pressable> </View> diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx index 41e57f89..cd0ea445 100644 --- a/apps/mobile/components/bookmarks/BookmarkCard.tsx +++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx @@ -1,7 +1,6 @@ import { ActivityIndicator, Alert, - Image, Platform, Pressable, ScrollView, @@ -11,6 +10,7 @@ import { import * as Clipboard from "expo-clipboard"; import * as FileSystem from "expo-file-system/legacy"; import * as Haptics from "expo-haptics"; +import { Image } from "expo-image"; import { router, useRouter } from "expo-router"; import * as Sharing from "expo-sharing"; import { Text } from "@/components/ui/Text"; @@ -317,30 +317,36 @@ function LinkCard({ let imageComp; if (imageUrl) { imageComp = ( - <Image - source={ - imageUrl.localAsset - ? { - uri: `${settings.address}${imageUrl.url}`, - headers: buildApiHeaders( - settings.apiKey, - settings.customHeaders, - ), - } - : { - uri: imageUrl.url, - } - } - className="h-56 min-h-56 w-full object-cover" - /> + <View className="h-56 min-h-56 w-full"> + <Image + source={ + imageUrl.localAsset + ? { + uri: `${settings.address}${imageUrl.url}`, + headers: buildApiHeaders( + settings.apiKey, + settings.customHeaders, + ), + } + : { + uri: imageUrl.url, + } + } + style={{ width: "100%", height: "100%" }} + contentFit="cover" + /> + </View> ); } else { imageComp = ( - <Image - // oxlint-disable-next-line no-require-imports - source={require("@/assets/blur.jpeg")} - className="h-56 w-full rounded-t-lg" - /> + <View className="h-56 w-full overflow-hidden rounded-t-lg"> + <Image + // oxlint-disable-next-line no-require-imports + source={require("@/assets/blur.jpeg")} + style={{ width: "100%", height: "100%" }} + contentFit="cover" + /> + </View> ); } @@ -444,7 +450,7 @@ function AssetCard({ <Pressable onPress={onOpenBookmark}> <BookmarkAssetImage assetId={assetImage} - className="h-56 min-h-56 w-full object-cover" + className="h-56 min-h-56 w-full" /> </Pressable> <View className="flex gap-2 p-2"> diff --git a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx index fe27836a..57e00c24 100644 --- a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx +++ b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx @@ -228,7 +228,8 @@ export function BookmarkLinkScreenshotPreview({ <Pressable onPress={() => setImageZoom(true)}> <BookmarkAssetImage assetId={asset.id} - className="h-full w-full object-contain" + className="h-full w-full" + contentFit="contain" /> </Pressable> </View> |