Next Release (#3701)

## 🎯 Goal

<!-- Describe why we are making this change -->

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

---------

Co-authored-by: Stream SDK Bot <60655709+Stream-SDK-Bot@users.noreply.github.com>
Co-authored-by: Stream Bot <runner@runnervmkkn4f.dxzc3wllrnselczynunk3nwtgh.cx.internal.cloudapp.net>
Co-authored-by: Zita Szupera <zita.szupera@getstream.io>

Author: 4 people

README.md

@@ -10,7 +10,7 @@
 [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native)
 [![Build Status](https://github.com/GetStream/stream-chat-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/GetStream/stream-chat-react-native/actions)
 [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative)
-![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-1972%20KB-blue)
+![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-1974%20KB-blue)
 
 <img align="right" src="https://getstream.imgix.net/images/ios-chat-tutorial/iphone_chat_art@3x.png?auto=format,enhance" width="50%" />
 

package/expo-package/src/optionalDependencies/getLocalAssetUri.ts

@@ -3,9 +3,13 @@ import { Platform } from 'react-native';
 let MediaLibrary;
 
 try {
-  MediaLibrary = require('expo-media-library');
+  MediaLibrary = require('expo-media-library/legacy');
 } catch (e) {
-  // do nothing
+  try {
+    MediaLibrary = require('expo-media-library');
+  } catch (e) {
+    // do nothing
+  }
 }
 
 if (!MediaLibrary) {

package/expo-package/src/optionalDependencies/getPhotos.ts

@@ -10,9 +10,13 @@ import { getLocalAssetUri } from './getLocalAssetUri';
 let MediaLibrary;
 
 try {
-  MediaLibrary = require('expo-media-library');
+  MediaLibrary = require('expo-media-library/legacy');
 } catch (e) {
-  // do nothing
+  try {
+    MediaLibrary = require('expo-media-library');
+  } catch (e) {
+    // do nothing
+  }
 }
 
 if (!MediaLibrary) {

package/expo-package/src/optionalDependencies/iOS14RefreshGallerySelection.ts

@@ -3,9 +3,13 @@ import { Platform } from 'react-native';
 let MediaLibrary;
 
 try {
-  MediaLibrary = require('expo-media-library');
+  MediaLibrary = require('expo-media-library/legacy');
 } catch (e) {
-  // do nothing
+  try {
+    MediaLibrary = require('expo-media-library');
+  } catch (e) {
+    // do nothing
+  }
 }
 
 if (!MediaLibrary) {

package/expo-package/src/optionalDependencies/oniOS14GalleryLibrarySelectionChange.ts

@@ -3,9 +3,13 @@ import { Platform } from 'react-native';
 let MediaLibrary;
 
 try {
-  MediaLibrary = require('expo-media-library');
+  MediaLibrary = require('expo-media-library/legacy');
 } catch (e) {
-  // do nothing
+  try {
+    MediaLibrary = require('expo-media-library');
+  } catch (e) {
+    // do nothing
+  }
 }
 
 if (!MediaLibrary) {

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) {