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

package/src/components/KeyboardCompatibleView/KeyboardControllerAvoidingView.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 
 import {
   Keyboard,
-  Platform,
   KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
 } from 'react-native';
 
@@ -51,12 +50,7 @@ export const KeyboardCompatibleView = (props: KeyboardCompatibleViewProps) => {
       </KeyboardProvider>
     );
   }
-  const compatibleBehavior =
-    behavior === 'translate-with-padding'
-      ? Platform.OS === 'ios'
-        ? 'padding'
-        : 'position'
-      : behavior;
+  const compatibleBehavior = behavior === 'translate-with-padding' ? 'padding' : behavior;
 
   return (
     <KeyboardCompatibleViewDefault behavior={compatibleBehavior} {...rest}>

package/src/components/Message/Message.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   GestureResponderEvent,
+  I18nManager,
   StyleProp,
   StyleSheet,
-  useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native';
@@ -54,6 +54,7 @@ import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
 import {
   closeOverlay,
   openOverlay,
+  Rect,
   setOverlayBottomH,
   setOverlayMessageH,
   setOverlayTopH,
@@ -254,7 +255,6 @@ export type MessagePropsWithContext = Pick<
  * each individual Message component.
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
-  const [isErrorInMessage, setIsErrorInMessage] = useState(false);
   const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
@@ -332,16 +332,18 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
 
-  const [rect, setRect] = useState<{ w: number; h: number; x: number; y: number } | undefined>(
-    undefined,
-  );
-  const { width: screenW } = useWindowDimensions();
+  const rectRef = useRef<Rect>(undefined);
+  const bubbleRect = useRef<Rect>(undefined);
+  const contextMenuAnchorRef = useRef<View>(null);
 
   const showMessageOverlay = useStableCallback(async () => {
     dismissKeyboard();
     try {
       const layout = await measureInWindow(messageWrapperRef, insets);
-      setRect(layout);
+      const bubbleLayout = await measureInWindow(contextMenuAnchorRef, insets).catch(() => layout);
+
+      rectRef.current = layout;
+      bubbleRect.current = bubbleLayout;
       setOverlayMessageH(layout);
       openOverlay({ id: messageOverlayId, messageId: message.id });
     } catch (e) {
@@ -379,23 +381,13 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
   };
 
-  const onPressQuotedMessage = (quotedMessage: LocalMessage) => {
-    if (!goToMessage) {
-      return;
-    }
-
-    goToMessage(quotedMessage.id);
-  };
-
   const errorOrFailed = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
 
   const onPress = (error = errorOrFailed) => {
     if (dismissKeyboardOnMessageTouch) {
       dismissKeyboard();
     }
-    const quotedMessage = message.quoted_message;
     if (error) {
-      setIsErrorInMessage(true);
       /**
        * If its a Blocked message, we don't do anything as per specs.
        */
@@ -410,8 +402,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         return;
       }
       showMessageOverlay();
-    } else if (quotedMessage) {
-      onPressQuotedMessage(quotedMessage);
     }
   };
 
@@ -421,6 +411,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       : isMyMessage
         ? 'right'
         : 'left';
+  const overlayItemAlignment = I18nManager.isRTL
+    ? alignment === 'right'
+      ? 'left'
+      : 'right'
+    : alignment;
 
   /**
    * attachments contain files/images or other attachments
@@ -494,7 +489,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const messageContentOrder = messageContentOrderProp.filter((content) => {
     if (content === 'quoted_reply') {
-      return !!message.quoted_message;
+      return !!message.quoted_message && !hasAttachmentActions;
     }
 
     switch (content) {
@@ -638,7 +633,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           deleteMessage,
           dismissOverlay,
           editMessage,
-          error: isErrorInMessage,
+          error: errorOrFailed,
           flagMessage,
           isMyMessage,
           isThreadMessage,
@@ -698,12 +693,14 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     actionsEnabled,
     alignment,
     channel,
+    contextMenuAnchorRef,
     deliveredToCount,
     dismissOverlay,
     files: attachments.files,
     goToMessage,
     groupStyles,
     handleAction,
+    hasAttachmentActions,
     handleReaction,
     handleToggleReaction,
     hasReactions,
@@ -815,6 +812,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const styles = useStyles({
     highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
   });
+  const rect = rectRef.current;
+  const overlayItemsAnchorRect = bubbleRect.current ?? rect;
 
   if (!(isMessageTypeDeleted || messageContentOrder.length)) {
     return null;
@@ -841,7 +840,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         ) : null}
         {/*TODO: V9: Find a way to separate these in a dedicated file*/}
         <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
-          {overlayActive && rect ? (
+          {overlayActive && rect && overlayItemsAnchorRect ? (
             <View
               onLayout={(e) => {
                 const { width: w, height: h } = e.nativeEvent.layout;
@@ -849,7 +848,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 setOverlayTopH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    overlayItemAlignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y - h,
                 });
               }}
@@ -865,7 +867,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           hostName={overlayActive ? 'message-overlay' : undefined}
           style={overlayActive && rect ? { width: rect.w } : undefined}
         >
-          <MessageItemView ref={messageWrapperRef} />
+          <View ref={messageWrapperRef}>
+            <MessageItemView />
+          </View>
         </Portal>
         {showMessageReactions ? (
           <BottomSheetModal
@@ -883,14 +887,17 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           </BottomSheetModal>
         ) : null}
         <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
-          {overlayActive && rect ? (
+          {overlayActive && rect && overlayItemsAnchorRect ? (
             <View
               onLayout={(e) => {
                 const { width: w, height: h } = e.nativeEvent.layout;
                 setOverlayBottomH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    overlayItemAlignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y + rect.h,
                 });
               }}

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

@@ -8,7 +8,7 @@ import {
 } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Pin } from '../../../../icons/Pin';
+import { Pin } from '../../../../icons/pin';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

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

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Bookmark } from '../../../../icons/Bookmark';
+import { Bookmark } from '../../../../icons/save';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

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

@@ -13,7 +13,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useThreadContext } from '../../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
-import { ArrowUpRight } from '../../../../icons/ArrowUpRight';
+import { ArrowUpRight } from '../../../../icons/arrow-up-right';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

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

@@ -1,5 +1,5 @@
 import React, { ReactNode, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { I18nManager, StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -10,88 +10,26 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-import { MessageContentProps } from './MessageContent';
 import { MessageItemViewPropsWithContext } from './MessageItemView';
 
 import { MessagesContextValue, useTheme } from '../../../contexts';
 
 import { NativeHandlers } from '../../../native';
-import { MessageStatusTypes } from '../../../utils/utils';
-
-export type MessageBubbleProps = Pick<
-  MessagesContextValue,
-  | 'reactionListPosition'
-  | 'MessageContent'
-  | 'ReactionListTop'
-  | 'MessageError'
-  | 'reactionListType'
-> &
-  Pick<
-    MessageContentProps,
-    | 'isVeryLastMessage'
-    | 'backgroundColor'
-    | 'messageGroupedSingleOrBottom'
-    | 'noBorder'
-    | 'message'
-  > &
-  Pick<MessageItemViewPropsWithContext, 'alignment'>;
-
-export const MessageBubble = React.memo(
-  ({
-    alignment,
-    reactionListPosition,
-    reactionListType,
-    MessageContent,
-    ReactionListTop,
-    backgroundColor,
-    isVeryLastMessage,
-    messageGroupedSingleOrBottom,
-    noBorder,
-    MessageError,
-    message,
-  }: MessageBubbleProps) => {
-    const styles = useStyles({ alignment });
-    const isMessageErrorType =
-      message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
-
-    return (
-      <View style={styles.wrapper}>
-        {reactionListPosition === 'top' && ReactionListTop ? (
-          <View style={styles.reactionListTopContainer}>
-            <ReactionListTop type={reactionListType} />
-          </View>
-        ) : null}
-        <View style={styles.contentContainer}>
-          <MessageContent
-            backgroundColor={backgroundColor}
-            isVeryLastMessage={isVeryLastMessage}
-            messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-            noBorder={noBorder}
-          />
-
-          {isMessageErrorType ? (
-            <View style={styles.errorContainer}>
-              <MessageError />
-            </View>
-          ) : null}
-        </View>
-      </View>
-    );
-  },
-);
 
 const AnimatedWrapper = Animated.createAnimatedComponent(View);
 
 type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeContent'> &
-  Pick<MessageItemViewPropsWithContext, 'alignment' | 'messageSwipeToReplyHitSlop'> & {
+  Pick<MessageItemViewPropsWithContext, 'messageSwipeToReplyHitSlop'> & {
     children: ReactNode;
     onSwipe: () => void;
   };
 
 export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
   const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const isRTL = I18nManager.isRTL;
+  const swipeDirectionMultiplier = isRTL ? -1 : 1;
 
-  const styles = useStyles({ alignment: props.alignment });
+  const styles = useStyles();
 
   const translateX = useSharedValue(0);
   const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
@@ -137,8 +75,9 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
           translateX.value = 0;
         })
         .onChange(({ translationX }) => {
-          if (translationX > 0) {
-            translateX.value = translationX;
+          const swipeDistance = translationX * swipeDirectionMultiplier;
+          if (swipeDistance > 0) {
+            translateX.value = swipeDistance;
           }
         })
         .onEnd(() => {
@@ -162,7 +101,15 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
             },
           );
         }),
-    [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
+    [
+      messageSwipeToReplyHitSlop,
+      onSwipe,
+      swipeDirectionMultiplier,
+      touchStart,
+      isSwiping,
+      translateX,
+      triggerHaptic,
+    ],
   );
 
   const swipeContentAnimatedStyle = useAnimatedStyle(
@@ -187,14 +134,10 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
   );
 });
 
-const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
+const useStyles = () => {
   const {
     theme: {
-      messageItemView: {
-        bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
-        contentWrapper,
-        swipeContentContainer,
-      },
+      messageItemView: { contentWrapper, swipeContentContainer },
     },
   } = useTheme();
   return useMemo(() => {
@@ -205,34 +148,9 @@ const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
         zIndex: 1, // To hide the stick inside the message content
         ...contentWrapper,
       },
-      contentContainer: {
-        alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end',
-        ...contentContainer,
-      },
       swipeContentContainer: {
         ...swipeContentContainer,
       },
-      errorContainer: {
-        position: 'absolute',
-        top: 8,
-        right: -12,
-        ...errorContainer,
-      },
-      reactionListTopContainer: {
-        alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start',
-        ...reactionListTopContainer,
-      },
-      wrapper: {
-        ...wrapper,
-      },
     });
-  }, [
-    alignment,
-    contentContainer,
-    contentWrapper,
-    errorContainer,
-    reactionListTopContainer,
-    swipeContentContainer,
-    wrapper,
-  ]);
+  }, [contentWrapper, swipeContentContainer]);
 };

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

@@ -121,6 +121,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     FileAttachmentGroup,
     Gallery,
     groupStyles,
+    goToMessage,
     isMessageAIGenerated,
     isMyMessage,
     isVeryLastMessage,
@@ -166,7 +167,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
           messageGroupedSingleOrBottomContainer,
           messageGroupedTopContainer,
           replyContainer,
-          wrapper,
         },
       },
     },
@@ -221,7 +221,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
   const { setNativeScrollability } = useMessageListItemContext();
   const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
-
   const contentBody = (
     <>
       <View
@@ -240,12 +239,45 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
             case 'quoted_reply':
               return (
                 message.quoted_message && (
-                  <View
+                  <Pressable
+                    disabled={!goToMessage || preventPress}
                     key={`quoted_reply_${messageContentOrderIndex}`}
+                    onLongPress={(event) => {
+                      if (onLongPress) {
+                        onLongPress({
+                          emitter: 'messageContent',
+                          event,
+                        });
+                      }
+                    }}
+                    onPress={(event) => {
+                      if (!message.quoted_message || !goToMessage) {
+                        return;
+                      }
+
+                      if (onPress) {
+                        onPress({
+                          defaultHandler: () => goToMessage(message.quoted_message!.id),
+                          emitter: 'messageContent',
+                          event,
+                        });
+                        return;
+                      }
+
+                      goToMessage(message.quoted_message.id);
+                    }}
+                    onPressIn={(event) => {
+                      if (onPressIn) {
+                        onPressIn({
+                          emitter: 'messageContent',
+                          event,
+                        });
+                      }
+                    }}
                     style={[styles.replyContainer, replyContainer]}
                   >
                     <Reply mode='reply' styles={replyStyles} />
-                  </View>
+                  </Pressable>
                 )
               );
             case 'attachments':
@@ -335,43 +367,41 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         }
       }}
     >
-      <View style={wrapper}>
-        <View
-          style={[
-            styles.containerInner,
-            {
-              backgroundColor,
-              ...getBorderRadius(),
-              ...getBorderRadiusFromTheme(),
-            },
-            noBorder ? { borderWidth: 0 } : {},
-            containerInner,
-            messageGroupedSingleOrBottom
-              ? isVeryLastMessage && enableMessageGroupingByUser
-                ? lastMessageContainer
-                : messageGroupedSingleOrBottomContainer
-              : messageGroupedTopContainer,
-          ]}
-          testID='message-content-wrapper'
-        >
-          {MessageContentTopView ? <MessageContentTopView /> : null}
-          {hasContentSideViews ? (
-            <View
-              style={[
-                styles.contentRow,
-                alignment === 'right' ? styles.rightAlignContentRow : undefined,
-              ]}
-              testID='message-content-row'
-            >
-              {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
-              <View style={styles.contentBody}>{contentBody}</View>
-              {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
-            </View>
-          ) : (
-            contentBody
-          )}
-          {MessageContentBottomView ? <MessageContentBottomView /> : null}
-        </View>
+      <View
+        style={[
+          styles.containerInner,
+          {
+            backgroundColor,
+            ...getBorderRadius(),
+            ...getBorderRadiusFromTheme(),
+          },
+          noBorder ? { borderWidth: 0 } : {},
+          containerInner,
+          messageGroupedSingleOrBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? lastMessageContainer
+              : messageGroupedSingleOrBottomContainer
+            : messageGroupedTopContainer,
+        ]}
+        testID='message-content-wrapper'
+      >
+        {MessageContentTopView ? <MessageContentTopView /> : null}
+        {hasContentSideViews ? (
+          <View
+            style={[
+              styles.contentRow,
+              alignment === 'right' ? styles.rightAlignContentRow : undefined,
+            ]}
+            testID='message-content-row'
+          >
+            {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
+            <View style={styles.contentBody}>{contentBody}</View>
+            {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
+          </View>
+        ) : (
+          contentBody
+        )}
+        {MessageContentBottomView ? <MessageContentBottomView /> : null}
       </View>
     </Pressable>
   );
@@ -584,7 +614,8 @@ export const MessageContent = (props: MessageContentProps) => {
   const messageHasSingleFile =
     messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
   const messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
-  const messageHasGiphyOrImgur =
+  const messageHasStandaloneGiphyOrImgur =
+    !message.quoted_message &&
     otherAttachments.filter(
       (file) => file.type === FileTypes.Giphy || file.type === FileTypes.Imgur,
     ).length > 0;
@@ -594,17 +625,20 @@ export const MessageContent = (props: MessageContentProps) => {
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur;
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingHorizontal =
-    messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasGiphyOrImgur;
+    messageHasPoll ||
+    messageHasSingleMedia ||
+    messageHasSingleFile ||
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingBottom =
     messageHasPoll ||
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur ||
+    messageHasStandaloneGiphyOrImgur ||
     (messageContentOrder.length > 1 &&
       messageContentOrder[messageContentOrder.length - 1] === 'text');
 

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

@@ -11,7 +11,7 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { CircleBan } from '../../../icons/CircleBan';
+import { CircleBan } from '../../../icons/no-sign';
 import { components, primitives } from '../../../theme';
 
 type MessageDeletedComponentProps = {

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

@@ -1,7 +1,35 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { View, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../../contexts';
+import { primitives } from '../../../theme';
 import { ErrorBadge } from '../../ui/Badge/ErrorBadge';
 
 export const MessageError = () => {
-  return <ErrorBadge size='sm' testID='message-error' />;
+  const styles = useStyles();
+
+  return (
+    <View style={styles.wrapper}>
+      <ErrorBadge size='sm' testID='message-error' />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        wrapper: {
+          borderRadius: primitives.radiusMax,
+          borderWidth: 2,
+          borderColor: semantics.badgeBorder,
+        },
+      }),
+    [semantics],
+  );
 };