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

package/src/components/Thread/Thread.tsx

@@ -2,10 +2,6 @@ import React, { useEffect } from 'react';
 
 import { ThreadFooterComponent } from './components/ThreadFooterComponent';
 
-import {
-  MessageInput as DefaultMessageInput,
-  MessageInputProps,
-} from '../MessageInput/MessageInput';
 import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
@@ -14,8 +10,6 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
-import type { MessageListProps } from '../MessageList/MessageList';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -26,6 +20,11 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import {
+  MessageInput as DefaultMessageInput,
+  MessageInputProps,
+} from '../MessageInput/MessageInput';
+import type { MessageListProps } from '../MessageList/MessageList';
 
 type ThreadPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Thread/__tests__/Thread.test.js

@@ -1,26 +1,24 @@
 import React from 'react';
+
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { v5 as uuidv5 } from 'uuid';
 
-import { Thread } from '../Thread';
-
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
-
+import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { ChannelContext } from '../../../contexts/channelContext/ChannelContext';
-import { Streami18n } from '../../../utils/Streami18n';
-
+import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
+import { ImageGalleryProvider } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
-import { ImageGalleryProvider } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
-import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
-import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { Thread } from '../Thread';
 
 const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035';
 
@@ -37,7 +35,7 @@ describe('Thread', () => {
       generateMessage({ parent_id }),
     ];
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       messages: [thread, thread2],
     });
 
@@ -77,7 +75,7 @@ describe('Thread', () => {
       generateStaticMessage('Message6', { parent_id, user: user1 }, '2020-05-05T14:50:00.000Z'),
     ];
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       channel: {
         id: uuidv5('Channel', StreamReactNativeNamespace),
       },

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -68,9 +68,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "GrantyBoi2",
-                "image": "https://i.imgur.com/SLx06PP.png",
-                "name": "Grant",
+                "id": "arthur",
+                "image": "https://i.imgur.com/LuuGvh0.png",
+                "name": "Arthur",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -96,9 +96,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "NeiliBoi3",
-                "image": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
-                "name": "Neil",
+                "id": "finn",
+                "image": "https://i.imgur.com/spueyAP.png",
+                "name": "Finn",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -124,9 +124,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "GrantyBoi2",
-                "image": "https://i.imgur.com/SLx06PP.png",
-                "name": "Grant",
+                "id": "arthur",
+                "image": "https://i.imgur.com/LuuGvh0.png",
+                "name": "Arthur",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -314,7 +314,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               onError={[Function]}
                               source={
                                 Object {
-                                  "uri": "https://i.imgur.com/SLx06PP.png",
+                                  "uri": "https://i.imgur.com/LuuGvh0.png",
                                 }
                               }
                               style={
@@ -561,7 +561,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               onError={[Function]}
                               source={
                                 Object {
-                                  "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
+                                  "uri": "https://i.imgur.com/spueyAP.png",
                                 }
                               }
                               style={
@@ -808,7 +808,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               onError={[Function]}
                               source={
                                 Object {
-                                  "uri": "https://i.imgur.com/SLx06PP.png",
+                                  "uri": "https://i.imgur.com/LuuGvh0.png",
                                 }
                               }
                               style={
@@ -1098,7 +1098,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 onError={[Function]}
                                 source={
                                   Object {
-                                    "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
+                                    "uri": "https://i.imgur.com/spueyAP.png",
                                   }
                                 }
                                 style={

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,8 +12,6 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { vw } from '../../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -24,6 +22,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Attachment/FileAttachmentGroup';
 export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
+export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
@@ -143,6 +144,7 @@ export * from './MessageOverlay/MessageActionListItem';
 export * from './MessageOverlay/MessageOverlay';
 export * from './MessageOverlay/OverlayBackdrop';
 export * from './MessageOverlay/OverlayReactions';
+export * from './MessageOverlay/OverlayReactionsAvatar';
 export * from './MessageOverlay/OverlayReactionList';
 
 export * from './Reply/Reply';

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -1,8 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 type ActiveChannels = React.MutableRefObject<string[]>;
 

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Asset } from '../../native';
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
   numberOfImageUploads: number;

package/src/contexts/channelContext/ChannelContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Channel, ChannelState } from 'stream-chat';
 
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
@@ -16,6 +14,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -1,12 +1,14 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { FlatListProps } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
+
+import type { ChannelPreviewMutedStatusProps } from 'src/components/ChannelPreview/ChannelPreviewMutedStatus';
+
 import type { Channel } from 'stream-chat';
 
 import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
+import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
 import type { ChannelAvatarProps } from '../../components/ChannelPreview/ChannelAvatar';
 import type { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
@@ -26,6 +28,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelsContextValue<
   At extends UnknownType = DefaultAttachmentType,
@@ -64,10 +67,6 @@ export type ChannelsContextValue<
    * Default: [EmptyStateIndicator](https://getstream.github.io/stream-chat-react-native/v3/#emptystateindicator)
    * */
   EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
-  /**
-   * Error in channels query, if any
-   */
-  error: boolean | Error;
   /**
    * Custom loading indicator to display at bottom of the list, while loading further pages
    *
@@ -121,7 +120,7 @@ export type ChannelsContextValue<
   /**
    * Loads the next page of `channels`, which is present as a required prop
    */
-  loadNextPage: ((queryType?: string, retryCount?: number) => Promise<void>) | undefined;
+  loadNextPage: QueryChannels | undefined;
   /**
    * Max number to display within notification badge. Default: 255 and it cannot be higher than that for now due to backend limitations
    */
@@ -174,6 +173,10 @@ export type ChannelsContextValue<
    * Default: [Skeleton](https://getstream.github.io/stream-chat-react-native/v3/#skeleton)
    */
   Skeleton: React.ComponentType;
+  /**
+   * Error in channels query, if any
+   */
+  error?: Error;
   ListHeaderComponent?: React.ComponentType;
   /**
    * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
@@ -193,6 +196,14 @@ export type ChannelsContextValue<
    * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
    */
   PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom UI component to render muted status.
+   *
+   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
+   */
+  PreviewMutedStatus?: React.ComponentType<
+    ChannelPreviewMutedStatusProps<At, Ch, Co, Ev, Me, Re, Us>
+  >;
   /**
    * Custom UI component to render preview avatar.
    *

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -8,14 +8,6 @@ import React, {
   useRef,
 } from 'react';
 
-import { ActiveChannelsProvider } from '../activeChannelsRefContext/ActiveChannelsRefContext';
-
-import type { ChannelContextValue } from '../channelContext/ChannelContext';
-import type { PaginatedMessageListContextValue } from '../paginatedMessageListContext/PaginatedMessageListContext';
-import type { ThreadContextValue } from '../threadContext/ThreadContext';
-import type { TypingContextValue } from '../typingContext/TypingContext';
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -26,6 +18,13 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { ActiveChannelsProvider } from '../activeChannelsRefContext/ActiveChannelsRefContext';
+
+import type { ChannelContextValue } from '../channelContext/ChannelContext';
+import type { PaginatedMessageListContextValue } from '../paginatedMessageListContext/PaginatedMessageListContext';
+import type { ThreadContextValue } from '../threadContext/ThreadContext';
+import type { TypingContextValue } from '../typingContext/TypingContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelState<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+
 import type { Channel as ChannelType } from 'stream-chat';
 
 import { useChannelsStateContext } from './ChannelsStateContext';

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Channel, Mute, StreamChat } from 'stream-chat';
 
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChatContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
@@ -13,6 +11,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ImageGalleryContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/keyboardContext/KeyboardContext.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import { Keyboard } from 'react-native';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type KeyboardContextValue = {
   dismissKeyboard: () => void;

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Attachment } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
@@ -19,6 +17,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type Alignment = 'right' | 'left';
 

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,6 +1,10 @@
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
 import { Alert, Keyboard } from 'react-native';
+
+import type { TextInput, TextInputProps } from 'react-native';
+
 import uniq from 'lodash/uniq';
+import { lookup } from 'mime-types';
 import {
   Attachment,
   logChatPromiseExecution,
@@ -16,34 +20,11 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
-import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
-import { useChatContext } from '../chatContext/ChatContext';
-import { ChannelContextValue, useChannelContext } from '../channelContext/ChannelContext';
-import { useThreadContext } from '../threadContext/ThreadContext';
-import { getDisplayName } from '../utils/getDisplayName';
-import { useCooldown } from '../../components/MessageInput/hooks/useCooldown';
-
-import {
-  ACITriggerSettings,
-  ACITriggerSettingsParams,
-  FileState,
-  generateRandomId,
-  TriggerSettings,
-  urlRegex,
-} from '../../utils/utils';
-
-import { Asset, compressImage, getLocalAssetUri, pickDocument } from '../../native';
-
-import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
-import { useTranslationContext } from '../translationContext/TranslationContext';
-
-import type { TextInput, TextInputProps } from 'react-native';
-import { lookup } from 'mime-types';
-
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
 import type { CooldownTimerProps } from '../../components/MessageInput/CooldownTimer';
 import type { FileUploadPreviewProps } from '../../components/MessageInput/FileUploadPreview';
+import { useCooldown } from '../../components/MessageInput/hooks/useCooldown';
 import type { ImageUploadPreviewProps } from '../../components/MessageInput/ImageUploadPreview';
 import type { InputButtonsProps } from '../../components/MessageInput/InputButtons';
 import type { MessageInputProps } from '../../components/MessageInput/MessageInput';
@@ -51,6 +32,7 @@ import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreO
 import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { Asset, compressImage, getLocalAssetUri, pickDocument } from '../../native';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -61,6 +43,21 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import {
+  ACITriggerSettings,
+  ACITriggerSettingsParams,
+  FileState,
+  generateRandomId,
+  TriggerSettings,
+  urlRegex,
+} from '../../utils/utils';
+import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
+import { ChannelContextValue, useChannelContext } from '../channelContext/ChannelContext';
+import { useChatContext } from '../chatContext/ChatContext';
+import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { useThreadContext } from '../threadContext/ThreadContext';
+import { useTranslationContext } from '../translationContext/TranslationContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type FileUpload = {
   file: {
@@ -80,7 +77,9 @@ export type ImageUpload = {
   };
   id: string;
   state: string;
+  height?: number;
   url?: string;
+  width?: number;
 };
 
 export type MentionAllAppUsersQuery<Us extends DefaultUserType> = {
@@ -670,6 +669,8 @@ export const MessageInputProvider = <
         attachments.push({
           fallback: image.file.name,
           image_url: image.url,
+          original_height: image.height,
+          original_width: image.width,
           type: 'image',
         } as Attachment<At>);
       }
@@ -983,8 +984,10 @@ export const MessageInputProvider = <
             if (imageUpload.id === id) {
               return {
                 ...imageUpload,
+                height: file.height,
                 state: FileState.UPLOADED,
                 url: response.file,
+                width: file.width,
               };
             }
             return imageUpload;

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -1,9 +1,5 @@
 import { useMemo } from 'react';
 
-import type { MessageInputContextValue } from '../MessageInputContext';
-
-import type { ThreadContextValue } from '../../threadContext/ThreadContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -14,6 +10,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { ThreadContextValue } from '../../threadContext/ThreadContext';
+import type { MessageInputContextValue } from '../MessageInputContext';
 
 export const useCreateMessageInputContext = <
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -1,9 +1,5 @@
 import { useEffect, useState } from 'react';
 
-import { generateRandomId } from '../../../utils/utils';
-
-import type { FileUpload, ImageUpload, MessageInputContextValue } from '../MessageInputContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -14,6 +10,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { generateRandomId } from '../../../utils/utils';
+
+import type { FileUpload, ImageUpload, MessageInputContextValue } from '../MessageInputContext';
 
 export const isEditingBoolean = <
   At extends UnknownType = DefaultAttachmentType,
@@ -41,12 +40,7 @@ export const useMessageDetailsForState = <
 ) => {
   const [fileUploads, setFileUploads] = useState<FileUpload[]>([]);
   const [imageUploads, setImageUploads] = useState<ImageUpload[]>([]);
-  const [mentionedUsers, setMentionedUsers] = useState(
-    (!isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message) &&
-      Array.isArray(message?.mentioned_users) &&
-      message.mentioned_users.map((user) => user.id)) ||
-      [],
-  );
+  const [mentionedUsers, setMentionedUsers] = useState<string[]>([]);
   const [numberOfUploads, setNumberOfUploads] = useState(0);
   const [showMoreOptions, setShowMoreOptions] = useState(true);
   const initialTextValue = initialValue || '';
@@ -60,6 +54,17 @@ export const useMessageDetailsForState = <
 
   const messageValue =
     typeof message === 'boolean' ? '' : `${message.id}${message.text}${message.updated_at}`;
+
+  useEffect(() => {
+    if (
+      !isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message) &&
+      Array.isArray(message?.mentioned_users)
+    ) {
+      const mentionedUsers = message.mentioned_users.map((user) => user.id);
+      setMentionedUsers(mentionedUsers);
+    }
+  }, [messageValue]);
+
   useEffect(() => {
     if (message && !isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message)) {
       setText(message?.text || '');

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,21 +1,18 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
-
-import { getDisplayName } from '../utils/getDisplayName';
+import React, { PropsWithChildren, useContext } from 'react';
 
 import type { Attachment } from 'stream-chat';
 
-import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
-import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
-import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import { useResettableState } from './hooks/useResettableState';
 
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
 import type {
   MessageActionListItemProps,
   MessageActionType,
 } from '../../components/MessageOverlay/MessageActionListItem';
-import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
+import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -27,6 +24,10 @@ import type {
   UnknownType,
 } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
+import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type MessageOverlayData<
   At extends UnknownType = DefaultAttachmentType,
@@ -84,6 +85,7 @@ export type MessageOverlayContextValue<
    * **Default** [OverlayReactions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/OverlayReactions.tsx)
    */
   OverlayReactions: React.ComponentType<OverlayReactionsProps>;
+  OverlayReactionsAvatar: React.ComponentType<OverlayReactionsAvatarProps>;
   reset: () => void;
   setData: React.Dispatch<React.SetStateAction<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>>>;
   data?: MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>;
@@ -105,18 +107,7 @@ export const MessageOverlayProvider = <
 }: PropsWithChildren<{
   value?: MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>;
 }>) => {
-  const [data, setData] = useState(value?.data);
-
-  const reset = () => {
-    // TODO: Add the isMounted check here.
-    setData(value?.data);
-  };
-
-  const messageOverlayContext = {
-    data,
-    reset,
-    setData,
-  };
+  const messageOverlayContext = useResettableState(value);
   return (
     <MessageOverlayContext.Provider value={messageOverlayContext as MessageOverlayContextValue}>
       {children}