Preserve memoization of message list (#10434)

src/screens/Messages/components/MessagesList.tsx

@@ -25,6 +25,7 @@ import {
   type $Typed,
   type AppBskyEmbedRecord,
   AppBskyRichtextFacet,
+  ChatBskyConvoDefs,
   RichText,
 } from '@atproto/api'
 import {useScrollEdgeEffectRef} from '@bsky.app/expo-scroll-edge-effect'
@@ -85,6 +86,27 @@ function keyExtractor(item: ConvoItem) {
   return item.key
 }
 
+function getNeighborMessage(
+  items: ConvoItem[],
+  index: number,
+): ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView | null {
+  const neighbor = items[index]
+  if (!neighbor) return null
+  if (
+    neighbor.type === 'message' ||
+    neighbor.type === 'pending-message' ||
+    neighbor.type === 'deleted-message'
+  ) {
+    if (
+      ChatBskyConvoDefs.isMessageView(neighbor.message) ||
+      ChatBskyConvoDefs.isDeletedMessageView(neighbor.message)
+    ) {
+      return neighbor.message
+    }
+  }
+  return null
+}
+
 function onScrollToIndexFailed() {
   // Placeholder function. You have to give FlatList something or else it will error.
 }
@@ -368,18 +390,26 @@ export function MessagesList({
     })
   }, [flatListRef])
 
-  const renderItem = ({item}: {item: ConvoItem}) => {
+  const renderItem = ({item, index}: {item: ConvoItem; index: number}) => {
     if (item.type === 'message' || item.type === 'pending-message') {
       return (
         <MessageItem
           item={item}
           isGroupChat={convoState.convo.kind === 'group'}
+          prevMessage={getNeighborMessage(convoState.items, index - 1)}
+          nextMessage={getNeighborMessage(convoState.items, index + 1)}
+          relatedProfiles={convoState.relatedProfiles}
         />
       )
     } else if (item.type === 'deleted-message') {
       return <Text>Deleted message</Text>
     } else if (item.type === 'system-message') {
-      return <SystemMessageItem item={item} />
+      return (
+        <SystemMessageItem
+          item={item}
+          relatedProfiles={convoState.relatedProfiles}
+        />
+      )
     } else if (item.type === 'error') {
       return <MessageListError item={item} />
     }