stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.11

package/src/components/ChannelPreview/{ChannelPreviewMessenger.tsx → ChannelPreviewView.tsx}

@@ -20,7 +20,7 @@ import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 
-export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
+export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
   Pick<
     ChannelsContextValue,
     | 'maxUnreadCount'
@@ -50,7 +50,7 @@ export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps,
     lastMessage?: LastMessageType;
   };
 
-const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsWithContext) => {
+const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext) => {
   const {
     channel,
     formatLatestMessageDate,
@@ -146,20 +146,18 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
   );
 };
 
-export type ChannelPreviewMessengerProps = Partial<
-  Omit<ChannelPreviewMessengerPropsWithContext, 'channel'>
-> &
-  Pick<ChannelPreviewMessengerPropsWithContext, 'channel'>;
+export type ChannelPreviewViewProps = Partial<Omit<ChannelPreviewViewPropsWithContext, 'channel'>> &
+  Pick<ChannelPreviewViewPropsWithContext, 'channel'>;
 
-const MemoizedChannelPreviewMessengerWithContext = React.memo(
-  ChannelPreviewMessengerWithContext,
-) as typeof ChannelPreviewMessengerWithContext;
+const MemoizedChannelPreviewViewWithContext = React.memo(
+  ChannelPreviewViewWithContext,
+) as typeof ChannelPreviewViewWithContext;
 
 /**
  * This UI component displays an individual preview item for each channel in a list. It also receives all props
  * from the ChannelPreview component.
  */
-export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) => {
+export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
   const {
     forceUpdate,
     maxUnreadCount,
@@ -172,7 +170,7 @@ export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) =>
     mutedStatusPosition,
   } = useChannelsContext();
   return (
-    <MemoizedChannelPreviewMessengerWithContext
+    <MemoizedChannelPreviewViewWithContext
       {...{
         forceUpdate,
         maxUnreadCount,
@@ -189,7 +187,7 @@ export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) =>
   );
 };
 
-ChannelPreviewMessenger.displayName = 'ChannelPreviewMessenger{channelPreview}';
+ChannelPreviewView.displayName = 'ChannelPreviewView{channelPreview}';
 
 const useStyles = () => {
   const {

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -57,9 +57,9 @@ export const ChannelSwipableWrapper = ({
   const Icon = useCallback(
     () =>
       isDirectChannel ? (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
-      ) : (
         <Archive width={20} height={20} stroke={semantics.textOnAccent} />
+      ) : (
+        <Mute width={20} height={20} fill={semantics.textOnAccent} />
       ),
     [isDirectChannel, semantics.textOnAccent],
   );
@@ -74,7 +74,7 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    const extraItem = isDirectChannel ? channelActionsById.mute : channelActionsById.archive;
+    const extraItem = isDirectChannel ? channelActionsById.archive : channelActionsById.mute;
 
     if (extraItem) {
       const { id, action } = extraItem;

package/src/components/ChannelPreview/__tests__/{ChannelPreviewMessenger.test.js → ChannelPreviewView.test.js}

@@ -11,16 +11,16 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
-import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
+import { ChannelPreviewView } from '../ChannelPreviewView';
 
-describe('ChannelPreviewMessenger', () => {
+describe('ChannelPreviewView', () => {
   const clientUser = generateUser();
   let chatClient;
   let channel;
 
   const getComponent = (props = {}) => (
     <Chat client={chatClient}>
-      <ChannelPreviewMessenger
+      <ChannelPreviewView
         channel={channel}
         client={chatClient}
         latestMessagePreview={{

package/src/components/Chat/Chat.tsx

@@ -109,7 +109,7 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      * import type { DeepPartial, Theme } from 'stream-chat-react-native';
      *
      * const theme: DeepPartial<Theme> = {
-     *   messageSimple: {
+     *   messageItemView: {
      *     file: {
      *       container: {
      *         backgroundColor: 'red',

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,16 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import {
-  ImageGalleryProviderProps,
-  useImageGalleryContext,
-} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
   shareMenuOpen: boolean;
 }) => React.ReactElement | null;
 
-export type ImageGalleryVideoControlProps = {
-  attachmentId: string;
-};
-
 export type ImageGalleryVideoControlComponent = ({
   attachmentId,
 }: ImageGalleryVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterProps = Pick<
-  ImageGalleryProviderProps,
-  'ImageGalleryVideoControls'
-> & {
-  accessibilityLabel: string;
-  opacity: SharedValue<number>;
-  openGridView: () => void;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -2,14 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryHeaderProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderProps = {
-  opacity: SharedValue<number>;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
 });

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
+import type { ImageGalleryVideoControlProps } from './types';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
+import type { ImageGalleryGridProps } from './types';
+
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
@@ -11,7 +13,7 @@ import type {
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
 import { FileTypes } from '../../../types/types';
-import { StreamBottomSheetModalFlatList } from '../../UIComponents';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -51,11 +53,6 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
 
 const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGalleryGridProps = {
-  closeGridView: () => void;
-  numberOfImageGalleryGridColumns?: number;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
 });

package/src/components/ImageGallery/components/types.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+export type ImageGalleryVideoControlProps = {
+  attachmentId: string;
+};
+
+export type ImageGalleryHeaderProps = {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryFooterProps = {
+  accessibilityLabel: string;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  opacity: SharedValue<number>;
+  openGridView: () => void;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryGridProps = {
+  closeGridView: () => void;
+  numberOfImageGalleryGridColumns?: number;
+};

package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
 export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -41,7 +41,7 @@ export class KeyboardCompatibleView extends React.Component<
   > = {
     behavior: Platform.OS === 'ios' ? 'padding' : 'position',
     enabled: true,
-    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageInput height
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
 
   _frame: LayoutRectangle | null = null;

package/src/components/Message/Message.tsx

@@ -1,12 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
@@ -54,6 +47,7 @@ import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
 import {
   closeOverlay,
   openOverlay,
+  Rect,
   setOverlayBottomH,
   setOverlayMessageH,
   setOverlayTopH,
@@ -209,7 +203,7 @@ export type MessagePropsWithContext = Pick<
     | 'messageContentOrder'
     | 'MessageBounce'
     | 'MessageBlocked'
-    | 'MessageSimple'
+    | 'MessageItemView'
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
@@ -254,7 +248,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);
@@ -293,7 +286,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     MessageBounce,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
-    MessageSimple,
+    MessageItemView,
     onLongPressMessage: onLongPressMessageProp,
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
@@ -332,16 +325,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) {
@@ -395,7 +390,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
     const quotedMessage = message.quoted_message;
     if (error) {
-      setIsErrorInMessage(true);
       /**
        * If its a Blocked message, we don't do anything as per specs.
        */
@@ -638,7 +632,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           deleteMessage,
           dismissOverlay,
           editMessage,
-          error: isErrorInMessage,
+          error: errorOrFailed,
           flagMessage,
           isMyMessage,
           isThreadMessage,
@@ -698,6 +692,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     actionsEnabled,
     alignment,
     channel,
+    contextMenuAnchorRef,
     deliveredToCount,
     dismissOverlay,
     files: attachments.files,
@@ -815,6 +810,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 +838,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 +846,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 setOverlayTopH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    alignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y - h,
                 });
               }}
@@ -865,7 +865,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           hostName={overlayActive ? 'message-overlay' : undefined}
           style={overlayActive && rect ? { width: rect.w } : undefined}
         >
-          <MessageSimple ref={messageWrapperRef} />
+          <View ref={messageWrapperRef}>
+            <MessageItemView />
+          </View>
         </Portal>
         {showMessageReactions ? (
           <BottomSheetModal
@@ -883,14 +885,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:
+                    alignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y + rect.h,
                 });
               }}
@@ -1132,7 +1137,7 @@ export const Message = (props: MessageProps) => {
 const useStyles = ({ highlightedMessage }: { highlightedMessage?: boolean }) => {
   const {
     theme: {
-      messageSimple: { wrapper, targetedMessageContainer, blockedMessageContainer },
+      messageItemView: { wrapper, targetedMessageContainer, blockedMessageContainer },
       screenPadding,
       semantics,
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessagePinnedHeader.tsx

@@ -41,7 +41,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         pinnedHeader: { container, label },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessageReminderHeader.tsx

@@ -65,7 +65,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reminderHeader: { container, label, dot, time },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessageSavedForLaterHeader.tsx

@@ -26,7 +26,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         savedForLaterHeader: { container, label },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/SentToChannelHeader.tsx

@@ -111,7 +111,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         sentToChannelHeader: { container, label, dot, link },
       },
     },

package/src/components/Message/{MessageSimple/MessageAvatar.tsx → MessageItemView/MessageAuthor.tsx}

@@ -9,18 +9,18 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { AvatarProps, UserAvatar } from '../../ui';
 import { avatarSizes } from '../../ui/Avatar/constants';
 
-export type MessageAvatarPropsWithContext = Pick<
+export type MessageAuthorPropsWithContext = Pick<
   MessageContextValue,
   'lastGroupMessage' | 'message' | 'showAvatar'
 > &
   Partial<Pick<AvatarProps, 'size'>>;
 
-const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
+const MessageAuthorWithContext = (props: MessageAuthorPropsWithContext) => {
   const { lastGroupMessage, message, showAvatar, size } = props;
   const {
     theme: {
-      messageSimple: {
-        avatarWrapper: { container },
+      messageItemView: {
+        authorWrapper: { container },
       },
     },
   } = useTheme();
@@ -28,7 +28,7 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
   return (
-    <View style={container} testID='message-avatar'>
+    <View style={container} testID='message-author'>
       {visible && message.user ? (
         <UserAvatar user={message.user} size={size ?? 'md'} />
       ) : (
@@ -39,8 +39,8 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
 };
 
 const areEqual = (
-  prevProps: MessageAvatarPropsWithContext,
-  nextProps: MessageAvatarPropsWithContext,
+  prevProps: MessageAuthorPropsWithContext,
+  nextProps: MessageAuthorPropsWithContext,
 ) => {
   const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;
   const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;
@@ -61,18 +61,18 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageAvatar = React.memo(
-  MessageAvatarWithContext,
+const MemoizedMessageAuthor = React.memo(
+  MessageAuthorWithContext,
   areEqual,
-) as typeof MessageAvatarWithContext;
+) as typeof MessageAuthorWithContext;
 
-export type MessageAvatarProps = Partial<MessageAvatarPropsWithContext>;
+export type MessageAuthorProps = Partial<MessageAuthorPropsWithContext>;
 
-export const MessageAvatar = (props: MessageAvatarProps) => {
+export const MessageAuthor = (props: MessageAuthorProps) => {
   const { lastGroupMessage, message, showAvatar } = useMessageContext();
 
   return (
-    <MemoizedMessageAvatar
+    <MemoizedMessageAuthor
       {...{
         lastGroupMessage,
         message,
@@ -83,4 +83,4 @@ export const MessageAvatar = (props: MessageAvatarProps) => {
   );
 };
 
-MessageAvatar.displayName = 'MessageAvatar{messageSimple{avatarWrapper}}';
+MessageAuthor.displayName = 'MessageAuthor{messageItemView{authorWrapper}}';

package/src/components/Message/{MessageSimple → MessageItemView}/MessageBlocked.tsx

@@ -35,7 +35,7 @@ MessageBlocked.displayName = 'MessageBlocked{messageList{messageBlocked}}';
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         messageBlocked: { container, text },
       },
       semantics,