stream-chat-react-native-core 7.0.0-rc.9 → 7.0.0

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

@@ -45,6 +45,7 @@ export const useCreateMessagesContext = ({
   hasCreatePoll,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -162,6 +163,7 @@ export const useCreateMessagesContext = ({
       hasCreatePoll,
       ImageLoadingFailedIndicator,
       ImageLoadingIndicator,
+      ImageReloadIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/components/Chat/Chat.tsx

@@ -308,15 +308,6 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
  * - connectionRecovering - whether or not websocket is reconnecting
  * - isOnline - whether or not set user is active
  * - setActiveChannel - function to set the currently active channel
- *
- * The Chat Component takes the following generics in order:
- * - At (AttachmentType) - custom Attachment object extension
- * - Ct (ChannelType) - custom Channel object extension
- * - Co (CommandType) - custom Command string union extension
- * - Ev (EventType) - custom Event object extension
- * - Me (MessageType) - custom Message object extension
- * - Re (ReactionType) - custom Reaction object extension
- * - Us (UserType) - custom User object extension
  */
 export const Chat = (props: PropsWithChildren<ChatProps>) => {
   const { style } = useOverlayContext();

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -4,6 +4,8 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -18,7 +20,6 @@ import {
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
@@ -56,7 +57,7 @@ describe('ImageGallery', () => {
               generateVideoAttachment({ type: 'video' }),
             ],
           }),
-        ] as unknown as MessageType[],
+        ] as unknown as LocalMessage[],
       }),
     );
 
@@ -73,7 +74,7 @@ describe('ImageGallery', () => {
     });
     render(
       getComponent({
-        messages: [message] as unknown as MessageType[],
+        messages: [message] as unknown as LocalMessage[],
       }),
     );
 
@@ -102,7 +103,7 @@ describe('ImageGallery', () => {
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
-        ] as unknown as MessageType[],
+        ] as unknown as LocalMessage[],
       }),
     );
 
@@ -128,7 +129,7 @@ describe('ImageGallery', () => {
 
     render(
       getComponent({
-        messages: [message] as unknown as MessageType[],
+        messages: [message] as unknown as LocalMessage[],
       }),
     );
 
@@ -163,7 +164,7 @@ describe('ImageGallery', () => {
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
-        ] as unknown as MessageType[],
+        ] as unknown as LocalMessage[],
       }),
     );
 
@@ -193,7 +194,7 @@ describe('ImageGallery', () => {
     });
     render(
       getComponent({
-        messages: [message] as unknown as MessageType[],
+        messages: [message] as unknown as LocalMessage[],
       }),
     );
 

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

@@ -7,6 +7,8 @@ import { ReactTestInstance } from 'react-test-renderer';
 
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { Chat } from '../../../components/Chat/Chat';
 import {
   ImageGalleryContext,
@@ -20,7 +22,6 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { NativeHandlers } from '../../../native';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
@@ -76,7 +77,7 @@ describe('ImageGalleryFooter', () => {
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -131,7 +132,7 @@ describe('ImageGalleryFooter', () => {
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -174,7 +175,7 @@ describe('ImageGalleryFooter', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >

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

@@ -7,6 +7,8 @@ import { act } from 'react-test-renderer';
 
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { Chat } from '../../../components/Chat/Chat';
 import {
   ImageGalleryContext,
@@ -24,7 +26,6 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
@@ -71,7 +72,7 @@ describe('ImageGalleryHeader', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -118,7 +119,7 @@ describe('ImageGalleryHeader', () => {
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -158,7 +159,7 @@ describe('ImageGalleryHeader', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >

package/src/components/ImageGallery/__tests__/ImageGalleryOverlay.test.tsx

@@ -7,6 +7,8 @@ import { act } from 'react-test-renderer';
 
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { Chat } from '../../../components/Chat/Chat';
 import {
   ImageGalleryContext,
@@ -20,7 +22,6 @@ import { generateImageAttachment } from '../../../mock-builders/generator/attach
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGalleryOverlay } from '../components/ImageGalleryOverlay';
 
 describe('ImageGalleryOverlay', () => {
@@ -39,7 +40,7 @@ describe('ImageGalleryOverlay', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -58,7 +58,12 @@ export class KeyboardCompatibleView extends React.Component<
 
   _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics) {
     const frame = this._frame;
-    if (!frame || !keyboardFrame) {
+    /**
+     * With iOS 14 & Reduce Motion > Prefer Cross-Fade Transitions enabled, the keyboard position
+     * height is reported differently (0 instead of Y position value) which caused the view to take full height
+     * of the screen.
+     */
+    if (!frame || !keyboardFrame || keyboardFrame.screenY === 0) {
       return 0;
     }
 

package/src/components/Message/Message.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
-import type { Attachment, UserResponse } from 'stream-chat';
+import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -41,11 +41,7 @@ import {
   MessageStatusTypes,
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
-
-import {
-  isMessageWithStylesReadByAndDateSeparator,
-  MessageType,
-} from '../MessageList/hooks/useMessageList';
+import { getReadState } from '../MessageList/utils/getReadState';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -114,7 +110,7 @@ export type MessagePressableHandlerPayload = PressableHandlerPayload & {
   /**
    * Message object, on which interaction occurred.
    */
-  message?: MessageType;
+  message?: LocalMessage;
 };
 
 export type MessageActionHandlers = {
@@ -130,7 +126,7 @@ export type MessageActionHandlers = {
   toggleMuteUser: () => Promise<void>;
   toggleReaction: (reactionType: string) => Promise<void>;
   unpinMessage: () => Promise<void>;
-  threadReply?: (message: MessageType) => Promise<void>;
+  threadReply?: (message: LocalMessage) => Promise<void>;
 };
 
 export type MessagePropsWithContext = Pick<
@@ -194,7 +190,7 @@ export type MessagePropsWithContext = Pick<
      *
      * @param message A message object to open the thread upon.
      */
-    onThreadSelect?: (message: MessageType) => void;
+    onThreadSelect?: (message: LocalMessage) => void;
     showUnreadUnderlay?: boolean;
     style?: StyleProp<ViewStyle>;
   };
@@ -267,6 +263,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     threadList = false,
     updateMessage,
   } = props;
+  const { read } = useChannelContext();
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
@@ -281,6 +278,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       screenPadding,
     },
   } = useTheme();
+  const readBy = useMemo(() => getReadState(message, read), [message, read]);
 
   const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => {
     await dismissKeyboard();
@@ -312,7 +310,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
   };
 
-  const onPressQuotedMessage = (quotedMessage: MessageType) => {
+  const onPressQuotedMessage = (quotedMessage: LocalMessage) => {
     if (!goToMessage) {
       return;
     }
@@ -329,7 +327,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     if (isEditedMessage(message)) {
       setIsEditedMessageOpen((prevState) => !prevState);
     }
-    const quotedMessage = message.quoted_message as MessageType;
+    const quotedMessage = message.quoted_message;
     if (error) {
       setIsErrorInMessage(true);
       /**
@@ -693,6 +691,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     otherAttachments: attachments.other,
     preventPress,
     reactions,
+    readBy,
     setIsEditedMessageOpen,
     showAvatar,
     showMessageOverlay,
@@ -814,8 +813,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
 
   const messageEqual =
     isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
-    (isMessageWithStylesReadByAndDateSeparator(prevMessage) && prevMessage.readBy) ===
-      (isMessageWithStylesReadByAndDateSeparator(nextMessage) && nextMessage.readBy) &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, LocalMessage } from 'stream-chat';
 
 import type { MessageStatusProps } from './MessageStatus';
 
@@ -21,7 +21,6 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Eye } from '../../../icons';
 
 import { isEditedMessage, MessageStatusTypes } from '../../../utils/utils';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 type MessageFooterComponentProps = {
   date?: string | Date;
@@ -271,7 +270,7 @@ export type MessageFooterProps = Partial<Pick<ChannelContextValue, 'members'>> &
   MessageFooterComponentProps & {
     alignment?: Alignment;
     lastGroupMessage?: boolean;
-    message?: MessageType;
+    message?: LocalMessage;
     MessageStatus?: React.ComponentType<MessageStatusProps>;
     otherAttachments?: Attachment[];
     showMessageStatus?: boolean;

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

@@ -10,16 +10,16 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Check } from '../../../icons/Check';
 import { CheckAll } from '../../../icons/CheckAll';
 import { Time } from '../../../icons/Time';
-
 import { MessageStatusTypes } from '../../../utils/utils';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
-export type MessageStatusPropsWithContext = Pick<MessageContextValue, 'message' | 'threadList'>;
+export type MessageStatusPropsWithContext = Pick<
+  MessageContextValue,
+  'message' | 'readBy' | 'threadList'
+>;
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
   const { channel } = useChannelContext();
-  const { message, threadList } = props;
+  const { message, readBy, threadList } = props;
 
   const {
     theme: {
@@ -42,17 +42,17 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     return null;
   }
 
-  if (isMessageWithStylesReadByAndDateSeparator(message)) {
+  if (readBy) {
     const members = channel?.state.members;
     const otherMembers = Object.values(members).filter(
       (member) => member.user_id !== message.user?.id,
     );
     const hasOtherMembersGreaterThanOne = otherMembers.length > 1;
-    const hasReadByGreaterThanOne = typeof message.readBy === 'number' && message.readBy > 1;
+    const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
     const shouldDisplayReadByCount = hasOtherMembersGreaterThanOne && hasReadByGreaterThanOne;
     const countOfReadBy =
-      typeof message.readBy === 'number' && hasOtherMembersGreaterThanOne ? message.readBy - 1 : 0;
-    const showDoubleCheck = hasReadByGreaterThanOne || message.readBy === true;
+      typeof readBy === 'number' && hasOtherMembersGreaterThanOne ? readBy - 1 : 0;
+    const showDoubleCheck = hasReadByGreaterThanOne || readBy === true;
 
     return (
       <View style={[styles.statusContainer, statusContainer]}>
@@ -90,19 +90,21 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const { message: prevMessage, threadList: prevThreadList } = prevProps;
-  const { message: nextMessage, threadList: nextThreadList } = nextProps;
+  const { message: prevMessage, readBy: prevReadBy, threadList: prevThreadList } = prevProps;
+  const { message: nextMessage, readBy: nextReadBy, threadList: nextThreadList } = nextProps;
 
   const threadListEqual = prevThreadList === nextThreadList;
   if (!threadListEqual) {
     return false;
   }
 
+  const readByEqual = prevReadBy === nextReadBy;
+  if (!readByEqual) {
+    return false;
+  }
+
   const messageEqual =
-    prevMessage.status === nextMessage.status &&
-    prevMessage.type === nextMessage.type &&
-    (isMessageWithStylesReadByAndDateSeparator(prevMessage) && prevMessage.readBy) ===
-      (isMessageWithStylesReadByAndDateSeparator(nextMessage) && nextMessage.readBy);
+    prevMessage.status === nextMessage.status && prevMessage.type === nextMessage.type;
   if (!messageEqual) {
     return false;
   }
@@ -118,9 +120,9 @@ const MemoizedMessageStatus = React.memo(
 export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 
 export const MessageStatus = (props: MessageStatusProps) => {
-  const { message, threadList } = useMessageContext();
+  const { message, readBy, threadList } = useMessageContext();
 
-  return <MemoizedMessageStatus {...{ message, threadList }} {...props} />;
+  return <MemoizedMessageStatus {...{ message, readBy, threadList }} {...props} />;
 };
 
 MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { renderText, RenderTextParams } from './utils/renderText';
 
 import {
@@ -16,8 +18,6 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import type { MarkdownStyle, Theme } from '../../../contexts/themeContext/utils/theme';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
-
 const styles = StyleSheet.create({
   textContainer: { maxWidth: 250, paddingHorizontal: 16 },
 });
@@ -71,7 +71,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     },
   } = theme;
 
-  const translatedMessage = useTranslatedMessage(message) as MessageType;
+  const translatedMessage = useTranslatedMessage(message) as LocalMessage;
 
   if (!message.text) {
     return null;

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -72,26 +72,32 @@ describe('MessageStatus', () => {
 
   it('should render message status with read by container', async () => {
     const user = generateUser();
-    const message = generateMessage({ readBy: 2, user });
+    const message = generateMessage({ user });
+    const readBy = 2;
 
     const { getByTestId, getByText, rerender, toJSON } = renderMessageStatus({
       lastReceivedId: message.id,
       message,
+      readBy,
     });
 
     await waitFor(() => {
       expect(getByTestId('read-by-container')).toBeTruthy();
-      expect(getByText((message.readBy - 1).toString())).toBeTruthy();
+      expect(getByText((readBy - 1).toString())).toBeTruthy();
     });
 
     const staticUser = generateStaticUser(0);
-    const staticMessage = generateMessage({ readBy: 2, staticUser });
+    const staticMessage = generateMessage({ readBy, user: staticUser });
 
     rerender(
       <ChannelsStateProvider>
         <Chat client={chatClient} i18nInstance={i18nInstance}>
           <Channel channel={channel}>
-            <MessageStatus lastReceivedId={staticMessage.id} message={staticMessage} />
+            <MessageStatus
+              lastReceivedId={staticMessage.id}
+              message={staticMessage}
+              readBy={readBy}
+            />
           </Channel>
         </Chat>
       </ChannelsStateProvider>,
@@ -100,7 +106,7 @@ describe('MessageStatus', () => {
     await waitFor(() => {
       expect(toJSON()).toMatchSnapshot();
       expect(getByTestId('read-by-container')).toBeTruthy();
-      expect(getByText((staticMessage.readBy - 1).toString())).toBeTruthy();
+      expect(getByText((readBy - 1).toString())).toBeTruthy();
     });
   });
 

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx

@@ -3,6 +3,8 @@ import { Text } from 'react-native';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -17,7 +19,6 @@ import { generateStaticUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 import { MessageList } from '../../../MessageList/MessageList';
 import { MessageTextContainer } from '../MessageTextContainer';
 
@@ -31,7 +32,7 @@ describe('MessageTextContainer', () => {
     });
     const { getByTestId, getByText, rerender, toJSON } = render(
       <ThemeProvider theme={defaultTheme}>
-        <MessageTextContainer message={message as unknown as MessageType} />
+        <MessageTextContainer message={message as unknown as LocalMessage} />
       </ThemeProvider>,
     );
 
@@ -43,7 +44,7 @@ describe('MessageTextContainer', () => {
     rerender(
       <ThemeProvider theme={defaultTheme}>
         <MessageTextContainer
-          message={message as unknown as MessageType}
+          message={message as unknown as LocalMessage}
           MessageText={({ message }) => <Text testID='message-text'>{message?.text}</Text>}
         />
       </ThemeProvider>,
@@ -61,7 +62,7 @@ describe('MessageTextContainer', () => {
 
     rerender(
       <ThemeProvider theme={defaultTheme}>
-        <MessageTextContainer message={staticMessage as unknown as MessageType} />
+        <MessageTextContainer message={staticMessage as unknown as LocalMessage} />
       </ThemeProvider>,
     );
 

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

@@ -26,7 +26,7 @@ import {
   State,
 } from 'simple-markdown';
 
-import type { UserResponse } from 'stream-chat';
+import type { LocalMessage, UserResponse } from 'stream-chat';
 
 import { generateMarkdownText } from './generateMarkdownText';
 
@@ -34,7 +34,6 @@ import type { MessageContextValue } from '../../../../contexts/messageContext/Me
 import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
 
 import { escapeRegExp } from '../../../../utils/utils';
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
 type ReactNodeOutput = NodeOutput<React.ReactNode>;
 type ReactOutput = Output<React.ReactNode>;
@@ -162,7 +161,7 @@ export type RenderTextParams = Partial<
   Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'preventPress'>
 > & {
   colors: typeof Colors;
-  message: MessageType;
+  message: LocalMessage;
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
   messageOverlay?: boolean;

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -34,6 +34,7 @@ export const useCreateMessageContext = ({
   otherAttachments,
   preventPress,
   reactions,
+  readBy,
   setIsEditedMessageOpen,
   showAvatar,
   showMessageOverlay,
@@ -81,6 +82,7 @@ export const useCreateMessageContext = ({
       otherAttachments,
       preventPress,
       reactions,
+      readBy,
       setIsEditedMessageOpen,
       showAvatar,
       showMessageOverlay,
@@ -103,6 +105,7 @@ export const useCreateMessageContext = ({
       stringifiedMessage,
       myMessageThemeString,
       reactionsValue,
+      readBy,
       showAvatar,
       showMessageStatus,
       threadList,

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -1,7 +1,5 @@
 import { Alert } from 'react-native';
 
-import type { MessageResponse } from 'stream-chat';
-
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
@@ -62,7 +60,7 @@ export const useMessageActionHandlers = ({
         { style: 'cancel', text: t('Cancel') },
         {
           onPress: async () => {
-            await deleteMessage(message as MessageResponse);
+            await deleteMessage(message);
           },
           style: 'destructive',
           text: t('Delete'),

package/src/components/Message/hooks/useMessageActions.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { LocalMessage } from 'stream-chat';
+
 import { useMessageActionHandlers } from './useMessageActionHandlers';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
@@ -27,7 +29,6 @@ import {
 import { removeReservedFields } from '../../../utils/removeReservedFields';
 import { MessageStatusTypes } from '../../../utils/utils';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
 
 export type MessageActionsHookProps = Pick<
@@ -60,7 +61,7 @@ export type MessageActionsHookProps = Pick<
   Pick<ThreadContextValue, 'openThread'> &
   Pick<MessageContextValue, 'dismissOverlay' | 'message'> &
   Pick<TranslationContextValue, 't'> & {
-    onThreadSelect?: (message: MessageType) => void;
+    onThreadSelect?: (message: LocalMessage) => void;
   };
 
 export const useMessageActions = ({
@@ -293,7 +294,7 @@ export const useMessageActions = ({
       dismissOverlay();
       const messageWithoutReservedFields = removeReservedFields(message);
       if (handleRetry) {
-        handleRetry(messageWithoutReservedFields as MessageType);
+        handleRetry(messageWithoutReservedFields as LocalMessage);
       }
 
       await handleResendMessage();

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 50,
     justifyContent: 'center',
+    marginLeft: 8,
   },
 });