perf: prevent unmounting MessageBubble when STR happens (#3281)

## 🎯 Goal

This PR provides a performance improvement for the swipe-to-reply
functionality, where we keep:

- Keeps scrolling performance the same (animated views do not pollute
the virtual DOM)
- Renders only one `Animated.View` (conditionally)
- Animates through pushing out the rest of the content rather than
displaying old content

## 🛠 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

Author: isekovanic

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

@@ -1,9 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { SetStateAction, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
-  Extrapolation,
   interpolate,
   runOnJS,
   useAnimatedStyle,
@@ -17,6 +16,7 @@ import { ReactionListTopProps } from './ReactionList/ReactionListTop';
 
 import { MessagesContextValue, useTheme } from '../../../contexts';
 
+import { useStableCallback } from '../../../hooks';
 import { NativeHandlers } from '../../../native';
 
 export type MessageBubbleProps = Pick<
@@ -105,6 +105,14 @@ export const SwipableMessageBubble = React.memo(
 
     const triggerHaptic = NativeHandlers.triggerHaptic;
 
+    const setMessageContentWidth = useStableCallback((valueOrCallback: SetStateAction<number>) => {
+      if (typeof valueOrCallback === 'number') {
+        props.setMessageContentWidth(Math.ceil(valueOrCallback));
+        return;
+      }
+      props.setMessageContentWidth(valueOrCallback);
+    });
+
     const swipeGesture = useMemo(
       () =>
         Gesture.Pan()
@@ -167,61 +175,48 @@ export const SwipableMessageBubble = React.memo(
             );
           }),
       [
-        isSwiping,
         messageSwipeToReplyHitSlop,
-        onSwipe,
         touchStart,
+        isSwiping,
+        shouldRenderSwipeableWrapper,
         translateX,
+        onSwipe,
         triggerHaptic,
-        shouldRenderSwipeableWrapper,
       ],
     );
 
-    const messageBubbleAnimatedStyle = useAnimatedStyle(
-      () => ({
-        transform: [{ translateX: translateX.value }],
-      }),
-      [],
-    );
-
     const swipeContentAnimatedStyle = useAnimatedStyle(
       () => ({
         opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
-        transform: [
-          {
-            translateX: interpolate(
-              translateX.value,
-              [0, SWIPABLE_THRESHOLD],
-              [-SWIPABLE_THRESHOLD, 0],
-              Extrapolation.CLAMP,
-            ),
-          },
-        ],
+        width: translateX.value,
       }),
       [],
     );
 
     return (
       <GestureDetector gesture={swipeGesture}>
-        <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
+        <View
+          hitSlop={messageSwipeToReplyHitSlop}
+          style={[
+            styles.contentWrapper,
+            contentWrapper,
+            props.messageContentWidth > 0 && shouldRenderAnimatedWrapper
+              ? { width: props.messageContentWidth }
+              : {},
+          ]}
+        >
           {shouldRenderAnimatedWrapper ? (
-            <>
-              <AnimatedWrapper
-                style={[
-                  styles.swipeContentContainer,
-                  swipeContentAnimatedStyle,
-                  swipeContentContainer,
-                ]}
-              >
-                {MessageSwipeContent ? <MessageSwipeContent /> : null}
-              </AnimatedWrapper>
-              <AnimatedWrapper pointerEvents='box-none' style={messageBubbleAnimatedStyle}>
-                <MessageBubble {...messageBubbleProps} />
-              </AnimatedWrapper>
-            </>
-          ) : (
-            <MessageBubble {...messageBubbleProps} />
-          )}
+            <AnimatedWrapper
+              style={[
+                styles.swipeContentContainer,
+                swipeContentAnimatedStyle,
+                swipeContentContainer,
+              ]}
+            >
+              {MessageSwipeContent ? <MessageSwipeContent /> : null}
+            </AnimatedWrapper>
+          ) : null}
+          <MessageBubble {...messageBubbleProps} setMessageContentWidth={setMessageContentWidth} />
         </View>
       </GestureDetector>
     );
@@ -234,6 +229,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   swipeContentContainer: {
-    position: 'absolute',
+    flexShrink: 0,
+    overflow: 'hidden',
+    position: 'relative',
   },
 });

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -380,6 +380,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 "flexDirection": "row",
                               },
                               {},
+                              {},
                             ]
                           }
                         >
@@ -749,6 +750,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 "flexDirection": "row",
                               },
                               {},
+                              {},
                             ]
                           }
                         >
@@ -1156,6 +1158,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 "flexDirection": "row",
                               },
                               {},
+                              {},
                             ]
                           }
                         >
@@ -1529,6 +1532,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 "flexDirection": "row",
                               },
                               {},
+                              {},
                             ]
                           }
                         >