stream-chat-react-native-core 9.1.0 → 9.1.1-beta.2

package/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-353%20KB-blue)
+![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-360%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/lib/commonjs/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.js

@@ -21,14 +21,22 @@ var _this = this,
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var END_ANCHOR_THRESHOLD = 16;
-var END_SHRINK_COMPENSATION_DURATION = 200;
+var ATTACHMENT_PREVIEW_ANIMATION_DURATION = 200;
+var TRAILING_SPACER_RELEASE_DELAY = ATTACHMENT_PREVIEW_ANIMATION_DURATION + 80;
 var MAX_AUDIO_ATTACHMENTS_CONTAINER_WIDTH = 560;
+var attachmentPreviewEntering = _reactNativeReanimated.ZoomIn.duration(ATTACHMENT_PREVIEW_ANIMATION_DURATION);
+var attachmentPreviewExiting = _reactNativeReanimated.ZoomOut.duration(ATTACHMENT_PREVIEW_ANIMATION_DURATION);
+var attachmentPreviewLayout = _reactNativeReanimated.LinearTransition.duration(ATTACHMENT_PREVIEW_ANIMATION_DURATION);
 var AttachmentPreviewCell = function AttachmentPreviewCell(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    onLayout = _ref.onLayout,
+    style = _ref.style;
   return (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    entering: _reactNativeReanimated.ZoomIn.duration(200),
-    exiting: _reactNativeReanimated.ZoomOut.duration(200),
-    layout: _reactNativeReanimated.LinearTransition.duration(200),
+    entering: attachmentPreviewEntering,
+    exiting: attachmentPreviewExiting,
+    layout: attachmentPreviewLayout,
+    onLayout: onLayout,
+    style: style,
     children: children
   });
 };
@@ -39,6 +47,13 @@ var ItemSeparatorComponent = function ItemSeparatorComponent() {
     style: [styles.itemSeparator, itemSeparator]
   });
 };
+var useLazyRef = function useLazyRef(getInitialValue) {
+  var ref = (0, _react.useRef)(null);
+  if (ref.current === null) {
+    ref.current = getInitialValue();
+  }
+  return ref;
+};
 var getIsAudioAttachmentPreview = function getIsAudioAttachmentPreview(soundPackageAvailable) {
   return function (attachment) {
     return (0, _streamChat.isLocalVoiceRecordingAttachment)(attachment) || soundPackageAvailable && (0, _streamChat.isLocalAudioAttachment)(attachment);
@@ -58,146 +73,280 @@ var UnMemoizedAttachmentUploadPreviewList = function UnMemoizedAttachmentUploadP
     attachments = _useAttachmentManager.attachments;
   var isRTL = _reactNative.I18nManager.isRTL;
   var attachmentListRef = (0, _react.useRef)(null);
-  var soundPackageAvailable = (0, _native.isSoundPackageAvailable)();
-  var isAudioAttachmentPreview = getIsAudioAttachmentPreview(soundPackageAvailable);
+  var soundPackageAvailable = (0, _react.useMemo)(function () {
+    return (0, _native.isSoundPackageAvailable)();
+  }, []);
+  var isAudioAttachmentPreview = (0, _react.useMemo)(function () {
+    return getIsAudioAttachmentPreview(soundPackageAvailable);
+  }, [soundPackageAvailable]);
+  var dataRef = useLazyRef(function () {
+    return [];
+  });
+  var previousDataRef = useLazyRef(function () {
+    return [];
+  });
   var previousNonAudioAttachmentsLengthRef = (0, _react.useRef)(0);
   var contentWidthRef = (0, _react.useRef)(0);
   var itemsContentWidthRef = (0, _react.useRef)(0);
   var viewportWidthRef = (0, _react.useRef)(0);
   var scrollOffsetXRef = (0, _react.useRef)(0);
-  var rtlLeadingSpacerWidthRef = (0, _react.useRef)(0);
-  var endShrinkCompensationX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    rtlLeadingSpacerWidth = _useState2[0],
-    setRtlLeadingSpacerWidth = _useState2[1];
-  var previewAttachments = attachments.filter(function (attachment) {
-    return !(audioRecordingSendOnComplete && (0, _streamChat.isLocalVoiceRecordingAttachment)(attachment));
+  var attachmentCellWidthsRef = useLazyRef(function () {
+    return {};
+  });
+  var preparedRemovalIdsRef = useLazyRef(function () {
+    return new Set();
   });
-  var audioAttachments = previewAttachments.filter(isAudioAttachmentPreview);
-  var nonAudioAttachments = previewAttachments.filter(function (attachment) {
-    return !isAudioAttachmentPreview(attachment);
+  var spacerReleaseFramesRef = useLazyRef(function () {
+    return new Set();
   });
-  var data = isRTL ? nonAudioAttachments.toReversed() : nonAudioAttachments;
+  var spacerReleaseTimeoutsRef = useLazyRef(function () {
+    return new Set();
+  });
+  var shouldScrollToEndOnContentSizeChangeRef = (0, _react.useRef)(false);
+  var trailingSpacerWidthRef = (0, _react.useRef)(0);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    trailingSpacerWidth = _useState2[0],
+    setTrailingSpacerWidth = _useState2[1];
+  var previewAttachments = (0, _react.useMemo)(function () {
+    return attachments.filter(function (attachment) {
+      return !(audioRecordingSendOnComplete && (0, _streamChat.isLocalVoiceRecordingAttachment)(attachment));
+    });
+  }, [attachments, audioRecordingSendOnComplete]);
+  var audioAttachments = (0, _react.useMemo)(function () {
+    return previewAttachments.filter(isAudioAttachmentPreview);
+  }, [isAudioAttachmentPreview, previewAttachments]);
+  var nonAudioAttachments = (0, _react.useMemo)(function () {
+    return previewAttachments.filter(function (attachment) {
+      return !isAudioAttachmentPreview(attachment);
+    });
+  }, [isAudioAttachmentPreview, previewAttachments]);
+  var data = (0, _react.useMemo)(function () {
+    return isRTL ? nonAudioAttachments.toReversed() : nonAudioAttachments;
+  }, [isRTL, nonAudioAttachments]);
   var _useTheme2 = (0, _ThemeContext.useTheme)(),
     _useTheme2$theme$mess = _useTheme2.theme.messageComposer.attachmentUploadPreviewList,
     audioAttachmentsContainer = _useTheme2$theme$mess.audioAttachmentsContainer,
     flatList = _useTheme2$theme$mess.flatList;
-  var updateRtlLeadingSpacerWidth = (0, _react.useCallback)(function (itemsWidth, viewportWidth) {
-    if (!isRTL || !viewportWidth) {
-      if (rtlLeadingSpacerWidthRef.current !== 0) {
-        rtlLeadingSpacerWidthRef.current = 0;
-        setRtlLeadingSpacerWidth(0);
+  var scrollToOffset = (0, _react.useCallback)(function (offset) {
+    var _attachmentListRef$cu;
+    var animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var nextOffset = Math.max(0, offset);
+    (_attachmentListRef$cu = attachmentListRef.current) == null || _attachmentListRef$cu.scrollTo({
+      animated: animated,
+      x: nextOffset
+    });
+    scrollOffsetXRef.current = nextOffset;
+  }, []);
+  var setTrailingSpacerLayoutWidth = (0, _react.useCallback)(function (width) {
+    var nextWidth = Math.max(0, width);
+    trailingSpacerWidthRef.current = nextWidth;
+    setTrailingSpacerWidth(nextWidth);
+  }, []);
+  var prepareTrailingSpacer = (0, _react.useCallback)(function (width) {
+    if (width <= 0) {
+      return;
+    }
+    var nextWidth = trailingSpacerWidthRef.current + width;
+    setTrailingSpacerLayoutWidth(nextWidth);
+  }, [setTrailingSpacerLayoutWidth]);
+  var scheduleTrailingSpacerRelease = (0, _react.useCallback)(function (width) {
+    if (width <= 0) {
+      return;
+    }
+    var timeout = setTimeout(function () {
+      spacerReleaseTimeoutsRef.current.delete(timeout);
+      var firstFrame = requestAnimationFrame(function () {
+        spacerReleaseFramesRef.current.delete(firstFrame);
+        var secondFrame = requestAnimationFrame(function () {
+          spacerReleaseFramesRef.current.delete(secondFrame);
+          setTrailingSpacerLayoutWidth(trailingSpacerWidthRef.current - width);
+        });
+        spacerReleaseFramesRef.current.add(secondFrame);
+      });
+      spacerReleaseFramesRef.current.add(firstFrame);
+    }, TRAILING_SPACER_RELEASE_DELAY);
+    spacerReleaseTimeoutsRef.current.add(timeout);
+  }, [setTrailingSpacerLayoutWidth, spacerReleaseFramesRef, spacerReleaseTimeoutsRef]);
+  var getRemovalMetrics = (0, _react.useCallback)(function (ids, baseData) {
+    var removedIds = new Set(ids);
+    var fallbackCellWidth = baseData.length ? itemsContentWidthRef.current / baseData.length : 0;
+    var offsetBefore = scrollOffsetXRef.current;
+    var oldMaxOffset = Math.max(0, itemsContentWidthRef.current - viewportWidthRef.current);
+    var wasNearEnd = oldMaxOffset - offsetBefore <= END_ANCHOR_THRESHOLD;
+    var contentOffset = 0;
+    var removedContentWidth = 0;
+    var anchorCorrectionWidth = 0;
+    baseData.forEach(function (attachment) {
+      var _attachmentCellWidths;
+      var attachmentId = attachment.localMetadata.id;
+      var cellWidth = (_attachmentCellWidths = attachmentCellWidthsRef.current[attachmentId]) != null ? _attachmentCellWidths : fallbackCellWidth;
+      if (removedIds.has(attachmentId)) {
+        removedContentWidth += cellWidth;
+        if (contentOffset <= offsetBefore) {
+          anchorCorrectionWidth += cellWidth;
+        }
       }
+      contentOffset += cellWidth;
+    });
+    if (!removedContentWidth) {
+      return {
+        removedContentWidth: 0,
+        scrollCorrectionWidth: 0
+      };
+    }
+    return {
+      removedContentWidth: removedContentWidth,
+      scrollCorrectionWidth: wasNearEnd ? removedContentWidth : Math.min(anchorCorrectionWidth, removedContentWidth)
+    };
+  }, [attachmentCellWidthsRef]);
+  var applyRemovalScrollCorrection = (0, _react.useCallback)(function (removedContentWidth, scrollCorrectionWidth) {
+    if (removedContentWidth <= 0 || isRTL) {
       return;
     }
-    var nextSpacerWidth = Math.max(0, viewportWidth - itemsWidth);
-    if (rtlLeadingSpacerWidthRef.current === nextSpacerWidth) {
+    var offsetBefore = scrollOffsetXRef.current;
+    var nextContentWidth = Math.max(0, itemsContentWidthRef.current - removedContentWidth);
+    var nextMaxOffset = Math.max(0, nextContentWidth - viewportWidthRef.current);
+    var nextOffset = Math.min(nextMaxOffset, Math.max(0, offsetBefore - scrollCorrectionWidth));
+    if (nextOffset !== offsetBefore) {
+      scrollToOffset(nextOffset, true);
+    }
+  }, [isRTL, scrollToOffset]);
+  var prepareForRemoval = (0, _react.useCallback)(function (ids, baseData) {
+    var _getRemovalMetrics = getRemovalMetrics(ids, baseData),
+      removedContentWidth = _getRemovalMetrics.removedContentWidth,
+      scrollCorrectionWidth = _getRemovalMetrics.scrollCorrectionWidth;
+    if (!removedContentWidth) {
       return;
     }
-    rtlLeadingSpacerWidthRef.current = nextSpacerWidth;
-    setRtlLeadingSpacerWidth(nextSpacerWidth);
-  }, [isRTL]);
-  var renderItem = (0, _react.useCallback)(function (_ref2) {
-    var item = _ref2.item;
-    if ((0, _streamChat.isLocalImageAttachment)(item)) {
-      return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
-        children: (0, _jsxRuntime.jsx)(ImageAttachmentUploadPreview, {
-          attachment: item,
-          handleRetry: attachmentManager.uploadAttachment,
-          removeAttachments: attachmentManager.removeAttachments
-        })
+    if (!isRTL) {
+      prepareTrailingSpacer(removedContentWidth);
+    }
+    applyRemovalScrollCorrection(removedContentWidth, scrollCorrectionWidth);
+    ids.forEach(function (id) {
+      return preparedRemovalIdsRef.current.add(id);
+    });
+  }, [applyRemovalScrollCorrection, getRemovalMetrics, isRTL, preparedRemovalIdsRef, prepareTrailingSpacer]);
+  var removeAttachments = (0, _react.useCallback)(function (ids) {
+    prepareForRemoval(ids, dataRef.current);
+    attachmentManager.removeAttachments(ids);
+  }, [attachmentManager, dataRef, prepareForRemoval]);
+  (0, _react.useLayoutEffect)(function () {
+    var previousData = previousDataRef.current;
+    var nextIds = new Set(data.map(function (attachment) {
+      return attachment.localMetadata.id;
+    }));
+    var removedIds = previousData.map(function (attachment) {
+      return attachment.localMetadata.id;
+    }).filter(function (id) {
+      return !nextIds.has(id);
+    });
+    if (removedIds.length) {
+      var _getRemovalMetrics2 = getRemovalMetrics(removedIds, previousData),
+        removedContentWidth = _getRemovalMetrics2.removedContentWidth;
+      var unpreparedRemovedIds = removedIds.filter(function (id) {
+        return !preparedRemovalIdsRef.current.has(id);
       });
-    } else if ((0, _streamChat.isLocalVoiceRecordingAttachment)(item)) {
-      return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
-        children: (0, _jsxRuntime.jsx)(AudioAttachmentUploadPreview, {
-          attachment: item,
-          handleRetry: attachmentManager.uploadAttachment,
-          removeAttachments: attachmentManager.removeAttachments
-        })
+      var didPrepareAfterRemovalCommit = unpreparedRemovedIds.length > 0;
+      if (didPrepareAfterRemovalCommit) {
+        prepareForRemoval(unpreparedRemovedIds, previousData);
+      }
+      removedIds.forEach(function (id) {
+        return preparedRemovalIdsRef.current.delete(id);
       });
-    } else if ((0, _streamChat.isLocalAudioAttachment)(item)) {
-      if ((0, _native.isSoundPackageAvailable)()) {
-        return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
-          children: (0, _jsxRuntime.jsx)(AudioAttachmentUploadPreview, {
-            attachment: item,
-            handleRetry: attachmentManager.uploadAttachment,
-            removeAttachments: attachmentManager.removeAttachments
-          })
+      if (!isRTL) {
+        scheduleTrailingSpacerRelease(removedContentWidth);
+      }
+    }
+    previousDataRef.current = data;
+    dataRef.current = data;
+  }, [data, dataRef, getRemovalMetrics, isRTL, preparedRemovalIdsRef, prepareForRemoval, previousDataRef, scheduleTrailingSpacerRelease]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      spacerReleaseFramesRef.current.forEach(cancelAnimationFrame);
+      spacerReleaseFramesRef.current.clear();
+      spacerReleaseTimeoutsRef.current.forEach(clearTimeout);
+      spacerReleaseTimeoutsRef.current.clear();
+    };
+  }, [spacerReleaseFramesRef, spacerReleaseTimeoutsRef]);
+  var renderAttachmentPreview = (0, _react.useCallback)(function (attachment) {
+    if ((0, _streamChat.isLocalImageAttachment)(attachment)) {
+      return (0, _jsxRuntime.jsx)(ImageAttachmentUploadPreview, {
+        attachment: attachment,
+        handleRetry: attachmentManager.uploadAttachment,
+        removeAttachments: removeAttachments
+      });
+    } else if ((0, _streamChat.isLocalVoiceRecordingAttachment)(attachment)) {
+      return (0, _jsxRuntime.jsx)(AudioAttachmentUploadPreview, {
+        attachment: attachment,
+        handleRetry: attachmentManager.uploadAttachment,
+        removeAttachments: removeAttachments
+      });
+    } else if ((0, _streamChat.isLocalAudioAttachment)(attachment)) {
+      if (soundPackageAvailable) {
+        return (0, _jsxRuntime.jsx)(AudioAttachmentUploadPreview, {
+          attachment: attachment,
+          handleRetry: attachmentManager.uploadAttachment,
+          removeAttachments: removeAttachments
         });
       } else {
-        return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
-          children: (0, _jsxRuntime.jsx)(FileAttachmentUploadPreview, {
-            attachment: item,
-            handleRetry: attachmentManager.uploadAttachment,
-            removeAttachments: attachmentManager.removeAttachments
-          })
+        return (0, _jsxRuntime.jsx)(FileAttachmentUploadPreview, {
+          attachment: attachment,
+          handleRetry: attachmentManager.uploadAttachment,
+          removeAttachments: removeAttachments
         });
       }
-    } else if ((0, _streamChat.isVideoAttachment)(item)) {
-      return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
-        children: (0, _jsxRuntime.jsx)(VideoAttachmentUploadPreview, {
-          attachment: item,
-          handleRetry: attachmentManager.uploadAttachment,
-          removeAttachments: attachmentManager.removeAttachments
-        })
+    } else if ((0, _streamChat.isVideoAttachment)(attachment)) {
+      return (0, _jsxRuntime.jsx)(VideoAttachmentUploadPreview, {
+        attachment: attachment,
+        handleRetry: attachmentManager.uploadAttachment,
+        removeAttachments: removeAttachments
       });
-    } else if ((0, _streamChat.isLocalFileAttachment)(item)) {
-      return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
-        children: (0, _jsxRuntime.jsx)(FileAttachmentUploadPreview, {
-          attachment: item,
-          handleRetry: attachmentManager.uploadAttachment,
-          removeAttachments: attachmentManager.removeAttachments
-        })
+    } else if ((0, _streamChat.isLocalFileAttachment)(attachment)) {
+      return (0, _jsxRuntime.jsx)(FileAttachmentUploadPreview, {
+        attachment: attachment,
+        handleRetry: attachmentManager.uploadAttachment,
+        removeAttachments: removeAttachments
       });
     } else return null;
-  }, [AudioAttachmentUploadPreview, FileAttachmentUploadPreview, ImageAttachmentUploadPreview, VideoAttachmentUploadPreview, attachmentManager.removeAttachments, attachmentManager.uploadAttachment]);
+  }, [AudioAttachmentUploadPreview, FileAttachmentUploadPreview, ImageAttachmentUploadPreview, VideoAttachmentUploadPreview, attachmentManager.uploadAttachment, removeAttachments, soundPackageAvailable]);
   var onScrollHandler = (0, _react.useCallback)(function (event) {
     scrollOffsetXRef.current = event.nativeEvent.contentOffset.x;
   }, []);
+  var scrollToEndOffset = (0, _react.useCallback)(function (contentWidth) {
+    var animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (isRTL) {
+      return;
+    }
+    scrollToOffset(Math.max(0, contentWidth - viewportWidthRef.current), animated);
+  }, [isRTL, scrollToOffset]);
   var onLayoutHandler = (0, _react.useCallback)(function (event) {
-    var viewportWidth = event.nativeEvent.layout.width;
-    viewportWidthRef.current = viewportWidth;
-    updateRtlLeadingSpacerWidth(itemsContentWidthRef.current, viewportWidth);
-  }, [updateRtlLeadingSpacerWidth]);
+    viewportWidthRef.current = event.nativeEvent.layout.width;
+  }, []);
+  var onAttachmentCellLayout = (0, _react.useCallback)(function (id, event) {
+    attachmentCellWidthsRef.current[id] = event.nativeEvent.layout.width;
+  }, [attachmentCellWidthsRef]);
   var onContentSizeChangeHandler = (0, _react.useCallback)(function (width) {
-    var itemsContentWidth = isRTL ? Math.max(0, width - rtlLeadingSpacerWidthRef.current) : width;
+    var scrollableContentWidth = width;
+    var itemsContentWidth = Math.max(0, scrollableContentWidth - trailingSpacerWidthRef.current);
     var previousContentWidth = contentWidthRef.current;
     contentWidthRef.current = itemsContentWidth;
     itemsContentWidthRef.current = itemsContentWidth;
-    updateRtlLeadingSpacerWidth(itemsContentWidth, viewportWidthRef.current);
-    if (!previousContentWidth || itemsContentWidth >= previousContentWidth) {
+    if (shouldScrollToEndOnContentSizeChangeRef.current && itemsContentWidth > previousContentWidth) {
+      shouldScrollToEndOnContentSizeChangeRef.current = false;
+      scrollToEndOffset(scrollableContentWidth);
       return;
     }
-    var oldMaxOffset = Math.max(0, previousContentWidth - viewportWidthRef.current);
-    var newMaxOffset = Math.max(0, itemsContentWidth - viewportWidthRef.current);
-    var offsetBefore = scrollOffsetXRef.current;
-    var wasNearEnd = oldMaxOffset - offsetBefore <= END_ANCHOR_THRESHOLD;
-    var overshoot = Math.max(0, offsetBefore - newMaxOffset);
-    var shouldAnchorEnd = wasNearEnd || overshoot > 0;
-    if (!shouldAnchorEnd) {
-      return;
-    }
-    if (overshoot > 0) {
-      var _attachmentListRef$cu;
-      (_attachmentListRef$cu = attachmentListRef.current) == null || _attachmentListRef$cu.scrollToOffset({
-        animated: false,
-        offset: newMaxOffset
-      });
-      scrollOffsetXRef.current = newMaxOffset;
-    }
-    if (isRTL) {
+    if (!previousContentWidth || itemsContentWidth >= previousContentWidth) {
       return;
     }
-    var compensation = newMaxOffset - oldMaxOffset;
-    if (compensation !== 0) {
-      (0, _reactNativeReanimated.cancelAnimation)(endShrinkCompensationX);
-      endShrinkCompensationX.value = compensation;
-      endShrinkCompensationX.value = (0, _reactNativeReanimated.withSpring)(0, {
-        duration: END_SHRINK_COMPENSATION_DURATION
-      });
+    var actualMaxOffset = Math.max(0, scrollableContentWidth - viewportWidthRef.current);
+    var offsetBefore = scrollOffsetXRef.current;
+    var overshoot = Math.max(0, offsetBefore - actualMaxOffset);
+    if (overshoot > END_ANCHOR_THRESHOLD) {
+      scrollToOffset(actualMaxOffset);
     }
-  }, [endShrinkCompensationX, isRTL, updateRtlLeadingSpacerWidth]);
+  }, [scrollToEndOffset, scrollToOffset]);
   (0, _react.useEffect)(function () {
     var previousLength = previousNonAudioAttachmentsLengthRef.current;
     var nextLength = nonAudioAttachments.length;
@@ -206,72 +355,61 @@ var UnMemoizedAttachmentUploadPreviewList = function UnMemoizedAttachmentUploadP
     if (!didAddAttachment) {
       return;
     }
-    (0, _reactNativeReanimated.cancelAnimation)(endShrinkCompensationX);
-    endShrinkCompensationX.value = 0;
-    requestAnimationFrame(function () {
-      var _attachmentListRef$cu2;
-      if (isRTL) {
-        return;
-      }
-      (_attachmentListRef$cu2 = attachmentListRef.current) == null || _attachmentListRef$cu2.scrollToEnd({
-        animated: true
-      });
-    });
-  }, [endShrinkCompensationX, isRTL, nonAudioAttachments.length]);
-  var animatedListWrapperStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
-    return {
-      transform: [{
-        translateX: endShrinkCompensationX.value
-      }]
-    };
-  });
+    shouldScrollToEndOnContentSizeChangeRef.current = true;
+  }, [nonAudioAttachments.length]);
   if (!previewAttachments.length) {
     return null;
   }
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [audioAttachments.length ? (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      entering: _reactNativeReanimated.ZoomIn.duration(200),
-      exiting: _reactNativeReanimated.ZoomOut.duration(200),
-      layout: _reactNativeReanimated.LinearTransition.duration(200),
+      entering: attachmentPreviewEntering,
+      exiting: attachmentPreviewExiting,
+      layout: attachmentPreviewLayout,
       style: [styles.audioAttachmentsContainer, audioAttachmentsContainer],
       children: audioAttachments.map(function (attachment) {
         return (0, _jsxRuntime.jsx)(AttachmentPreviewCell, {
           children: (0, _jsxRuntime.jsx)(AudioAttachmentUploadPreview, {
             attachment: attachment,
             handleRetry: attachmentManager.uploadAttachment,
-            removeAttachments: attachmentManager.removeAttachments
+            removeAttachments: removeAttachments
           })
         }, attachment.localMetadata.id);
       })
     }) : null, data.length ? (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      entering: _reactNativeReanimated.ZoomIn.duration(200),
-      exiting: _reactNativeReanimated.ZoomOut.duration(200),
-      layout: _reactNativeReanimated.LinearTransition.duration(200),
-      children: (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-        style: animatedListWrapperStyle,
-        children: (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-          data: data,
-          horizontal: true,
-          ItemSeparatorComponent: ItemSeparatorComponent,
-          keyExtractor: function keyExtractor(item) {
-            return item.localMetadata.id;
-          },
-          ListHeaderComponent: isRTL && rtlLeadingSpacerWidth > 0 ? (0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: {
-              width: rtlLeadingSpacerWidth
-            }
-          }) : null,
-          onContentSizeChange: onContentSizeChangeHandler,
-          onLayout: onLayoutHandler,
-          onScroll: onScrollHandler,
-          removeClippedSubviews: false,
-          ref: attachmentListRef,
-          renderItem: renderItem,
-          scrollEventThrottle: 16,
-          showsHorizontalScrollIndicator: false,
-          style: [styles.flatList, flatList],
-          testID: 'attachment-upload-preview-list'
-        })
+      entering: attachmentPreviewEntering,
+      exiting: attachmentPreviewExiting,
+      layout: attachmentPreviewLayout,
+      style: styles.flatListContainer,
+      children: (0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+        contentContainerStyle: styles.flatListContentContainer,
+        horizontal: true,
+        onContentSizeChange: onContentSizeChangeHandler,
+        onLayout: onLayoutHandler,
+        onScroll: onScrollHandler,
+        ref: attachmentListRef,
+        scrollEventThrottle: 16,
+        showsHorizontalScrollIndicator: false,
+        style: [styles.flatList, flatList],
+        testID: 'attachment-upload-preview-list',
+        children: [data.map(function (attachment, index) {
+          var attachmentId = attachment.localMetadata.id;
+          return (0, _jsxRuntime.jsxs)(AttachmentPreviewCell, {
+            onLayout: function onLayout(event) {
+              return onAttachmentCellLayout(attachmentId, event);
+            },
+            style: styles.attachmentPreviewCell,
+            children: [index > 0 ? (0, _jsxRuntime.jsx)(ItemSeparatorComponent, {}) : null, (0, _jsxRuntime.jsx)(_reactNative.View, {
+              collapsable: false,
+              style: styles.attachmentPreviewContent,
+              children: renderAttachmentPreview(attachment)
+            })]
+          }, attachmentId);
+        }), !isRTL ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+          pointerEvents: 'none',
+          style: [styles.trailingSpacer, {
+            width: trailingSpacerWidth
+          }]
+        }) : null]
       })
     }) : null]
   });
@@ -281,16 +419,36 @@ var AttachmentUploadPreviewList = exports.AttachmentUploadPreviewList = function
   return (0, _jsxRuntime.jsx)(MemoizedAttachmentUploadPreviewListWithContext, {});
 };
 var styles = _reactNative.StyleSheet.create({
+  attachmentPreviewCell: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    flexShrink: 0
+  },
+  attachmentPreviewContent: {
+    flexShrink: 0
+  },
   audioAttachmentsContainer: {
     maxWidth: MAX_AUDIO_ATTACHMENTS_CONTAINER_WIDTH,
     width: '100%'
   },
   flatList: {
-    overflow: 'visible',
-    direction: 'ltr'
+    direction: 'ltr',
+    flexGrow: 0,
+    overflow: 'visible'
+  },
+  flatListContentContainer: {
+    alignItems: 'flex-start'
+  },
+  flatListContainer: {
+    alignSelf: 'flex-start',
+    flexShrink: 1,
+    maxWidth: '100%'
   },
   itemSeparator: {
     width: _theme.primitives.spacingXs
+  },
+  trailingSpacer: {
+    flexShrink: 0
   }
 });
 AttachmentUploadPreviewList.displayName = 'AttachmentUploadPreviewList{messageComposer{attachmentUploadPreviewList}}';