stream-chat-react-native-core 4.3.0-beta.4 → 4.3.1-beta.1

package/lib/typescript/components/Attachment/Attachment.d.ts

@@ -2,13 +2,13 @@ import type { Attachment as AttachmentType } from 'stream-chat';
 import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type ActionHandler = (name: string, value: string) => void;
-export declare type AttachmentPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessagesContextValue<StreamChatGenerics>, 'AttachmentActions' | 'Card' | 'FileAttachment' | 'Gallery' | 'giphyVersion' | 'Giphy' | 'UrlPreview'> & {
+export declare type AttachmentPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessagesContextValue<StreamChatGenerics>, 'AttachmentActions' | 'Card' | 'FileAttachment' | 'Gallery' | 'giphyVersion' | 'Giphy' | 'isAttachmentEqual' | 'UrlPreview'> & {
     /**
      * The attachment to render
      */
     attachment: AttachmentType<StreamChatGenerics>;
 };
-export declare type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'AttachmentActions' | 'Card' | 'FileAttachment' | 'Gallery' | 'Giphy' | 'giphyVersion' | 'UrlPreview'>> & Pick<AttachmentPropsWithContext<StreamChatGenerics>, 'attachment'>;
+export declare type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'AttachmentActions' | 'Card' | 'FileAttachment' | 'Gallery' | 'Giphy' | 'giphyVersion' | 'UrlPreview' | 'isAttachmentEqual'>> & Pick<AttachmentPropsWithContext<StreamChatGenerics>, 'attachment'>;
 /**
  * Attachment - The message attachment
  */

package/lib/typescript/components/Channel/Channel.d.ts

@@ -15,7 +15,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
 import { LoadingErrorProps } from '../Indicators/LoadingErrorIndicator';
 export declare const reactionData: ReactionData[];
-export declare type ChannelPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelContextValue<StreamChatGenerics>, 'channel'> & Partial<Pick<ChannelContextValue<StreamChatGenerics>, 'EmptyStateIndicator' | 'enableMessageGroupingByUser' | 'enforceUniqueReaction' | 'giphyEnabled' | 'hideStickyDateHeader' | 'hideDateSeparators' | 'LoadingIndicator' | 'maxTimeBetweenGroupedMessages' | 'NetworkDownIndicator' | 'StickyHeader'>> & Pick<ChatContextValue<StreamChatGenerics>, 'client'> & Partial<Omit<InputMessageInputContextValue<StreamChatGenerics>, 'quotedMessage' | 'editing' | 'clearEditingState' | 'clearQuotedMessageState' | 'sendMessage'>> & Partial<Pick<SuggestionsContextValue<StreamChatGenerics>, 'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem' | 'AutoCompleteSuggestionList'>> & Pick<TranslationContextValue, 't'> & Partial<Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'messages' | 'loadingMore' | 'loadingMoreRecent'>> & UseChannelStateValue<StreamChatGenerics> & Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps' | 'Attachment' | 'AttachmentActions' | 'Card' | 'CardCover' | 'CardFooter' | 'CardHeader' | 'DateHeader' | 'deletedMessagesVisibilityType' | 'disableTypingIndicator' | 'dismissKeyboardOnMessageTouch' | 'FileAttachment' | 'FileAttachmentIcon' | 'FileAttachmentGroup' | 'FlatList' | 'forceAlignMessages' | 'formatDate' | 'Gallery' | 'Giphy' | 'giphyVersion' | 'handleBlock' | 'handleCopy' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePinMessage' | 'handleReaction' | 'handleQuotedReply' | 'handleRetry' | 'handleThreadReply' | 'InlineDateSeparator' | 'InlineUnreadIndicator' | 'legacyImageViewerSwipeBehaviour' | 'markdownRules' | 'Message' | 'messageActions' | 'MessageAvatar' | 'MessageContent' | 'messageContentOrder' | 'MessageDeleted' | 'MessageFooter' | 'MessageHeader' | 'MessageList' | 'MessagePinnedHeader' | 'MessageReplies' | 'MessageRepliesAvatars' | 'MessageSimple' | 'MessageStatus' | 'MessageSystem' | 'MessageText' | 'myMessageTheme' | 'onLongPressMessage' | 'onPressInMessage' | 'onPressMessage' | 'OverlayReactionList' | 'ReactionList' | 'Reply' | 'ScrollToBottomButton' | 'selectReaction' | 'supportedReactions' | 'TypingIndicator' | 'TypingIndicatorContainer' | 'UrlPreview'>> & Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel' | 'thread'>> & {
+export declare type ChannelPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelContextValue<StreamChatGenerics>, 'channel'> & Partial<Pick<ChannelContextValue<StreamChatGenerics>, 'EmptyStateIndicator' | 'enableMessageGroupingByUser' | 'enforceUniqueReaction' | 'giphyEnabled' | 'hideStickyDateHeader' | 'hideDateSeparators' | 'LoadingIndicator' | 'maxTimeBetweenGroupedMessages' | 'NetworkDownIndicator' | 'StickyHeader'>> & Pick<ChatContextValue<StreamChatGenerics>, 'client'> & Partial<Omit<InputMessageInputContextValue<StreamChatGenerics>, 'quotedMessage' | 'editing' | 'clearEditingState' | 'clearQuotedMessageState' | 'sendMessage'>> & Partial<Pick<SuggestionsContextValue<StreamChatGenerics>, 'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem' | 'AutoCompleteSuggestionList'>> & Pick<TranslationContextValue, 't'> & Partial<Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'messages' | 'loadingMore' | 'loadingMoreRecent'>> & UseChannelStateValue<StreamChatGenerics> & Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps' | 'Attachment' | 'AttachmentActions' | 'Card' | 'CardCover' | 'CardFooter' | 'CardHeader' | 'DateHeader' | 'deletedMessagesVisibilityType' | 'disableTypingIndicator' | 'dismissKeyboardOnMessageTouch' | 'FileAttachment' | 'FileAttachmentIcon' | 'FileAttachmentGroup' | 'FlatList' | 'forceAlignMessages' | 'formatDate' | 'Gallery' | 'Giphy' | 'giphyVersion' | 'handleBlock' | 'handleCopy' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePinMessage' | 'handleReaction' | 'handleQuotedReply' | 'handleRetry' | 'handleThreadReply' | 'InlineDateSeparator' | 'InlineUnreadIndicator' | 'isAttachmentEqual' | 'legacyImageViewerSwipeBehaviour' | 'markdownRules' | 'Message' | 'messageActions' | 'MessageAvatar' | 'MessageContent' | 'messageContentOrder' | 'MessageDeleted' | 'MessageFooter' | 'MessageHeader' | 'MessageList' | 'MessagePinnedHeader' | 'MessageReplies' | 'MessageRepliesAvatars' | 'MessageSimple' | 'MessageStatus' | 'MessageSystem' | 'MessageText' | 'myMessageTheme' | 'onLongPressMessage' | 'onPressInMessage' | 'onPressMessage' | 'OverlayReactionList' | 'ReactionList' | 'Reply' | 'ScrollToBottomButton' | 'selectReaction' | 'supportedReactions' | 'TypingIndicator' | 'TypingIndicatorContainer' | 'UrlPreview'>> & Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel' | 'thread'>> & {
     shouldSyncChannel: boolean;
     /**
      * Additional props passed to keyboard avoiding view

package/lib/typescript/components/Channel/hooks/useCreateMessagesContext.d.ts

@@ -1,6 +1,6 @@
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useCreateMessagesContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTouchableProps, Attachment, AttachmentActions, Card, CardCover, CardFooter, CardHeader, channelId, DateHeader, deletedMessagesVisibilityType, disableTypingIndicator, dismissKeyboardOnMessageTouch, enableMessageGroupingByUser, FileAttachment, FileAttachmentGroup, FileAttachmentIcon, FlatList, forceAlignMessages, formatDate, Gallery, Giphy, giphyVersion, handleBlock, handleCopy, handleDelete, handleEdit, handleFlag, handleMute, handlePinMessage, handleQuotedReply, handleReaction, handleRetry, handleThreadReply, initialScrollToFirstUnreadMessage, InlineDateSeparator, InlineUnreadIndicator, legacyImageViewerSwipeBehaviour, markdownRules, Message, messageActions, MessageAvatar, MessageContent, messageContentOrder, MessageDeleted, MessageFooter, MessageHeader, MessageList, MessagePinnedHeader, MessageReplies, MessageRepliesAvatars, MessageSimple, MessageStatus, MessageSystem, MessageText, myMessageTheme, onLongPressMessage, onPressInMessage, onPressMessage, OverlayReactionList, ReactionList, removeMessage, Reply, retrySendMessage, ScrollToBottomButton, selectReaction, setEditingState, setQuotedMessageState, supportedReactions, targetedMessage, TypingIndicator, TypingIndicatorContainer, updateMessage, UrlPreview, }: MessagesContextValue<StreamChatGenerics> & {
+export declare const useCreateMessagesContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTouchableProps, Attachment, AttachmentActions, Card, CardCover, CardFooter, CardHeader, channelId, DateHeader, deletedMessagesVisibilityType, disableTypingIndicator, dismissKeyboardOnMessageTouch, enableMessageGroupingByUser, FileAttachment, FileAttachmentGroup, FileAttachmentIcon, FlatList, forceAlignMessages, formatDate, Gallery, Giphy, giphyVersion, handleBlock, handleCopy, handleDelete, handleEdit, handleFlag, handleMute, handlePinMessage, handleQuotedReply, handleReaction, handleRetry, handleThreadReply, initialScrollToFirstUnreadMessage, InlineDateSeparator, InlineUnreadIndicator, isAttachmentEqual, legacyImageViewerSwipeBehaviour, markdownRules, Message, messageActions, MessageAvatar, MessageContent, messageContentOrder, MessageDeleted, MessageFooter, MessageHeader, MessageList, MessagePinnedHeader, MessageReplies, MessageRepliesAvatars, MessageSimple, MessageStatus, MessageSystem, MessageText, myMessageTheme, onLongPressMessage, onPressInMessage, onPressMessage, OverlayReactionList, ReactionList, removeMessage, Reply, retrySendMessage, ScrollToBottomButton, selectReaction, setEditingState, setQuotedMessageState, supportedReactions, targetedMessage, TypingIndicator, TypingIndicatorContainer, updateMessage, UrlPreview, }: MessagesContextValue<StreamChatGenerics> & {
     /**
      * To ensure we allow re-render, when channel is changed
      */

package/lib/typescript/components/ImageGallery/ImageGallery.d.ts

@@ -56,13 +56,7 @@ export declare type ImageGalleryCustomComponents<StreamChatGenerics extends Defa
 };
 declare type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ImageGalleryCustomComponents<StreamChatGenerics> & {
     overlayOpacity: Animated.SharedValue<number>;
-    imageGalleryGridHandleHeight?: number;
-    /**
-     * This should be
-     */
-    imageGalleryGridSnapPoints?: [string | number, string | number];
-    numberOfImageGalleryGridColumns?: number;
-} & Pick<OverlayProviderProps<StreamChatGenerics>, 'giphyVersion'>;
+} & Pick<OverlayProviderProps<StreamChatGenerics>, 'giphyVersion' | 'imageGalleryGridSnapPoints' | 'imageGalleryGridHandleHeight' | 'numberOfImageGalleryGridColumns'>;
 export declare const ImageGallery: {
     <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: Props<StreamChatGenerics>): JSX.Element;
     displayName: string;

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

@@ -30,7 +30,7 @@ export declare type MessageActionHandlers = {
     toggleMuteUser: () => Promise<void>;
     toggleReaction: (reactionType: string) => Promise<void>;
 };
-export declare type MessagePropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'> & Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'mutedUsers'> & Pick<KeyboardContextValue, 'dismissKeyboard'> & Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> & Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> & Pick<MessagesContextValue<StreamChatGenerics>, 'dismissKeyboardOnMessageTouch' | 'forceAlignMessages' | 'handleBlock' | 'handleCopy' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePinMessage' | 'handleQuotedReply' | 'handleReaction' | 'handleRetry' | 'handleThreadReply' | 'messageActions' | 'messageContentOrder' | 'MessageSimple' | 'onLongPressMessage' | 'onPressInMessage' | 'onPressMessage' | 'OverlayReactionList' | 'removeMessage' | 'retrySendMessage' | 'selectReaction' | 'setEditingState' | 'setQuotedMessageState' | 'supportedReactions' | 'updateMessage'> & Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> & Pick<OverlayContextValue, 'setOverlay'> & Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> & Pick<TranslationContextValue, 't'> & {
+export declare type MessagePropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'> & Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'mutedUsers'> & Pick<KeyboardContextValue, 'dismissKeyboard'> & Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> & Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> & Pick<MessagesContextValue<StreamChatGenerics>, 'dismissKeyboardOnMessageTouch' | 'forceAlignMessages' | 'handleBlock' | 'handleCopy' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePinMessage' | 'handleQuotedReply' | 'handleReaction' | 'handleRetry' | 'handleThreadReply' | 'isAttachmentEqual' | 'messageActions' | 'messageContentOrder' | 'MessageSimple' | 'onLongPressMessage' | 'onPressInMessage' | 'onPressMessage' | 'OverlayReactionList' | 'removeMessage' | 'retrySendMessage' | 'selectReaction' | 'setEditingState' | 'setQuotedMessageState' | 'supportedReactions' | 'updateMessage'> & Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> & Pick<OverlayContextValue, 'setOverlay'> & Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> & Pick<TranslationContextValue, 't'> & {
     messagesContext: MessagesContextValue<StreamChatGenerics>;
     /**
      * Whether or not users are able to long press messages.

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

@@ -3,7 +3,7 @@ import { MessageContextValue } from '../../../contexts/messageContext/MessageCon
 import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare type MessageContentPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'disabled' | 'goToMessage' | 'groupStyles' | 'hasReactions' | 'isMyMessage' | 'lastGroupMessage' | 'members' | 'message' | 'messageContentOrder' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'onPressIn' | 'otherAttachments' | 'preventPress' | 'showMessageStatus' | 'threadList'> & Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps' | 'Attachment' | 'FileAttachmentGroup' | 'formatDate' | 'Gallery' | 'MessageFooter' | 'MessageHeader' | 'MessageDeleted' | 'MessageReplies' | 'MessageStatus' | 'onPressInMessage' | 'Reply'> & Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
+export declare type MessageContentPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'disabled' | 'goToMessage' | 'groupStyles' | 'hasReactions' | 'isMyMessage' | 'lastGroupMessage' | 'members' | 'message' | 'messageContentOrder' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'onPressIn' | 'otherAttachments' | 'preventPress' | 'showMessageStatus' | 'threadList'> & Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps' | 'Attachment' | 'FileAttachmentGroup' | 'formatDate' | 'Gallery' | 'isAttachmentEqual' | 'MessageFooter' | 'MessageHeader' | 'MessageDeleted' | 'MessageReplies' | 'MessageStatus' | 'onPressInMessage' | 'Reply'> & Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
 };
 export declare type MessageContentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Omit<MessageContentPropsWithContext<StreamChatGenerics>, 'setMessageContentWidth'>> & Pick<MessageContentPropsWithContext<StreamChatGenerics>, 'setMessageContentWidth'>;

package/lib/typescript/contexts/messagesContext/MessagesContext.d.ts

@@ -272,6 +272,8 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     handleRetry?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
     /** Handler to access when a thread reply action is invoked */
     handleThreadReply?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
+    /** Handler to deal with custom memoization logic of Attachment */
+    isAttachmentEqual?: (prevAttachment: Attachment<StreamChatGenerics>, nextAttachment: Attachment<StreamChatGenerics>) => boolean;
     legacyImageViewerSwipeBehaviour?: boolean;
     /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
     markdownRules?: MarkdownRules;

package/lib/typescript/contexts/overlayContext/OverlayContext.d.ts

@@ -22,9 +22,9 @@ export declare type OverlayProviderProps<StreamChatGenerics extends DefaultStrea
     /**
      * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
      * */
-    giphyVersion: keyof NonNullable<Attachment['giphy']>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
+    giphyVersion?: keyof NonNullable<Attachment['giphy']>;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
     imageGalleryGridHandleHeight?: number;

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": "4.3.0-beta.4",
+  "version": "4.3.1-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Attachment.tsx

@@ -26,6 +26,7 @@ export type AttachmentPropsWithContext<
   | 'Gallery'
   | 'giphyVersion'
   | 'Giphy'
+  | 'isAttachmentEqual'
   | 'UrlPreview'
 > & {
   /**
@@ -101,15 +102,20 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: AttachmentPropsWithContext<StreamChatGenerics>,
   nextProps: AttachmentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { attachment: prevAttachment } = prevProps;
+  const { attachment: prevAttachment, isAttachmentEqual } = prevProps;
   const { attachment: nextAttachment } = nextProps;
 
   const attachmentEqual =
     prevAttachment.actions?.length === nextAttachment.actions?.length &&
     prevAttachment.image_url === nextAttachment.image_url &&
     prevAttachment.thumb_url === nextAttachment.thumb_url;
+  if (!attachmentEqual) return false;
 
-  return attachmentEqual;
+  if (isAttachmentEqual) {
+    return isAttachmentEqual(prevAttachment, nextAttachment);
+  }
+
+  return true;
 };
 
 const MemoizedAttachment = React.memo(
@@ -129,6 +135,7 @@ export type AttachmentProps<
     | 'Giphy'
     | 'giphyVersion'
     | 'UrlPreview'
+    | 'isAttachmentEqual'
   >
 > &
   Pick<AttachmentPropsWithContext<StreamChatGenerics>, 'attachment'>;
@@ -159,6 +166,7 @@ export const Attachment = <
     Gallery: ContextGallery,
     Giphy: ContextGiphy,
     giphyVersion: ContextGiphyVersion,
+    isAttachmentEqual,
     UrlPreview: ContextUrlPreview,
   } = useMessagesContext<StreamChatGenerics>();
 
@@ -185,6 +193,7 @@ export const Attachment = <
         Gallery,
         Giphy,
         giphyVersion,
+        isAttachmentEqual,
         UrlPreview,
       }}
     />

package/src/components/Channel/Channel.tsx

@@ -255,6 +255,7 @@ export type ChannelPropsWithContext<
       | 'handleThreadReply'
       | 'InlineDateSeparator'
       | 'InlineUnreadIndicator'
+      | 'isAttachmentEqual'
       | 'legacyImageViewerSwipeBehaviour'
       | 'markdownRules'
       | 'Message'
@@ -458,6 +459,7 @@ const ChannelWithContext = <
     InputEditingStateHeader = InputEditingStateHeaderDefault,
     InputGiphySearch = InputGiphyCommandInputDefault,
     InputReplyStateHeader = InputReplyStateHeaderDefault,
+    isAttachmentEqual,
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
@@ -1698,6 +1700,7 @@ const ChannelWithContext = <
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
+    isAttachmentEqual,
     legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,

package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.js

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import dispatchMessageUpdateEvent from '../../../mock-builders/event/messageUpdated';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+
+describe('Message', () => {
+  let channel;
+  let chatClient;
+
+  const user = generateUser({ id: 'id', name: 'name' });
+  const messages = [
+    generateMessage({
+      attachments: [{ customField: 'custom-field', type: 'test' }],
+      user,
+    }),
+  ];
+
+  beforeEach(async () => {
+    const members = [generateMember({ user })];
+    const mockedChannel = generateChannelResponse({
+      members,
+      messages,
+    });
+
+    chatClient = await getTestClientWithUser(user);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  const getMessageWithCustomFields = () => {
+    const isAttachmentEqualHandler = (prevProps, nextProps) => {
+      const propsEqual = prevProps.customField === nextProps.customField;
+      if (!propsEqual) return false;
+      return true;
+    };
+
+    return (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel
+            Card={({ customField, type }) => {
+              if (type === 'test') {
+                return <Text testID='attachment-custom-field'>{customField}</Text>;
+              }
+            }}
+            channel={channel}
+            isAttachmentEqual={isAttachmentEqualHandler}
+          >
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+  };
+
+  it('should render attachment with custom field', async () => {
+    const { getByText } = render(getMessageWithCustomFields());
+
+    await waitFor(() => {
+      expect(getByText('custom-field')).toBeTruthy();
+    });
+
+    act(() => {
+      dispatchMessageUpdateEvent(
+        chatClient,
+        {
+          ...messages[0],
+          attachments: [{ customField: 'custom-field-2', type: 'test' }],
+          updated_at: new Date(),
+        },
+        channel,
+      );
+    });
+
+    await waitFor(() => {
+      expect(getByText('custom-field-2')).toBeTruthy();
+    });
+  });
+});

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -42,6 +42,7 @@ export const useCreateMessagesContext = <
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
+  isAttachmentEqual,
   legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
@@ -127,6 +128,7 @@ export const useCreateMessagesContext = <
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,
+      isAttachmentEqual,
       legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -127,13 +127,13 @@ export type ImageGalleryCustomComponents<
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryCustomComponents<StreamChatGenerics> & {
     overlayOpacity: Animated.SharedValue<number>;
-    imageGalleryGridHandleHeight?: number;
-    /**
-     * This should be
-     */
-    imageGalleryGridSnapPoints?: [string | number, string | number];
-    numberOfImageGalleryGridColumns?: number;
-  } & Pick<OverlayProviderProps<StreamChatGenerics>, 'giphyVersion'>;
+  } & Pick<
+      OverlayProviderProps<StreamChatGenerics>,
+      | 'giphyVersion'
+      | 'imageGalleryGridSnapPoints'
+      | 'imageGalleryGridHandleHeight'
+      | 'numberOfImageGalleryGridColumns'
+    >;
 
 export const ImageGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -141,7 +141,7 @@ export const ImageGallery = <
   props: Props<StreamChatGenerics>,
 ) => {
   const {
-    giphyVersion,
+    giphyVersion = 'fixed_height',
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
     imageGalleryGridSnapPoints,
@@ -308,6 +308,7 @@ export const ImageGallery = <
    * Photos array created from all currently available
    * photo attachments
    */
+
   const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
       cur.attachments?.filter(

package/src/components/Message/Message.tsx

@@ -112,6 +112,7 @@ export type MessagePropsWithContext<
     | 'handleReaction'
     | 'handleRetry'
     | 'handleThreadReply'
+    | 'isAttachmentEqual'
     | 'messageActions'
     | 'messageContentOrder'
     | 'MessageSimple'
@@ -472,6 +473,7 @@ const MessageWithContext = <
     t,
     updateMessage,
   });
+
   const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
     await dismissKeyboard();
 
@@ -680,6 +682,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     goToMessage: prevGoToMessage,
+    isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
     lastReceivedId: prevLastReceivedId,
     members: prevMembers,
@@ -729,8 +732,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.updated_at === nextMessage.updated_at &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.pinned === nextMessage.pinned &&
+    prevMessage.updated_at === nextMessage.updated_at;
 
   if (!messageEqual) return false;
 
@@ -752,12 +755,20 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     (Array.isArray(prevMessageAttachments) &&
       Array.isArray(nextMessageAttachments) &&
       prevMessageAttachments.length === nextMessageAttachments.length &&
-      prevMessageAttachments.every((attachment, index) =>
-        attachment.type === 'image'
-          ? attachment.image_url === nextMessageAttachments[index].image_url &&
-            attachment.thumb_url === nextMessageAttachments[index].thumb_url
-          : attachment.type === nextMessageAttachments[index].type,
-      )) ||
+      prevMessageAttachments.every((attachment, index) => {
+        const attachmentKeysEqual =
+          attachment.type === 'image'
+            ? attachment.image_url === nextMessageAttachments[index].image_url &&
+              attachment.thumb_url === nextMessageAttachments[index].thumb_url
+            : attachment.type === nextMessageAttachments[index].type;
+
+        if (isAttachmentEqual)
+          return (
+            attachmentKeysEqual && !!isAttachmentEqual(attachment, nextMessageAttachments[index])
+          );
+
+        return attachmentKeysEqual;
+      })) ||
     prevMessageAttachments === nextMessageAttachments;
   if (!attachmentsEqual) return false;
 

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

@@ -84,6 +84,7 @@ export type MessageContentPropsWithContext<
     | 'FileAttachmentGroup'
     | 'formatDate'
     | 'Gallery'
+    | 'isAttachmentEqual'
     | 'MessageFooter'
     | 'MessageHeader'
     | 'MessageDeleted'
@@ -371,6 +372,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
+    isAttachmentEqual,
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
     message: prevMessage,
@@ -402,7 +404,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 
   const goToMessageChangedAndMatters =
     nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
-
   if (goToMessageChangedAndMatters) return false;
 
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
@@ -431,7 +432,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned;
-
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
@@ -440,21 +440,28 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
     isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
-
   if (!quotedMessageEqual) return false;
 
-  const prevAttachments = prevMessage.attachments;
-  const nextAttachments = nextMessage.attachments;
+  const prevMessageAttachments = prevMessage.attachments;
+  const nextMessageAttachments = nextMessage.attachments;
   const attachmentsEqual =
-    Array.isArray(prevAttachments) && Array.isArray(nextAttachments)
-      ? prevAttachments.length === nextAttachments.length &&
-        prevAttachments.every(
-          (attachment, index) =>
-            attachment.image_url === nextAttachments[index].image_url &&
-            attachment.og_scrape_url === nextAttachments[index].og_scrape_url &&
-            attachment.thumb_url === nextAttachments[index].thumb_url,
-        )
-      : prevAttachments === nextAttachments;
+    Array.isArray(prevMessageAttachments) &&
+    Array.isArray(nextMessageAttachments) &&
+    prevMessageAttachments.length === nextMessageAttachments.length &&
+    prevMessageAttachments.every((attachment, index) => {
+      const attachmentKeysEqual =
+        attachment.type === 'image'
+          ? attachment.image_url === nextMessageAttachments[index].image_url &&
+            attachment.thumb_url === nextMessageAttachments[index].thumb_url
+          : attachment.type === nextMessageAttachments[index].type;
+
+      if (isAttachmentEqual)
+        return (
+          attachmentKeysEqual && !!isAttachmentEqual(attachment, nextMessageAttachments[index])
+        );
+
+      return attachmentKeysEqual;
+    });
   if (!attachmentsEqual) return false;
 
   const latestReactionsEqual =
@@ -527,6 +534,7 @@ export const MessageContent = <
     FileAttachmentGroup,
     formatDate,
     Gallery,
+    isAttachmentEqual,
     MessageDeleted,
     MessageFooter,
     MessageHeader,
@@ -549,6 +557,7 @@ export const MessageContent = <
         goToMessage,
         groupStyles,
         hasReactions,
+        isAttachmentEqual,
         isMyMessage,
         lastGroupMessage,
         lastReceivedId,

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -144,18 +144,21 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const channelEqual = prevChannel?.state.messages.length === nextChannel?.state.messages.length;
   if (!channelEqual) return false;
 
-  const prevAttachments = prevMessage.attachments;
-  const nextAttachments = nextMessage.attachments;
+  const prevMessageAttachments = prevMessage.attachments;
+  const nextMessageAttachments = nextMessage.attachments;
   const attachmentsEqual =
-    Array.isArray(prevAttachments) && Array.isArray(nextAttachments)
-      ? prevAttachments.length === nextAttachments.length &&
-        prevAttachments.every(
-          (attachment, index) =>
-            attachment.image_url === nextAttachments[index].image_url &&
-            attachment.og_scrape_url === nextAttachments[index].og_scrape_url &&
-            attachment.thumb_url === nextAttachments[index].thumb_url,
-        )
-      : prevAttachments === nextAttachments;
+    Array.isArray(prevMessageAttachments) &&
+    Array.isArray(nextMessageAttachments) &&
+    prevMessageAttachments.length === nextMessageAttachments.length &&
+    prevMessageAttachments.every((attachment, index) => {
+      const attachmentKeysEqual =
+        attachment.type === 'image'
+          ? attachment.image_url === nextMessageAttachments[index].image_url &&
+            attachment.thumb_url === nextMessageAttachments[index].thumb_url
+          : attachment.type === nextMessageAttachments[index].type;
+
+      return attachmentKeysEqual;
+    });
   if (!attachmentsEqual) return false;
 
   const latestReactionsEqual =

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -296,6 +296,11 @@ export type MessagesContextValue<
   handleRetry?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
   handleThreadReply?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
+  /** Handler to deal with custom memoization logic of Attachment */
+  isAttachmentEqual?: (
+    prevAttachment: Attachment<StreamChatGenerics>,
+    nextAttachment: Attachment<StreamChatGenerics>,
+  ) => boolean;
   legacyImageViewerSwipeBehaviour?: boolean;
   /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
   markdownRules?: MarkdownRules;

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -56,9 +56,9 @@ export type OverlayProviderProps<
     /**
      * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
      * */
-    giphyVersion: keyof NonNullable<Attachment['giphy']>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
+    giphyVersion?: keyof NonNullable<Attachment['giphy']>;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
     imageGalleryGridHandleHeight?: number;

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -81,7 +81,7 @@ export const OverlayProvider = <
       }
     },
     FileSelectorIcon = DefaultFileSelectorIcon,
-    giphyVersion = 'fixed_height',
+    giphyVersion,
     i18nInstance,
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.3.0-beta.4"
+  "version": "4.3.1-beta.1"
 }