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

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>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Text } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
@@ -107,6 +108,19 @@ describe('MessageItemView', () => {
     });
   });
 
+  it('wraps the full MessageItemView with swipe-to-reply', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const gestureDetector = screen.UNSAFE_getByType(GestureDetector);
+
+      expect(gestureDetector.findByProps({ testID: 'message-item-view-wrapper' })).toBeTruthy();
+    });
+  });
+
   it('renders MessageSpacer component if defined', async () => {
     const user = generateUser();
     const message = generateMessage({ user });

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

@@ -51,7 +51,6 @@ describe('ReactionListTop', () => {
   it('renders the ReactionListTop component', async () => {
     renderMessage({
       hasReactions: true,
-      messageContentWidth: 100,
       reactions: [{ count: 1, own: true, type: 'love' }],
     });
 
@@ -63,7 +62,6 @@ describe('ReactionListTop', () => {
   it('return null in ReactionListTop component when hasReactions false', async () => {
     renderMessage({
       hasReactions: false,
-      messageContentWidth: 100,
       reactions: [{ count: 1, own: true, type: 'love' }],
     });
 
@@ -76,7 +74,6 @@ describe('ReactionListTop', () => {
     renderMessage(
       {
         hasReactions: false,
-        messageContentWidth: 100,
         reactions: [{ count: 1, own: true, type: 'love' }],
       },
       { supportedReactions: [] },