From 169e374fe108fb491a86f1b3df393b8b43568571 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Tue, 13 May 2025 12:52:16 +0200
Subject: [PATCH] fix: remounting specific attachments and jittery fast anims

---
 .../Attachment/FileAttachmentGroup.tsx        | 12 ++---
 .../Message/MessageSimple/MessageSimple.tsx   | 44 ++++++++-----------
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/package/src/components/Attachment/FileAttachmentGroup.tsx b/package/src/components/Attachment/FileAttachmentGroup.tsx
index dc9247b02a..91cc64544f 100644
--- a/package/src/components/Attachment/FileAttachmentGroup.tsx
+++ b/package/src/components/Attachment/FileAttachmentGroup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
@@ -39,13 +39,9 @@ type FilesToDisplayType = Attachment & {
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
   const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
-  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);
-
-  useEffect(() => {
-    setFilesToDisplay(
-      files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
-    );
-  }, [files]);
+  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>(() =>
+    files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
+  );
 
   // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
   const onLoad = (index: string, duration: number) => {
diff --git a/package/src/components/Message/MessageSimple/MessageSimple.tsx b/package/src/components/Message/MessageSimple/MessageSimple.tsx
index ca2e7f0b74..2c0c07c994 100644
--- a/package/src/components/Message/MessageSimple/MessageSimple.tsx
+++ b/package/src/components/Message/MessageSimple/MessageSimple.tsx
@@ -233,7 +233,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
           if (isHorizontalPanning) {
             state.activate();
             isSwiping.value = true;
-            runOnJS(setIsBeingSwiped)(true);
+            runOnJS(setIsBeingSwiped)(isSwiping.value);
           } else {
             state.fail();
           }
@@ -253,6 +253,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
               runOnJS(triggerHaptic)('impactMedium');
             }
           }
+          isSwiping.value = false;
           translateX.value = withSpring(
             0,
             {
@@ -262,8 +263,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
               stiffness: 1,
             },
             () => {
-              isSwiping.value = false;
-              runOnJS(setIsBeingSwiped)(false);
+              runOnJS(setIsBeingSwiped)(isSwiping.value);
             },
           );
         }),
@@ -271,32 +271,26 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
   );
 
   const messageBubbleAnimatedStyle = useAnimatedStyle(
-    () =>
-      isSwiping.value
-        ? {
-            transform: [{ translateX: translateX.value }],
-          }
-        : {},
+    () => ({
+      transform: [{ translateX: translateX.value }],
+    }),
     [],
   );
 
   const swipeContentAnimatedStyle = useAnimatedStyle(
-    () =>
-      isSwiping.value
-        ? {
-            opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
-            transform: [
-              {
-                translateX: interpolate(
-                  translateX.value,
-                  [0, THRESHOLD],
-                  [-THRESHOLD, 0],
-                  Extrapolation.CLAMP,
-                ),
-              },
-            ],
-          }
-        : {},
+    () => ({
+      opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
+      transform: [
+        {
+          translateX: interpolate(
+            translateX.value,
+            [0, THRESHOLD],
+            [-THRESHOLD, 0],
+            Extrapolation.CLAMP,
+          ),
+        },
+      ],
+    }),
     [],
   );