Fix image performance

components/ChatMessageBubble.tsx

@@ -1,4 +1,5 @@
 import { useMedplumProfile } from "@medplum/react-hooks";
+import { Image } from "expo-image";
 import { FileDown, UserRound } from "lucide-react-native";
 import { useCallback, useState } from "react";
 import { View } from "react-native";
@@ -7,7 +8,6 @@ import { Alert } from "react-native";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button, ButtonIcon, ButtonSpinner, ButtonText } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import { Image } from "@/components/ui/image";
 import { Text } from "@/components/ui/text";
 import type { ChatMessage } from "@/models/chat";
 import type { AttachmentWithUrl } from "@/types/attachment";
@@ -73,10 +73,11 @@ export function ChatMessageBubble({ message, avatarURL }: ChatMessageBubbleProps
             <View className="mb-1">
               {hasImage ? (
                 <Image
+                  style={{ width: 200, height: 200 }}
+                  contentFit="contain"
                   key={message.attachment.url}
                   source={message.attachment.url}
-                  size="2xl"
-                  resizeMode="contain"
+                  cachePolicy="memory-disk"
                   alt={`Attachment ${message.attachment.title}`}
                 />
               ) : (

components/ChatMessageList.tsx

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { ScrollView } from "react-native-gesture-handler";
+import { FlatList, ListRenderItem } from "react-native";
 
 import { useAvatars } from "@/hooks/useAvatars";
 import type { ChatMessage } from "@/models/chat";
@@ -13,26 +13,34 @@ interface ChatMessageListProps {
 }
 
 export function ChatMessageList({ messages, loading }: ChatMessageListProps) {
-  const scrollViewRef = useRef<ScrollView>(null);
+  const flatListRef = useRef<FlatList>(null);
   const { getAvatarURL } = useAvatars(messages.map((message) => message.avatarRef));
 
+  const renderItem: ListRenderItem<ChatMessage> = ({ item: message }) => (
+    <ChatMessageBubble
+      key={message.id}
+      message={message}
+      avatarURL={getAvatarURL(message.avatarRef)}
+    />
+  );
+
   return (
-    <ScrollView
-      ref={scrollViewRef}
+    <FlatList
+      ref={flatListRef}
+      data={messages}
+      renderItem={renderItem}
+      keyExtractor={(message) => message.id}
       className="flex-1 bg-background-50"
       onContentSizeChange={() => {
-        // Scroll to bottom when content size changes (e.g. new message)-]
-        scrollViewRef.current?.scrollToEnd({ animated: true });
+        // Scroll to bottom when content size changes (e.g. new message)
+        flatListRef.current?.scrollToEnd({ animated: true });
       }}
-    >
-      {messages.map((message) => (
-        <ChatMessageBubble
-          key={message.id}
-          message={message}
-          avatarURL={getAvatarURL(message.avatarRef)}
-        />
-      ))}
-      {loading && <LoadingDots />}
-    </ScrollView>
+      ListFooterComponent={loading ? <LoadingDots /> : null}
+      showsVerticalScrollIndicator={true}
+      initialNumToRender={15}
+      maxToRenderPerBatch={10}
+      windowSize={5}
+      removeClippedSubviews
+    />
   );
 }

components/ThreadList.tsx

@@ -137,7 +137,7 @@ export function ThreadList({ threads, getAvatarURL, onCreateThread }: ThreadList
               isPractitioner={isPractitioner}
             />
           )}
-          showsVerticalScrollIndicator={false}
+          showsVerticalScrollIndicator={true}
           initialNumToRender={10}
           maxToRenderPerBatch={10}
           windowSize={5}

package.json

@@ -112,7 +112,8 @@
     "react-native-webview": "13.12.5",
     "scheduler": "^0.25.0",
     "tailwindcss": "^3.4.17",
-    "use-context-selector": "^2.0.0"
+    "use-context-selector": "^2.0.0",
+    "expo-image": "~2.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",