stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.3

package/lib/typescript/components/Message/MessageItemView/MessageContent.d.ts

@@ -4,7 +4,6 @@ import { MessageContextValue } from '../../../contexts/messageContext/MessageCon
 import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 export type MessageContentPropsWithContext = Pick<MessageContextValue, 'alignment' | 'goToMessage' | 'groupStyles' | 'isMyMessage' | 'message' | 'messageContentOrder' | 'onLongPress' | 'onPress' | 'onPressIn' | 'otherAttachments' | 'preventPress' | 'threadList' | 'isMessageAIGenerated'> & Pick<MessagesContextValue, 'additionalPressableProps' | 'Attachment' | 'enableMessageGroupingByUser' | 'FileAttachmentGroup' | 'Gallery' | 'isAttachmentEqual' | 'MessageContentBottomView' | 'MessageContentLeadingView' | 'MessageLocation' | 'MessageContentTrailingView' | 'MessageContentTopView' | 'myMessageTheme' | 'Reply' | 'StreamingMessageView'> & Pick<TranslationContextValue, 't'> & {
-    setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
     /**
      * Background color for the message content
      */
@@ -29,7 +28,7 @@ export type MessageContentPropsWithContext = Pick<MessageContextValue, 'alignmen
     hidePaddingHorizontal?: boolean;
     hidePaddingBottom?: boolean;
 };
-export type MessageContentProps = Partial<Omit<MessageContentPropsWithContext, 'setMessageContentWidth'>> & Pick<MessageContentPropsWithContext, 'setMessageContentWidth'>;
+export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 /**
  * Child of MessageItemView that displays a message's content
  */

package/lib/typescript/components/Message/MessageItemView/MessageContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/MessageItemView/MessageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,UAAU,EAKX,MAAM,cAAc,CAAC;AAKtB,OAAO,EACL,mBAAmB,EAEpB,MAAM,iDAAiD,CAAC;AAEzD,OAAO,EACL,oBAAoB,EAErB,MAAM,mDAAmD,CAAC;AAE3D,OAAO,EACL,uBAAuB,EAExB,MAAM,yDAAyD,CAAC;AA+BjE,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,mBAAmB,EACjB,WAAW,GACX,aAAa,GACb,aAAa,GACb,aAAa,GACb,SAAS,GACT,qBAAqB,GACrB,aAAa,GACb,SAAS,GACT,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,YAAY,GACZ,sBAAsB,CACzB,GACC,IAAI,CACF,oBAAoB,EAClB,0BAA0B,GAC1B,YAAY,GACZ,6BAA6B,GAC7B,qBAAqB,GACrB,SAAS,GACT,mBAAmB,GACnB,0BAA0B,GAC1B,2BAA2B,GAC3B,iBAAiB,GACjB,4BAA4B,GAC5B,uBAAuB,GACvB,gBAAgB,GAChB,OAAO,GACP,sBAAsB,CACzB,GACD,IAAI,CAAC,uBAAuB,EAAE,GAAG,CAAC,GAAG;IACnC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACrE;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAqbJ,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,IAAI,CAAC,8BAA8B,EAAE,wBAAwB,CAAC,CAC/D,GACC,IAAI,CAAC,8BAA8B,EAAE,wBAAwB,CAAC,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA2GxD,CAAC"}
+{"version":3,"file":"MessageContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/MessageItemView/MessageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAA0B,UAAU,EAA+B,MAAM,cAAc,CAAC;AAK/F,OAAO,EACL,mBAAmB,EAEpB,MAAM,iDAAiD,CAAC;AAEzD,OAAO,EACL,oBAAoB,EAErB,MAAM,mDAAmD,CAAC;AAE3D,OAAO,EACL,uBAAuB,EAExB,MAAM,yDAAyD,CAAC;AA+BjE,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,mBAAmB,EACjB,WAAW,GACX,aAAa,GACb,aAAa,GACb,aAAa,GACb,SAAS,GACT,qBAAqB,GACrB,aAAa,GACb,SAAS,GACT,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,YAAY,GACZ,sBAAsB,CACzB,GACC,IAAI,CACF,oBAAoB,EAClB,0BAA0B,GAC1B,YAAY,GACZ,6BAA6B,GAC7B,qBAAqB,GACrB,SAAS,GACT,mBAAmB,GACnB,0BAA0B,GAC1B,2BAA2B,GAC3B,iBAAiB,GACjB,4BAA4B,GAC5B,uBAAuB,GACvB,gBAAgB,GAChB,OAAO,GACP,sBAAsB,CACzB,GACD,IAAI,CAAC,uBAAuB,EAAE,GAAG,CAAC,GAAG;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA4aJ,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA2GxD,CAAC"}

package/lib/typescript/components/Message/MessageItemView/MessageItemView.d.ts

@@ -2,16 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-export type MessageItemViewPropsWithContext = Pick<MessageContextValue, 'alignment' | 'channel' | 'groupStyles' | 'isMyMessage' | 'message' | 'onlyEmojis' | 'otherAttachments' | 'setQuotedMessage' | 'lastGroupMessage' | 'members'> & Pick<MessagesContextValue, 'customMessageSwipeAction' | 'enableMessageGroupingByUser' | 'enableSwipeToReply' | 'myMessageTheme' | 'MessageAuthor' | 'MessageContent' | 'MessageDeleted' | 'MessageError' | 'MessageFooter' | 'MessageHeader' | 'MessageReplies' | 'MessageSpacer' | 'MessageSwipeContent' | 'messageSwipeToReplyHitSlop' | 'ReactionListBottom' | 'reactionListPosition' | 'reactionListType' | 'ReactionListTop'> & {
-    /**
-     * Will determine whether the swipeable wrapper is always rendered for each
-     * message. If set to false, the animated wrapper will be rendered only when
-     * a swiping gesture is active and not otherwise.
-     * Since stateful components would lose their state if we remount them while
-     * an animation is happening, this should always be set to true in those instances.
-     */
-    shouldRenderSwipeableWrapper: boolean;
-};
+export type MessageItemViewPropsWithContext = Pick<MessageContextValue, 'alignment' | 'channel' | 'groupStyles' | 'isMyMessage' | 'message' | 'onlyEmojis' | 'otherAttachments' | 'setQuotedMessage' | 'lastGroupMessage' | 'members'> & Pick<MessagesContextValue, 'customMessageSwipeAction' | 'enableMessageGroupingByUser' | 'enableSwipeToReply' | 'myMessageTheme' | 'MessageAuthor' | 'MessageContent' | 'MessageDeleted' | 'MessageError' | 'MessageFooter' | 'MessageHeader' | 'MessageReplies' | 'MessageSpacer' | 'MessageSwipeContent' | 'messageSwipeToReplyHitSlop' | 'ReactionListBottom' | 'reactionListPosition' | 'reactionListType' | 'ReactionListTop'>;
 export type MessageItemViewProps = Partial<MessageItemViewPropsWithContext>;
 /**
  *

package/lib/typescript/components/Message/MessageItemView/MessageItemView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItemView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/MessageItemView/MessageItemView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAA0B,IAAI,EAAa,MAAM,cAAc,CAAC;AAIvE,OAAO,EAEL,mBAAmB,EAEpB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EACL,oBAAoB,EAErB,MAAM,mDAAmD,CAAC;AAkJ3D,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,mBAAmB,EACjB,WAAW,GACX,SAAS,GACT,aAAa,GACb,aAAa,GACb,SAAS,GACT,YAAY,GACZ,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,SAAS,CACZ,GACC,IAAI,CACF,oBAAoB,EAClB,0BAA0B,GAC1B,6BAA6B,GAC7B,oBAAoB,GACpB,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,qBAAqB,GACrB,4BAA4B,GAC5B,oBAAoB,GACpB,sBAAsB,GACtB,kBAAkB,GAClB,iBAAiB,CACpB,GAAG;IACF;;;;;;OAMG;IACH,4BAA4B,EAAE,OAAO,CAAC;CACvC,CAAC;AAkSJ,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,eAAe,uGA8E1B,CAAC"}
+{"version":3,"file":"MessageItemView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/MessageItemView/MessageItemView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAA0B,IAAI,EAAa,MAAM,cAAc,CAAC;AAIvE,OAAO,EAEL,mBAAmB,EAEpB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EACL,oBAAoB,EAErB,MAAM,mDAAmD,CAAC;AAmJ3D,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,mBAAmB,EACjB,WAAW,GACX,SAAS,GACT,aAAa,GACb,aAAa,GACb,SAAS,GACT,YAAY,GACZ,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,SAAS,CACZ,GACC,IAAI,CACF,oBAAoB,EAClB,0BAA0B,GAC1B,6BAA6B,GAC7B,oBAAoB,GACpB,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,qBAAqB,GACrB,4BAA4B,GAC5B,oBAAoB,GACpB,sBAAsB,GACtB,kBAAkB,GAClB,iBAAiB,CACpB,CAAC;AAuRJ,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,eAAe,uGAuE1B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

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

@@ -1,4 +1,4 @@
-import React, { SetStateAction, useMemo, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
@@ -15,7 +15,6 @@ import { MessageItemViewPropsWithContext } from './MessageItemView';
 
 import { MessagesContextValue, useTheme } from '../../../contexts';
 
-import { useStableCallback } from '../../../hooks';
 import { NativeHandlers } from '../../../native';
 import { MessageStatusTypes } from '../../../utils/utils';
 
@@ -34,18 +33,14 @@ export type MessageBubbleProps = Pick<
     | 'messageGroupedSingleOrBottom'
     | 'noBorder'
     | 'message'
-    | 'setMessageContentWidth'
   > &
-  Pick<MessageItemViewPropsWithContext, 'alignment'> & {
-    messageContentWidth: number;
-  };
+  Pick<MessageItemViewPropsWithContext, 'alignment'>;
 
 export const MessageBubble = React.memo(
   ({
     alignment,
     reactionListPosition,
     reactionListType,
-    setMessageContentWidth,
     MessageContent,
     ReactionListTop,
     backgroundColor,
@@ -72,7 +67,6 @@ export const MessageBubble = React.memo(
             isVeryLastMessage={isVeryLastMessage}
             messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
             noBorder={noBorder}
-            setMessageContentWidth={setMessageContentWidth}
           />
 
           {isMessageErrorType ? (
@@ -88,130 +82,110 @@ export const MessageBubble = React.memo(
 
 const AnimatedWrapper = Animated.createAnimatedComponent(View);
 
-export const SwipableMessageBubble = React.memo(
-  (
-    props: MessageBubbleProps &
-      Pick<MessagesContextValue, 'MessageSwipeContent'> &
-      Pick<
-        MessageItemViewPropsWithContext,
-        'shouldRenderSwipeableWrapper' | 'messageSwipeToReplyHitSlop'
-      > & { onSwipe: () => void },
-  ) => {
-    const { MessageSwipeContent, messageSwipeToReplyHitSlop, onSwipe, ...messageBubbleProps } =
-      props;
-
-    const styles = useStyles({ alignment: props.alignment });
-
-    const translateX = useSharedValue(0);
-    const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
-    const isSwiping = useSharedValue<boolean>(false);
-    const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
-
-    const SWIPABLE_THRESHOLD = 25;
-    const MINIMUM_DISTANCE = 8;
-
-    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()
-          .hitSlop(messageSwipeToReplyHitSlop)
-          .onBegin((event) => {
-            touchStart.value = { x: event.x, y: event.y };
-          })
-          .onTouchesMove((event, state) => {
-            if (!touchStart.value || !event.changedTouches.length) {
-              state.fail();
-              return;
-            }
-
-            const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
-            const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
-            const isHorizontalPanning = xDiff > yDiff;
-            const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
+type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeContent'> &
+  Pick<MessageItemViewPropsWithContext, 'alignment' | 'messageSwipeToReplyHitSlop'> & {
+    children: ReactNode;
+    onSwipe: () => void;
+  };
 
-            // Only activate if there's significant horizontal movement
-            if (isHorizontalPanning && hasMinimumDistance) {
-              state.activate();
-              if (!isSwiping.value) {
-                runOnJS(setShouldRenderAnimatedWrapper)(true);
-              }
-              isSwiping.value = true;
-            } else if (hasMinimumDistance) {
-              // If there's significant movement but not horizontal, fail the gesture
-              state.fail();
-            }
-          })
-          .onStart(() => {
-            translateX.value = 0;
-          })
-          .onChange(({ translationX }) => {
-            if (translationX > 0) {
-              translateX.value = translationX;
+export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+  const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+
+  const styles = useStyles({ alignment: props.alignment });
+
+  const translateX = useSharedValue(0);
+  const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+  const isSwiping = useSharedValue<boolean>(false);
+  const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
+
+  const SWIPABLE_THRESHOLD = 25;
+  const MINIMUM_DISTANCE = 8;
+
+  const triggerHaptic = NativeHandlers.triggerHaptic;
+
+  const swipeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .hitSlop(messageSwipeToReplyHitSlop)
+        .onBegin((event) => {
+          touchStart.value = { x: event.x, y: event.y };
+        })
+        .onTouchesMove((event, state) => {
+          if (!touchStart.value || !event.changedTouches.length) {
+            state.fail();
+            return;
+          }
+
+          const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
+          const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
+          const isHorizontalPanning = xDiff > yDiff;
+          const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
+
+          // Only activate if there's significant horizontal movement
+          if (isHorizontalPanning && hasMinimumDistance) {
+            state.activate();
+            if (!isSwiping.value) {
+              runOnJS(setShouldRenderAnimatedWrapper)(true);
             }
-          })
-          .onEnd(() => {
-            if (translateX.value >= SWIPABLE_THRESHOLD) {
-              runOnJS(onSwipe)();
-              if (triggerHaptic) {
-                runOnJS(triggerHaptic)('impactMedium');
-              }
+            isSwiping.value = true;
+          } else if (hasMinimumDistance) {
+            // If there's significant movement but not horizontal, fail the gesture
+            state.fail();
+          }
+        })
+        .onStart(() => {
+          translateX.value = 0;
+        })
+        .onChange(({ translationX }) => {
+          if (translationX > 0) {
+            translateX.value = translationX;
+          }
+        })
+        .onEnd(() => {
+          if (translateX.value >= SWIPABLE_THRESHOLD) {
+            runOnJS(onSwipe)();
+            if (triggerHaptic) {
+              runOnJS(triggerHaptic)('impactMedium');
             }
-            isSwiping.value = false;
-            translateX.value = withSpring(
-              0,
-              {
-                dampingRatio: 1,
-                duration: 500,
-                overshootClamping: true,
-                stiffness: 1,
-              },
-              () => {
-                runOnJS(setShouldRenderAnimatedWrapper)(false);
-              },
-            );
-          }),
-      [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
-    );
-
-    const swipeContentAnimatedStyle = useAnimatedStyle(
-      () => ({
-        opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
-        width: translateX.value,
-      }),
-      [],
-    );
-
-    return (
-      <GestureDetector gesture={swipeGesture}>
-        <View
-          hitSlop={messageSwipeToReplyHitSlop}
-          style={[
-            styles.contentWrapper,
-            props.messageContentWidth > 0 && shouldRenderAnimatedWrapper
-              ? { width: props.messageContentWidth }
-              : {},
-          ]}
-        >
-          {shouldRenderAnimatedWrapper ? (
-            <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
-              {MessageSwipeContent ? <MessageSwipeContent /> : null}
-            </AnimatedWrapper>
-          ) : null}
-          <MessageBubble {...messageBubbleProps} setMessageContentWidth={setMessageContentWidth} />
-        </View>
-      </GestureDetector>
-    );
-  },
-);
+          }
+          isSwiping.value = false;
+          translateX.value = withSpring(
+            0,
+            {
+              dampingRatio: 1,
+              duration: 500,
+              overshootClamping: true,
+              stiffness: 1,
+            },
+            () => {
+              runOnJS(setShouldRenderAnimatedWrapper)(false);
+            },
+          );
+        }),
+    [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
+  );
+
+  const swipeContentAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
+      width: translateX.value,
+    }),
+    [],
+  );
+
+  return (
+    <GestureDetector gesture={swipeGesture}>
+      <View hitSlop={messageSwipeToReplyHitSlop} style={styles.contentWrapper}>
+        {shouldRenderAnimatedWrapper ? (
+          <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
+            {MessageSwipeContent ? <MessageSwipeContent /> : null}
+          </AnimatedWrapper>
+        ) : null}
+        {children}
+      </View>
+    </GestureDetector>
+  );
+});
 
 const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
   const {

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -1,12 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  AnimatableNumericValue,
-  ColorValue,
-  LayoutChangeEvent,
-  Pressable,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -89,7 +82,6 @@ export type MessageContentPropsWithContext = Pick<
     | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
-    setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
     /**
      * Background color for the message content
      */
@@ -147,7 +139,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     otherAttachments,
     preventPress,
     Reply,
-    setMessageContentWidth,
     StreamingMessageView,
     hidePaddingTop,
     hidePaddingHorizontal,
@@ -181,14 +172,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     },
   } = useTheme();
 
-  const onLayout: (event: LayoutChangeEvent) => void = ({
-    nativeEvent: {
-      layout: { width },
-    },
-  }) => {
-    setMessageContentWidth(width);
-  };
-
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
@@ -352,7 +335,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         }
       }}
     >
-      <View onLayout={onLayout} style={wrapper}>
+      <View style={wrapper}>
         <View
           style={[
             styles.containerInner,
@@ -551,10 +534,7 @@ const MemoizedMessageContent = React.memo(
   areEqual,
 ) as typeof MessageContentWithContext;
 
-export type MessageContentProps = Partial<
-  Omit<MessageContentPropsWithContext, 'setMessageContentWidth'>
-> &
-  Pick<MessageContentPropsWithContext, 'setMessageContentWidth'>;
+export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 
 /**
  * Child of MessageItemView that displays a message's content

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useMemo, useState } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { MessageBubble, SwipableMessageBubble } from './MessageBubble';
+import { MessageBubble, SwipableMessageWrapper } from './MessageBubble';
 
 import {
   Alignment,
@@ -71,6 +71,7 @@ const useStyles = ({
           alignItems: 'flex-end',
           gap: primitives.spacingXs,
           flexDirection: alignment === 'left' ? 'row' : 'row-reverse',
+          width: '100%',
           ...container,
         },
         contentContainer: {
@@ -190,20 +191,10 @@ export type MessageItemViewPropsWithContext = Pick<
     | 'reactionListPosition'
     | 'reactionListType'
     | 'ReactionListTop'
-  > & {
-    /**
-     * Will determine whether the swipeable wrapper is always rendered for each
-     * message. If set to false, the animated wrapper will be rendered only when
-     * a swiping gesture is active and not otherwise.
-     * Since stateful components would lose their state if we remount them while
-     * an animation is happening, this should always be set to true in those instances.
-     */
-    shouldRenderSwipeableWrapper: boolean;
-  };
+  >;
 
 const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithContext>(
   (props, ref) => {
-    const [messageContentWidth, setMessageContentWidth] = useState(0);
     const { width } = Dimensions.get('screen');
     const {
       alignment,
@@ -230,7 +221,6 @@ const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithCont
       reactionListPosition,
       reactionListType,
       ReactionListTop,
-      shouldRenderSwipeableWrapper,
       setQuotedMessage,
     } = props;
 
@@ -295,72 +285,63 @@ const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithCont
       setQuotedMessage(message);
     });
 
+    const itemViewContent = (
+      <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
+        {alignment === 'left' ? <MessageAuthor /> : null}
+        {isMessageTypeDeleted ? (
+          <MessageDeleted date={message.created_at} groupStyle={groupStyle} />
+        ) : (
+          <View
+            style={[
+              styles.contentContainer,
+              isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
+              isMessageErrorType ? errorContainer : {},
+            ]}
+            testID='message-components'
+          >
+            <MessageHeader />
+            <MessageBubble
+              alignment={alignment}
+              backgroundColor={backgroundColor}
+              isVeryLastMessage={isVeryLastMessage}
+              MessageContent={MessageContent}
+              MessageError={MessageError}
+              messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+              noBorder={noBorder}
+              reactionListPosition={reactionListPosition}
+              ReactionListTop={ReactionListTop}
+              reactionListType={reactionListType}
+              message={message}
+            />
+
+            <View style={styles.repliesContainer}>
+              <MessageReplies />
+            </View>
+
+            {reactionListPosition === 'bottom' && ReactionListBottom ? (
+              <ReactionListBottom type={reactionListType} />
+            ) : null}
+            <MessageFooter date={message.created_at} />
+          </View>
+        )}
+        {MessageSpacer ? <MessageSpacer /> : null}
+      </View>
+    );
+
     return (
       <View ref={ref}>
-        <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
-          {alignment === 'left' ? <MessageAuthor /> : null}
-          {isMessageTypeDeleted ? (
-            <MessageDeleted date={message.created_at} groupStyle={groupStyle} />
-          ) : (
-            <View
-              style={[
-                styles.contentContainer,
-                isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
-                isMessageErrorType ? errorContainer : {},
-              ]}
-              testID='message-components'
-            >
-              <MessageHeader />
-              {enableSwipeToReply ? (
-                <SwipableMessageBubble
-                  alignment={alignment}
-                  backgroundColor={backgroundColor}
-                  isVeryLastMessage={isVeryLastMessage}
-                  MessageContent={MessageContent}
-                  messageContentWidth={messageContentWidth}
-                  messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-                  MessageSwipeContent={MessageSwipeContent}
-                  MessageError={MessageError}
-                  messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
-                  noBorder={noBorder}
-                  onSwipe={onSwipeActionHandler}
-                  reactionListPosition={reactionListPosition}
-                  reactionListType={reactionListType}
-                  ReactionListTop={ReactionListTop}
-                  setMessageContentWidth={setMessageContentWidth}
-                  shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
-                  message={message}
-                />
-              ) : (
-                <MessageBubble
-                  alignment={alignment}
-                  backgroundColor={backgroundColor}
-                  isVeryLastMessage={isVeryLastMessage}
-                  MessageContent={MessageContent}
-                  MessageError={MessageError}
-                  messageContentWidth={messageContentWidth}
-                  messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-                  noBorder={noBorder}
-                  reactionListPosition={reactionListPosition}
-                  ReactionListTop={ReactionListTop}
-                  reactionListType={reactionListType}
-                  setMessageContentWidth={setMessageContentWidth}
-                  message={message}
-                />
-              )}
-
-              <View style={styles.repliesContainer}>
-                <MessageReplies />
-              </View>
-
-              {reactionListPosition === 'bottom' && ReactionListBottom ? (
-                <ReactionListBottom type={reactionListType} />
-              ) : null}
-              <MessageFooter date={message.created_at} />
-            </View>
-          )}
-          {MessageSpacer ? <MessageSpacer /> : null}
-        </View>
+        {enableSwipeToReply && !isMessageTypeDeleted ? (
+          <SwipableMessageWrapper
+            alignment={alignment}
+            MessageSwipeContent={MessageSwipeContent}
+            messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
+            onSwipe={onSwipeActionHandler}
+          >
+            {itemViewContent}
+          </SwipableMessageWrapper>
+        ) : (
+          itemViewContent
+        )}
       </View>
     );
   },
@@ -504,7 +485,6 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
     message,
     onlyEmojis,
     otherAttachments,
-    isMessageAIGenerated,
     setQuotedMessage,
     lastGroupMessage,
     members,
@@ -530,11 +510,6 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
     reactionListType,
     ReactionListTop,
   } = useMessagesContext();
-  const isAIGenerated = useMemo(
-    () => isMessageAIGenerated(message),
-    [message, isMessageAIGenerated],
-  );
-  const shouldRenderSwipeableWrapper = (message?.attachments || []).length > 0 || isAIGenerated;
 
   return (
     <MemoizedMessageItemView
@@ -565,7 +540,6 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
         reactionListType,
         ReactionListTop,
         setQuotedMessage,
-        shouldRenderSwipeableWrapper,
         lastGroupMessage,
         members,
       }}

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
@@ -17,8 +17,6 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
-import { MessageContent } from '../MessageContent';
-
 describe('MessageContent', () => {
   let channel;
   let chatClient;
@@ -359,19 +357,10 @@ describe('MessageContent', () => {
       user,
     });
 
-    // This needs to be mocked like that cause native onLayout on MessageContent would never
-    // trigger.
-    const MessageContentWithMockedMessageContentWidth = (props) => {
-      useEffect(() => {
-        props.setMessageContentWidth(100);
-      }, [props]);
-      return <MessageContent {...props} />;
-    };
-
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
+          <Channel channel={channel}>
             <Message groupStyles={['bottom']} message={message} reactionsEnabled />
           </Channel>
         </Chat>