diff --git a/package/src/components/Message/MessageSimple/MessageBubble.tsx b/package/src/components/Message/MessageSimple/MessageBubble.tsx
index 773cfd8183..d53cee18bb 100644
--- a/package/src/components/Message/MessageSimple/MessageBubble.tsx
+++ b/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',
   },
 });
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index 436bb023d3..af67127f37 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/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",
                               },
                               {},
+                              {},
                             ]
                           }
                         >