fix: improve image style

RSSNext · Jan 23, 2025 · 8e0915a · 8e0915a
1 parent 8344456
commit 8e0915a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/apps/mobile/src/main.tsx b/apps/mobile/src/main.tsx
@@ -1,12 +1,16 @@
 import "@expo/metro-runtime"
 
 import { registerRootComponent } from "expo"
+import { Image } from "expo-image"
 import { App } from "expo-router/build/qualified-entry"
+import { cssInterop } from "nativewind"
 import { RootSiblingParent } from "react-native-root-siblings"
 
 // import { renderRootComponent } from "expo"
 import { initializeApp } from "./initialize"
 
+cssInterop(Image, { className: "style" })
+
 initializeApp().then(() => {
   // This file should only import and register the root. No components or exports
   // should be added here.

diff --git a/apps/mobile/src/modules/entry-list/entry-list.tsx b/apps/mobile/src/modules/entry-list/entry-list.tsx
@@ -4,9 +4,10 @@ import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"
 import { useHeaderHeight } from "@react-navigation/elements"
 import { useIsFocused } from "@react-navigation/native"
 import { FlashList } from "@shopify/flash-list"
+import { Image } from "expo-image"
 import { router } from "expo-router"
 import { useCallback, useContext, useEffect, useMemo } from "react"
-import { Image, StyleSheet, Text, useAnimatedValue, View } from "react-native"
+import { StyleSheet, Text, useAnimatedValue, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import {
@@ -186,6 +187,7 @@ function EntryItem({ entryId }: { entryId: string }) {
   if (!entry) return <EntryItemSkeleton />
   const { title, description, publishedAt, media } = entry
   const image = media?.[0]?.url
+  const blurhash = media?.[0]?.blurhash
 
   return (
     <ItemPressable className="flex flex-row items-center p-4" onPress={handlePress}>
@@ -201,8 +203,9 @@ function EntryItem({ entryId }: { entryId: string }) {
       {image && (
         <Image
           source={{ uri: image }}
+          placeholder={{ blurhash }}
           className="ml-2 size-20 rounded-md bg-zinc-200 dark:bg-zinc-800"
-          resizeMode="cover"
+          contentFit="cover"
         />
       )}
     </ItemPressable>

diff --git a/apps/mobile/src/screens/(stack)/entries/[entryId]/index.tsx b/apps/mobile/src/screens/(stack)/entries/[entryId]/index.tsx
@@ -1,16 +1,17 @@
 import type { AVPlaybackStatus } from "expo-av"
 import { Video } from "expo-av"
+import { Image } from "expo-image"
 import { Stack, useLocalSearchParams } from "expo-router"
 import { useState } from "react"
 import { Dimensions, ScrollView, Text, View } from "react-native"
 import PagerView from "react-native-pager-view"
 
-import { ReAnimatedExpoImage } from "@/src/components/common/AnimatedComponents"
 import { BlurEffect } from "@/src/components/common/BlurEffect"
 import HtmlWeb from "@/src/components/ui/typography/HtmlWeb"
+import type { MediaModel } from "@/src/database/schemas/types"
 import { useEntry, usePrefetchEntryContent } from "@/src/store/entry/hooks"
 
-function Media({ media }: { media: any }) {
+function Media({ media }: { media: MediaModel }) {
   const isVideo = media.type === "video"
   const imageUrl = isVideo ? media.preview_image_url : media.url
   const videoUrl = media.url
@@ -37,15 +38,15 @@ function Media({ media }: { media: any }) {
       )}
       <View className="flex-1 justify-center">
         {imageUrl ? (
-          <ReAnimatedExpoImage
+          <Image
             source={{ uri: imageUrl }}
+            placeholder={{ blurhash: media.blurhash }}
             style={{
               width: "100%",
               aspectRatio: media?.height && media.width ? media.width / media.height : 9 / 16,
               display: isVideo ? (status?.isLoaded ? "none" : "flex") : "flex",
             }}
-            sharedTransitionTag={imageUrl ? `entry-image-${imageUrl}` : undefined}
-            allowDownscaling={false}
+            contentFit="contain"
           />
         ) : (
           <Text className="text-gray-4 text-center">No media</Text>
@@ -90,16 +91,12 @@ export default function EntryDetailPage() {
           headerTitle: item?.title ?? "Entry",
         }}
       />
-      <ScrollView
-        className="pt-safe"
-        contentContainerClassName="flex-grow"
-        contentInsetAdjustmentBehavior="automatic"
-      >
+      <ScrollView contentContainerClassName="flex-grow" contentInsetAdjustmentBehavior="automatic">
         {mediaList.length > 0 && (
           <View
             style={{
-              height: maxMediaHeight > 0 ? maxMediaHeight : "80%",
-              maxHeight: "80%",
+              height: maxMediaHeight > 0 ? maxMediaHeight : "50%",
+              maxHeight: "50%",
             }}
           >
             <PagerView