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

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -1,23 +1,17 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
-  FlatList,
   I18nManager,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  ScrollView,
+  StyleProp,
   StyleSheet,
   View,
+  ViewStyle,
 } from 'react-native';
 
-import Animated, {
-  cancelAnimation,
-  ZoomIn,
-  ZoomOut,
-  LinearTransition,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
+import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import {
   isLocalAudioAttachment,
@@ -39,16 +33,30 @@ import { isSoundPackageAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
 
 const END_ANCHOR_THRESHOLD = 16;
-const END_SHRINK_COMPENSATION_DURATION = 200;
+const ATTACHMENT_PREVIEW_ANIMATION_DURATION = 200;
+const TRAILING_SPACER_RELEASE_DELAY = ATTACHMENT_PREVIEW_ANIMATION_DURATION + 80;
 const MAX_AUDIO_ATTACHMENTS_CONTAINER_WIDTH = 560;
+const attachmentPreviewEntering = ZoomIn.duration(ATTACHMENT_PREVIEW_ANIMATION_DURATION);
+const attachmentPreviewExiting = ZoomOut.duration(ATTACHMENT_PREVIEW_ANIMATION_DURATION);
+const attachmentPreviewLayout = LinearTransition.duration(ATTACHMENT_PREVIEW_ANIMATION_DURATION);
 
 export type AttachmentUploadListPreviewPropsWithContext = Record<string, never>;
 
-const AttachmentPreviewCell = ({ children }: { children: React.ReactNode }) => (
+const AttachmentPreviewCell = ({
+  children,
+  onLayout,
+  style,
+}: {
+  children: React.ReactNode;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  style?: StyleProp<ViewStyle>;
+}) => (
   <Animated.View
-    entering={ZoomIn.duration(200)}
-    exiting={ZoomOut.duration(200)}
-    layout={LinearTransition.duration(200)}
+    entering={attachmentPreviewEntering}
+    exiting={attachmentPreviewExiting}
+    layout={attachmentPreviewLayout}
+    onLayout={onLayout}
+    style={style}
   >
     {children}
   </Animated.View>
@@ -65,6 +73,16 @@ const ItemSeparatorComponent = () => {
   return <View style={[styles.itemSeparator, itemSeparator]} />;
 };
 
+const useLazyRef = <T,>(getInitialValue: () => T) => {
+  const ref = useRef<T | null>(null);
+
+  if (ref.current === null) {
+    ref.current = getInitialValue();
+  }
+
+  return ref as React.RefObject<T>;
+};
+
 const getIsAudioAttachmentPreview =
   (soundPackageAvailable: boolean) =>
   (
@@ -88,25 +106,46 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const isRTL = I18nManager.isRTL;
-  const attachmentListRef = useRef<FlatList<LocalAttachment>>(null);
-  const soundPackageAvailable = isSoundPackageAvailable();
-  const isAudioAttachmentPreview = getIsAudioAttachmentPreview(soundPackageAvailable);
+  const attachmentListRef = useRef<ScrollView>(null);
+  const soundPackageAvailable = useMemo(() => isSoundPackageAvailable(), []);
+  const isAudioAttachmentPreview = useMemo(
+    () => getIsAudioAttachmentPreview(soundPackageAvailable),
+    [soundPackageAvailable],
+  );
+  const dataRef = useLazyRef<LocalAttachment[]>(() => []);
+  const previousDataRef = useLazyRef<LocalAttachment[]>(() => []);
   const previousNonAudioAttachmentsLengthRef = useRef(0);
   const contentWidthRef = useRef(0);
   const itemsContentWidthRef = useRef(0);
   const viewportWidthRef = useRef(0);
   const scrollOffsetXRef = useRef(0);
-  const rtlLeadingSpacerWidthRef = useRef(0);
-  const endShrinkCompensationX = useSharedValue(0);
-  const [rtlLeadingSpacerWidth, setRtlLeadingSpacerWidth] = useState(0);
-  const previewAttachments = attachments.filter(
-    (attachment) => !(audioRecordingSendOnComplete && isLocalVoiceRecordingAttachment(attachment)),
+  const attachmentCellWidthsRef = useLazyRef<Record<string, number>>(() => ({}));
+  const preparedRemovalIdsRef = useLazyRef<Set<string>>(() => new Set());
+  const spacerReleaseFramesRef = useLazyRef<Set<number>>(() => new Set());
+  const spacerReleaseTimeoutsRef = useLazyRef<Set<ReturnType<typeof setTimeout>>>(() => new Set());
+  const shouldScrollToEndOnContentSizeChangeRef = useRef(false);
+  const trailingSpacerWidthRef = useRef(0);
+  const [trailingSpacerWidth, setTrailingSpacerWidth] = useState(0);
+  const previewAttachments = useMemo(
+    () =>
+      attachments.filter(
+        (attachment) =>
+          !(audioRecordingSendOnComplete && isLocalVoiceRecordingAttachment(attachment)),
+      ),
+    [attachments, audioRecordingSendOnComplete],
+  );
+  const audioAttachments = useMemo(
+    () => previewAttachments.filter(isAudioAttachmentPreview),
+    [isAudioAttachmentPreview, previewAttachments],
+  );
+  const nonAudioAttachments = useMemo(
+    () => previewAttachments.filter((attachment) => !isAudioAttachmentPreview(attachment)),
+    [isAudioAttachmentPreview, previewAttachments],
   );
-  const audioAttachments = previewAttachments.filter(isAudioAttachmentPreview);
-  const nonAudioAttachments = previewAttachments.filter(
-    (attachment) => !isAudioAttachmentPreview(attachment),
+  const data = useMemo(
+    () => (isRTL ? nonAudioAttachments.toReversed() : nonAudioAttachments),
+    [isRTL, nonAudioAttachments],
   );
-  const data = isRTL ? nonAudioAttachments.toReversed() : nonAudioAttachments;
 
   const {
     theme: {
@@ -116,90 +155,254 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
     },
   } = useTheme();
 
-  const updateRtlLeadingSpacerWidth = useCallback(
-    (itemsWidth: number, viewportWidth: number) => {
-      if (!isRTL || !viewportWidth) {
-        if (rtlLeadingSpacerWidthRef.current !== 0) {
-          rtlLeadingSpacerWidthRef.current = 0;
-          setRtlLeadingSpacerWidth(0);
+  const scrollToOffset = useCallback((offset: number, animated = false) => {
+    const nextOffset = Math.max(0, offset);
+
+    attachmentListRef.current?.scrollTo({
+      animated,
+      x: nextOffset,
+    });
+    scrollOffsetXRef.current = nextOffset;
+  }, []);
+
+  const setTrailingSpacerLayoutWidth = useCallback((width: number) => {
+    const nextWidth = Math.max(0, width);
+    trailingSpacerWidthRef.current = nextWidth;
+    setTrailingSpacerWidth(nextWidth);
+  }, []);
+
+  const prepareTrailingSpacer = useCallback(
+    (width: number) => {
+      if (width <= 0) {
+        return;
+      }
+
+      const nextWidth = trailingSpacerWidthRef.current + width;
+      setTrailingSpacerLayoutWidth(nextWidth);
+    },
+    [setTrailingSpacerLayoutWidth],
+  );
+
+  const scheduleTrailingSpacerRelease = useCallback(
+    (width: number) => {
+      if (width <= 0) {
+        return;
+      }
+
+      const timeout = setTimeout(() => {
+        spacerReleaseTimeoutsRef.current.delete(timeout);
+
+        const firstFrame = requestAnimationFrame(() => {
+          spacerReleaseFramesRef.current.delete(firstFrame);
+
+          const secondFrame = requestAnimationFrame(() => {
+            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],
+  );
+
+  const getRemovalMetrics = useCallback(
+    (ids: string[], baseData: LocalAttachment[]) => {
+      const removedIds = new Set(ids);
+      const fallbackCellWidth = baseData.length
+        ? itemsContentWidthRef.current / baseData.length
+        : 0;
+      const offsetBefore = scrollOffsetXRef.current;
+      const oldMaxOffset = Math.max(0, itemsContentWidthRef.current - viewportWidthRef.current);
+      const wasNearEnd = oldMaxOffset - offsetBefore <= END_ANCHOR_THRESHOLD;
+      let contentOffset = 0;
+      let removedContentWidth = 0;
+      let anchorCorrectionWidth = 0;
+
+      baseData.forEach((attachment) => {
+        const attachmentId = attachment.localMetadata.id;
+        const cellWidth = attachmentCellWidthsRef.current[attachmentId] ?? fallbackCellWidth;
+
+        if (removedIds.has(attachmentId)) {
+          removedContentWidth += cellWidth;
+          if (contentOffset <= offsetBefore) {
+            anchorCorrectionWidth += cellWidth;
+          }
         }
+
+        contentOffset += cellWidth;
+      });
+
+      if (!removedContentWidth) {
+        return {
+          removedContentWidth: 0,
+          scrollCorrectionWidth: 0,
+        };
+      }
+
+      return {
+        removedContentWidth,
+        scrollCorrectionWidth: wasNearEnd
+          ? removedContentWidth
+          : Math.min(anchorCorrectionWidth, removedContentWidth),
+      };
+    },
+    [attachmentCellWidthsRef],
+  );
+
+  const applyRemovalScrollCorrection = useCallback(
+    (removedContentWidth: number, scrollCorrectionWidth: number) => {
+      if (removedContentWidth <= 0 || isRTL) {
         return;
       }
 
-      const nextSpacerWidth = Math.max(0, viewportWidth - itemsWidth);
-      if (rtlLeadingSpacerWidthRef.current === nextSpacerWidth) {
+      const offsetBefore = scrollOffsetXRef.current;
+      const nextContentWidth = Math.max(0, itemsContentWidthRef.current - removedContentWidth);
+      const nextMaxOffset = Math.max(0, nextContentWidth - viewportWidthRef.current);
+      const nextOffset = Math.min(nextMaxOffset, Math.max(0, offsetBefore - scrollCorrectionWidth));
+
+      if (nextOffset !== offsetBefore) {
+        scrollToOffset(nextOffset, true);
+      }
+    },
+    [isRTL, scrollToOffset],
+  );
+
+  const prepareForRemoval = useCallback(
+    (ids: string[], baseData: LocalAttachment[]) => {
+      const { removedContentWidth, scrollCorrectionWidth } = getRemovalMetrics(ids, baseData);
+
+      if (!removedContentWidth) {
         return;
       }
 
-      rtlLeadingSpacerWidthRef.current = nextSpacerWidth;
-      setRtlLeadingSpacerWidth(nextSpacerWidth);
+      if (!isRTL) {
+        prepareTrailingSpacer(removedContentWidth);
+      }
+      applyRemovalScrollCorrection(removedContentWidth, scrollCorrectionWidth);
+      ids.forEach((id) => preparedRemovalIdsRef.current.add(id));
+    },
+    [
+      applyRemovalScrollCorrection,
+      getRemovalMetrics,
+      isRTL,
+      preparedRemovalIdsRef,
+      prepareTrailingSpacer,
+    ],
+  );
+
+  const removeAttachments = useCallback(
+    (ids: string[]) => {
+      prepareForRemoval(ids, dataRef.current);
+      attachmentManager.removeAttachments(ids);
     },
-    [isRTL],
+    [attachmentManager, dataRef, prepareForRemoval],
   );
 
-  const renderItem = useCallback(
-    ({ item }: { item: LocalAttachment }) => {
-      if (isLocalImageAttachment(item)) {
+  useLayoutEffect(() => {
+    const previousData = previousDataRef.current;
+    const nextIds = new Set(data.map((attachment) => attachment.localMetadata.id));
+    const removedIds = previousData
+      .map((attachment) => attachment.localMetadata.id)
+      .filter((id) => !nextIds.has(id));
+
+    if (removedIds.length) {
+      const { removedContentWidth } = getRemovalMetrics(removedIds, previousData);
+      const unpreparedRemovedIds = removedIds.filter(
+        (id) => !preparedRemovalIdsRef.current.has(id),
+      );
+
+      const didPrepareAfterRemovalCommit = unpreparedRemovedIds.length > 0;
+
+      if (didPrepareAfterRemovalCommit) {
+        prepareForRemoval(unpreparedRemovedIds, previousData);
+      }
+
+      removedIds.forEach((id) => preparedRemovalIdsRef.current.delete(id));
+      if (!isRTL) {
+        scheduleTrailingSpacerRelease(removedContentWidth);
+      }
+    }
+
+    previousDataRef.current = data;
+    dataRef.current = data;
+  }, [
+    data,
+    dataRef,
+    getRemovalMetrics,
+    isRTL,
+    preparedRemovalIdsRef,
+    prepareForRemoval,
+    previousDataRef,
+    scheduleTrailingSpacerRelease,
+  ]);
+
+  useEffect(
+    () => () => {
+      spacerReleaseFramesRef.current.forEach(cancelAnimationFrame);
+      spacerReleaseFramesRef.current.clear();
+      spacerReleaseTimeoutsRef.current.forEach(clearTimeout);
+      spacerReleaseTimeoutsRef.current.clear();
+    },
+    [spacerReleaseFramesRef, spacerReleaseTimeoutsRef],
+  );
+
+  const renderAttachmentPreview = useCallback(
+    (attachment: LocalAttachment) => {
+      if (isLocalImageAttachment(attachment)) {
         return (
-          <AttachmentPreviewCell>
-            <ImageAttachmentUploadPreview
-              attachment={item}
-              handleRetry={attachmentManager.uploadAttachment}
-              removeAttachments={attachmentManager.removeAttachments}
-            />
-          </AttachmentPreviewCell>
+          <ImageAttachmentUploadPreview
+            attachment={attachment}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={removeAttachments}
+          />
         );
-      } else if (isLocalVoiceRecordingAttachment(item)) {
+      } else if (isLocalVoiceRecordingAttachment(attachment)) {
         return (
-          <AttachmentPreviewCell>
+          <AudioAttachmentUploadPreview
+            attachment={attachment}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={removeAttachments}
+          />
+        );
+      } else if (isLocalAudioAttachment(attachment)) {
+        if (soundPackageAvailable) {
+          return (
             <AudioAttachmentUploadPreview
-              attachment={item}
+              attachment={attachment}
               handleRetry={attachmentManager.uploadAttachment}
-              removeAttachments={attachmentManager.removeAttachments}
+              removeAttachments={removeAttachments}
             />
-          </AttachmentPreviewCell>
-        );
-      } else if (isLocalAudioAttachment(item)) {
-        if (isSoundPackageAvailable()) {
-          return (
-            <AttachmentPreviewCell>
-              <AudioAttachmentUploadPreview
-                attachment={item}
-                handleRetry={attachmentManager.uploadAttachment}
-                removeAttachments={attachmentManager.removeAttachments}
-              />
-            </AttachmentPreviewCell>
           );
         } else {
           return (
-            <AttachmentPreviewCell>
-              <FileAttachmentUploadPreview
-                attachment={item}
-                handleRetry={attachmentManager.uploadAttachment}
-                removeAttachments={attachmentManager.removeAttachments}
-              />
-            </AttachmentPreviewCell>
+            <FileAttachmentUploadPreview
+              attachment={attachment}
+              handleRetry={attachmentManager.uploadAttachment}
+              removeAttachments={removeAttachments}
+            />
           );
         }
-      } else if (isVideoAttachment(item)) {
+      } else if (isVideoAttachment(attachment)) {
         return (
-          <AttachmentPreviewCell>
-            <VideoAttachmentUploadPreview
-              attachment={item}
-              handleRetry={attachmentManager.uploadAttachment}
-              removeAttachments={attachmentManager.removeAttachments}
-            />
-          </AttachmentPreviewCell>
+          <VideoAttachmentUploadPreview
+            attachment={attachment}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={removeAttachments}
+          />
         );
-      } else if (isLocalFileAttachment(item)) {
+      } else if (isLocalFileAttachment(attachment)) {
         return (
-          <AttachmentPreviewCell>
-            <FileAttachmentUploadPreview
-              attachment={item}
-              handleRetry={attachmentManager.uploadAttachment}
-              removeAttachments={attachmentManager.removeAttachments}
-            />
-          </AttachmentPreviewCell>
+          <FileAttachmentUploadPreview
+            attachment={attachment}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={removeAttachments}
+          />
         );
       } else return null;
     },
@@ -208,8 +411,9 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
       FileAttachmentUploadPreview,
       ImageAttachmentUploadPreview,
       VideoAttachmentUploadPreview,
-      attachmentManager.removeAttachments,
       attachmentManager.uploadAttachment,
+      removeAttachments,
+      soundPackageAvailable,
     ],
   );
 
@@ -217,62 +421,61 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
     scrollOffsetXRef.current = event.nativeEvent.contentOffset.x;
   }, []);
 
-  const onLayoutHandler = useCallback(
-    (event: LayoutChangeEvent) => {
-      const viewportWidth = event.nativeEvent.layout.width;
-      viewportWidthRef.current = viewportWidth;
-      updateRtlLeadingSpacerWidth(itemsContentWidthRef.current, viewportWidth);
+  const scrollToEndOffset = useCallback(
+    (contentWidth: number, animated = true) => {
+      if (isRTL) {
+        return;
+      }
+
+      scrollToOffset(Math.max(0, contentWidth - viewportWidthRef.current), animated);
+    },
+    [isRTL, scrollToOffset],
+  );
+
+  const onLayoutHandler = useCallback((event: LayoutChangeEvent) => {
+    viewportWidthRef.current = event.nativeEvent.layout.width;
+  }, []);
+
+  const onAttachmentCellLayout = useCallback(
+    (id: string, event: LayoutChangeEvent) => {
+      attachmentCellWidthsRef.current[id] = event.nativeEvent.layout.width;
     },
-    [updateRtlLeadingSpacerWidth],
+    [attachmentCellWidthsRef],
   );
 
   const onContentSizeChangeHandler = useCallback(
     (width: number) => {
-      const itemsContentWidth = isRTL
-        ? Math.max(0, width - rtlLeadingSpacerWidthRef.current)
-        : width;
+      const scrollableContentWidth = width;
+      const itemsContentWidth = Math.max(
+        0,
+        scrollableContentWidth - trailingSpacerWidthRef.current,
+      );
       const 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;
       }
 
-      const oldMaxOffset = Math.max(0, previousContentWidth - viewportWidthRef.current);
-      const newMaxOffset = Math.max(0, itemsContentWidth - viewportWidthRef.current);
-      const offsetBefore = scrollOffsetXRef.current;
-      const wasNearEnd = oldMaxOffset - offsetBefore <= END_ANCHOR_THRESHOLD;
-      const overshoot = Math.max(0, offsetBefore - newMaxOffset);
-      const shouldAnchorEnd = wasNearEnd || overshoot > 0;
-
-      if (!shouldAnchorEnd) {
+      if (!previousContentWidth || itemsContentWidth >= previousContentWidth) {
         return;
       }
 
-      if (overshoot > 0) {
-        attachmentListRef.current?.scrollToOffset({
-          animated: false,
-          offset: newMaxOffset,
-        });
-        scrollOffsetXRef.current = newMaxOffset;
-      }
-
-      if (isRTL) {
-        return;
-      }
+      const actualMaxOffset = Math.max(0, scrollableContentWidth - viewportWidthRef.current);
+      const offsetBefore = scrollOffsetXRef.current;
+      const overshoot = Math.max(0, offsetBefore - actualMaxOffset);
 
-      const compensation = newMaxOffset - oldMaxOffset;
-      if (compensation !== 0) {
-        cancelAnimation(endShrinkCompensationX);
-        endShrinkCompensationX.value = compensation;
-        endShrinkCompensationX.value = withSpring(0, {
-          duration: END_SHRINK_COMPENSATION_DURATION,
-        });
+      if (overshoot > END_ANCHOR_THRESHOLD) {
+        scrollToOffset(actualMaxOffset);
       }
     },
-    [endShrinkCompensationX, isRTL, updateRtlLeadingSpacerWidth],
+    [scrollToEndOffset, scrollToOffset],
   );
 
   useEffect(() => {
@@ -285,20 +488,8 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
       return;
     }
 
-    cancelAnimation(endShrinkCompensationX);
-    endShrinkCompensationX.value = 0;
-    requestAnimationFrame(() => {
-      if (isRTL) {
-        return;
-      }
-
-      attachmentListRef.current?.scrollToEnd({ animated: true });
-    });
-  }, [endShrinkCompensationX, isRTL, nonAudioAttachments.length]);
-
-  const animatedListWrapperStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: endShrinkCompensationX.value }],
-  }));
+    shouldScrollToEndOnContentSizeChangeRef.current = true;
+  }, [nonAudioAttachments.length]);
 
   if (!previewAttachments.length) {
     return null;
@@ -308,9 +499,9 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
     <>
       {audioAttachments.length ? (
         <Animated.View
-          entering={ZoomIn.duration(200)}
-          exiting={ZoomOut.duration(200)}
-          layout={LinearTransition.duration(200)}
+          entering={attachmentPreviewEntering}
+          exiting={attachmentPreviewExiting}
+          layout={attachmentPreviewLayout}
           style={[styles.audioAttachmentsContainer, audioAttachmentsContainer]}
         >
           {audioAttachments.map((attachment) => (
@@ -318,7 +509,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
               <AudioAttachmentUploadPreview
                 attachment={attachment}
                 handleRetry={attachmentManager.uploadAttachment}
-                removeAttachments={attachmentManager.removeAttachments}
+                removeAttachments={removeAttachments}
               />
             </AttachmentPreviewCell>
           ))}
@@ -327,33 +518,46 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
 
       {data.length ? (
         <Animated.View
-          entering={ZoomIn.duration(200)}
-          exiting={ZoomOut.duration(200)}
-          layout={LinearTransition.duration(200)}
+          entering={attachmentPreviewEntering}
+          exiting={attachmentPreviewExiting}
+          layout={attachmentPreviewLayout}
+          style={styles.flatListContainer}
         >
-          <Animated.View style={animatedListWrapperStyle}>
-            <FlatList
-              data={data}
-              horizontal
-              ItemSeparatorComponent={ItemSeparatorComponent}
-              keyExtractor={(item) => item.localMetadata.id}
-              ListHeaderComponent={
-                isRTL && rtlLeadingSpacerWidth > 0 ? (
-                  <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'}
-            />
-          </Animated.View>
+          <ScrollView
+            contentContainerStyle={styles.flatListContentContainer}
+            horizontal
+            onContentSizeChange={onContentSizeChangeHandler}
+            onLayout={onLayoutHandler}
+            onScroll={onScrollHandler}
+            ref={attachmentListRef}
+            scrollEventThrottle={16}
+            showsHorizontalScrollIndicator={false}
+            style={[styles.flatList, flatList]}
+            testID={'attachment-upload-preview-list'}
+          >
+            {data.map((attachment, index) => {
+              const attachmentId = attachment.localMetadata.id;
+
+              return (
+                <AttachmentPreviewCell
+                  key={attachmentId}
+                  onLayout={(event) => onAttachmentCellLayout(attachmentId, event)}
+                  style={styles.attachmentPreviewCell}
+                >
+                  {index > 0 ? <ItemSeparatorComponent /> : null}
+                  <View collapsable={false} style={styles.attachmentPreviewContent}>
+                    {renderAttachmentPreview(attachment)}
+                  </View>
+                </AttachmentPreviewCell>
+              );
+            })}
+            {!isRTL ? (
+              <View
+                pointerEvents={'none'}
+                style={[styles.trailingSpacer, { width: trailingSpacerWidth }]}
+              />
+            ) : null}
+          </ScrollView>
         </Animated.View>
       ) : null}
     </>
@@ -373,17 +577,37 @@ const MemoizedAttachmentUploadPreviewListWithContext = React.memo(
 export const AttachmentUploadPreviewList = () => <MemoizedAttachmentUploadPreviewListWithContext />;
 
 const styles = 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',
+    flexGrow: 0,
+    overflow: 'visible',
+  },
+  flatListContentContainer: {
+    alignItems: 'flex-start',
+  },
+  flatListContainer: {
+    alignSelf: 'flex-start',
+    flexShrink: 1,
+    maxWidth: '100%',
   },
   itemSeparator: {
     width: primitives.spacingXs,
   },
+  trailingSpacer: {
+    flexShrink: 0,
+  },
 });
 
 AttachmentUploadPreviewList.displayName =