diff --git a/package/src/components/Message/MessageSimple/MessageBubble.tsx b/package/src/components/Message/MessageSimple/MessageBubble.tsx
index 773cfd8183..c053ac4d58 100644
--- a/package/src/components/Message/MessageSimple/MessageBubble.tsx
+++ b/package/src/components/Message/MessageSimple/MessageBubble.tsx
@@ -3,7 +3,6 @@ import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
-  Extrapolation,
   interpolate,
   runOnJS,
   useAnimatedStyle,
@@ -138,7 +137,7 @@ export const SwipableMessageBubble = React.memo(
           .onStart(() => {
             translateX.value = 0;
           })
-          .onChange(({ translationX }) => {
+          .onUpdate(({ translationX }) => {
             if (translationX > 0) {
               translateX.value = translationX;
             }
@@ -177,51 +176,32 @@ export const SwipableMessageBubble = React.memo(
       ],
     );
 
-    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, { 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} />
         </View>
       </GestureDetector>
     );
@@ -232,8 +212,11 @@ const styles = StyleSheet.create({
   contentWrapper: {
     alignItems: 'center',
     flexDirection: 'row',
+    width: 200,
   },
   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..ff0886b6b7 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -378,8 +378,12 @@ exports[`Thread should match thread snapshot 1`] = `
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
+                                "width": 200,
                               },
                               {},
+                              {
+                                "width": 0,
+                              },
                             ]
                           }
                         >
@@ -389,6 +393,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
+                                  "width": 200,
                                 },
                                 {},
                               ]
@@ -747,8 +752,12 @@ exports[`Thread should match thread snapshot 1`] = `
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
+                                "width": 200,
                               },
                               {},
+                              {
+                                "width": 0,
+                              },
                             ]
                           }
                         >
@@ -758,6 +767,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
+                                  "width": 200,
                                 },
                                 {},
                               ]
@@ -1154,8 +1164,12 @@ exports[`Thread should match thread snapshot 1`] = `
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
+                                "width": 200,
                               },
                               {},
+                              {
+                                "width": 0,
+                              },
                             ]
                           }
                         >
@@ -1165,6 +1179,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
+                                  "width": 200,
                                 },
                                 {},
                               ]
@@ -1527,8 +1542,12 @@ exports[`Thread should match thread snapshot 1`] = `
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
+                                "width": 200,
                               },
                               {},
+                              {
+                                "width": 0,
+                              },
                             ]
                           }
                         >
@@ -1538,6 +1557,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
+                                  "width": 200,
                                 },
                                 {},
                               ]