fix: remounting specific attachments and jittery fast animations (#3086)

Author: isekovanic

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';
@@ -47,13 +47,9 @@ const FileAttachmentGroupWithContext = <
   props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,
 ) => {
   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) => {

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -239,7 +239,7 @@ const MessageSimpleWithContext = <
           if (isHorizontalPanning) {
             state.activate();
             isSwiping.value = true;
-            runOnJS(setIsBeingSwiped)(true);
+            runOnJS(setIsBeingSwiped)(isSwiping.value);
           } else {
             state.fail();
           }
@@ -259,6 +259,7 @@ const MessageSimpleWithContext = <
               runOnJS(triggerHaptic)('impactMedium');
             }
           }
+          isSwiping.value = false;
           translateX.value = withSpring(
             0,
             {
@@ -268,41 +269,34 @@ const MessageSimpleWithContext = <
               stiffness: 1,
             },
             () => {
-              isSwiping.value = false;
-              runOnJS(setIsBeingSwiped)(false);
+              runOnJS(setIsBeingSwiped)(isSwiping.value);
             },
           );
         }),
     [isSwiping, messageSwipeToReplyHitSlop, onSwipeToReply, touchStart, translateX, triggerHaptic],
   );
 
   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,
+          ),
+        },
+      ],
+    }),
     [],
   );