stream-chat-react-native-core 9.5.1 → 9.5.2-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.5.1",
+  "version": "9.5.2-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -17,7 +17,7 @@ export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'fil
 };
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
-  const { files, message, styles: stylesProp = {} } = props;
+  const { files, styles: stylesProp = {} } = props;
   const { Attachment } = useComponentsContext();
 
   const {
@@ -32,7 +32,7 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     <View style={[styles.container, {}, container, stylesProp.container]}>
       {files.map((file, index) => (
         <View
-          key={`file-by-attachment-group-${message.id}-${index}`}
+          key={`file-by-attachment-group-${index}`}
           style={[styles.item, stylesProp.attachmentContainer, attachmentContainer]}
         >
           <Attachment attachment={file} />

package/src/components/Attachment/Gallery.tsx

@@ -272,7 +272,7 @@ const GalleryThumbnail = ({
       accessibilityLabel={thumbnailAccessibilityLabel}
       accessibilityRole='button'
       disabled={preventPress}
-      key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
+      key={`gallery-item-${colIndex}/${rowIndex}`}
       ref={thumbnailRef}
       onLongPress={(event) => {
         if (onLongPress) {

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -281,7 +281,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
               );
             case 'attachments':
               return otherAttachments.map((attachment, attachmentIndex) => (
-                <Attachment attachment={attachment} key={`${message.id}-${attachmentIndex}`} />
+                <Attachment attachment={attachment} key={`attachment-${attachmentIndex}`} />
               ));
             case 'files':
               return (
@@ -297,7 +297,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
               const pollId = message.poll_id;
               const poll = pollId && client.polls.fromState(pollId);
               return pollId && poll ? (
-                <Poll key={`poll_${message.poll_id}`} message={message} poll={poll} />
+                <Poll key={`poll_${messageContentOrderIndex}`} message={message} poll={poll} />
               ) : null;
             }
             case 'location':

package/src/components/MessageList/MessageFlashList.tsx

@@ -55,9 +55,11 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback, useStateStore } from '../../hooks';
+import { isVideoPlayerAvailable } from '../../native';
 import { bumpOverlayLayoutRevision, useHasActiveId } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { FileTypes } from '../../types/types';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 import { excludeCanceledUploadNotifications } from '../Notifications/notificationFilters';
@@ -222,10 +224,61 @@ type MessageFlashListPropsWithContext = Pick<
 
 const WAIT_FOR_SCROLL_TIMEOUT = 0;
 
+// Classify an attachment bearing message by its primary shape so FlashList only
+// recycles same shaped cells (means less work to rerender). Gallery/media is the
+// heaviest subtree to mount, so we short circuit to it as soon as we see one gallery
+// image/video nad this keeps gallery cells recycling only with other gallery cells,
+// so the Gallery subtree reconciles on rebind instead of unmount & remount. Mirrors
+// the attachment categorization in Message.
+const getAttachmentItemType = (message: LocalMessage) => {
+  const attachments = message.attachments ?? [];
+  let hasGiphy = false;
+  let hasAudio = false;
+  let hasFile = false;
+  let hasCard = false;
+  for (const attachment of attachments) {
+    const isGalleryImage =
+      attachment.type === FileTypes.Image &&
+      !attachment.og_scrape_url &&
+      !attachment.title_link &&
+      (!!attachment.image_url || !!attachment.thumb_url);
+    const isGalleryVideo =
+      attachment.type === FileTypes.Video && !attachment.og_scrape_url && isVideoPlayerAvailable();
+    if (isGalleryImage || isGalleryVideo) {
+      return 'message-with-gallery';
+    }
+    if (attachment.type === FileTypes.Giphy) {
+      hasGiphy = true;
+    } else if (
+      attachment.type === FileTypes.Audio ||
+      attachment.type === FileTypes.VoiceRecording
+    ) {
+      hasAudio = true;
+    } else if (attachment.type === FileTypes.File) {
+      hasFile = true;
+    } else if (attachment.og_scrape_url || attachment.title_link) {
+      hasCard = true;
+    }
+  }
+  if (hasGiphy) {
+    return 'message-with-giphy';
+  }
+  if (hasAudio) {
+    return 'message-with-audio';
+  }
+  if (hasFile) {
+    return 'message-with-file';
+  }
+  if (hasCard) {
+    return 'message-with-card';
+  }
+  return 'message-with-attachments';
+};
+
 const getItemTypeInternal = (message: LocalMessage) => {
   if (message.type === 'regular') {
     if ((message.attachments?.length ?? 0) > 0) {
-      return 'message-with-attachments';
+      return getAttachmentItemType(message);
     }
 
     if (message.poll_id) {
@@ -1079,7 +1132,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           <FlashList
             contentContainerStyle={flatListContentContainerStyle}
             data={processedMessageList}
-            drawDistance={800}
+            drawDistance={250}
             getItemType={getItemTypeInternal}
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.5.1"
+  "version": "9.5.2-beta.2"
 }