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

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;
     }
 
@@ -197,6 +202,8 @@ export class KeyboardCompatibleView extends React.Component<
     this.unsetKeyboardListeners();
   }
 
+  keyboardContextValue = { dismissKeyboard: this.dismissKeyboard };
+
   render() {
     const { behavior, children, contentContainerStyle, enabled, style, ...props } = this.props;
     const bottomHeight = enabled ? this.state.bottom : 0;
@@ -215,7 +222,7 @@ export class KeyboardCompatibleView extends React.Component<
           };
         }
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View
               onLayout={this._onLayout}
               ref={this.viewRef}
@@ -229,7 +236,7 @@ export class KeyboardCompatibleView extends React.Component<
 
       case 'position':
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View onLayout={this._onLayout} ref={this.viewRef} style={style} {...props}>
               <View
                 style={StyleSheet.compose(contentContainerStyle, {
@@ -244,7 +251,7 @@ export class KeyboardCompatibleView extends React.Component<
 
       case 'padding':
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View
               onLayout={this._onLayout}
               ref={this.viewRef}
@@ -258,7 +265,7 @@ export class KeyboardCompatibleView extends React.Component<
 
       default:
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View onLayout={this._onLayout} ref={this.viewRef} style={style} {...props}>
               {children}
             </View>

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),
@@ -277,10 +274,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const {
     theme: {
       colors: { targetedMessageBackground },
-      messageSimple: { targetedMessageContainer, unreadUnderlayColor },
+      messageSimple: { targetedMessageContainer, unreadUnderlayColor, wrapper },
       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,
@@ -718,8 +717,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         <View
           style={[
             { marginTop: 2, paddingHorizontal: screenPadding },
+            wrapper,
             (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
-              ? { backgroundColor: targetedMessageBackground, ...targetedMessageContainer }
+              ? {
+                  backgroundColor: targetedMessageBackground,
+                  ...targetedMessageContainer,
+                }
               : {},
           ]}
           testID='message-wrapper'
@@ -810,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/MessageSimple.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -12,6 +12,8 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
+const AnimatedWrapper = Animated.createAnimatedComponent(View);
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -199,77 +201,104 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
 
   const translateX = useSharedValue(0);
   const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+  const isSwiping = useSharedValue<boolean>(false);
+  const [isBeingSwiped, setIsBeingSwiped] = useState<boolean>(false);
 
-  const onSwipeToReply = () => {
+  const onSwipeToReply = useCallback(() => {
     clearQuotedMessageState();
     setQuotedMessageState(message);
-  };
+  }, [clearQuotedMessageState, message, setQuotedMessageState]);
 
   const THRESHOLD = 25;
 
   const triggerHaptic = NativeHandlers.triggerHaptic;
 
-  const swipeGesture = Gesture.Pan()
-    .hitSlop(messageSwipeToReplyHitSlop)
-    .onBegin((event) => {
-      touchStart.value = { x: event.x, y: event.y };
-    })
-    .onTouchesMove((event, state) => {
-      if (!touchStart.value || !event.changedTouches.length) {
-        state.fail();
-        return;
-      }
-
-      const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
-      const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
-      const isHorizontalPanning = xDiff > yDiff;
-
-      if (isHorizontalPanning) {
-        state.activate();
-      } else {
-        state.fail();
-      }
-    })
-    .onStart(() => {
-      translateX.value = 0;
-    })
-    .onChange(({ translationX }) => {
-      if (translationX > 0) {
-        translateX.value = translationX;
-      }
-    })
-    .onEnd(() => {
-      if (translateX.value >= THRESHOLD) {
-        runOnJS(onSwipeToReply)();
-        if (triggerHaptic) {
-          runOnJS(triggerHaptic)('impactMedium');
-        }
-      }
-      translateX.value = withSpring(0, {
-        dampingRatio: 1,
-        duration: 500,
-        overshootClamping: true,
-        stiffness: 1,
-      });
-    });
-
-  const messageBubbleAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
-  const swipeContentAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
-    transform: [
-      {
-        translateX: interpolate(
-          translateX.value,
-          [0, THRESHOLD],
-          [-THRESHOLD, 0],
-          Extrapolation.CLAMP,
-        ),
-      },
-    ],
-  }));
+  const swipeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .hitSlop(messageSwipeToReplyHitSlop)
+        .onBegin((event) => {
+          touchStart.value = { x: event.x, y: event.y };
+        })
+        .onTouchesMove((event, state) => {
+          if (!touchStart.value || !event.changedTouches.length) {
+            state.fail();
+            return;
+          }
+
+          const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
+          const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
+          const isHorizontalPanning = xDiff > yDiff;
+
+          if (isHorizontalPanning) {
+            state.activate();
+            isSwiping.value = true;
+            runOnJS(setIsBeingSwiped)(true);
+          } else {
+            state.fail();
+          }
+        })
+        .onStart(() => {
+          translateX.value = 0;
+        })
+        .onChange(({ translationX }) => {
+          if (translationX > 0) {
+            translateX.value = translationX;
+          }
+        })
+        .onEnd(() => {
+          if (translateX.value >= THRESHOLD) {
+            runOnJS(onSwipeToReply)();
+            if (triggerHaptic) {
+              runOnJS(triggerHaptic)('impactMedium');
+            }
+          }
+          translateX.value = withSpring(
+            0,
+            {
+              dampingRatio: 1,
+              duration: 500,
+              overshootClamping: true,
+              stiffness: 1,
+            },
+            () => {
+              isSwiping.value = false;
+              runOnJS(setIsBeingSwiped)(false);
+            },
+          );
+        }),
+    [isSwiping, messageSwipeToReplyHitSlop, onSwipeToReply, touchStart, translateX, triggerHaptic],
+  );
+
+  const messageBubbleAnimatedStyle = useAnimatedStyle(
+    () =>
+      isSwiping.value
+        ? {
+            transform: [{ translateX: translateX.value }],
+          }
+        : {},
+    [],
+  );
+
+  const swipeContentAnimatedStyle = useAnimatedStyle(
+    () =>
+      isSwiping.value
+        ? {
+            opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
+            transform: [
+              {
+                translateX: interpolate(
+                  translateX.value,
+                  [0, THRESHOLD],
+                  [-THRESHOLD, 0],
+                  Extrapolation.CLAMP,
+                ),
+              },
+            ],
+          }
+        : {},
+    [],
+  );
 
   const renderMessageBubble = useMemo(
     () => (
@@ -303,18 +332,31 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     () => (
       <GestureDetector gesture={swipeGesture}>
         <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
-          <Animated.View
-            style={[styles.swipeContentContainer, swipeContentAnimatedStyle, swipeContentContainer]}
-          >
-            {MessageSwipeContent ? <MessageSwipeContent /> : null}
-          </Animated.View>
-          <Animated.View style={messageBubbleAnimatedStyle}>{renderMessageBubble}</Animated.View>
+          {isBeingSwiped ? (
+            <>
+              <AnimatedWrapper
+                style={[
+                  styles.swipeContentContainer,
+                  swipeContentAnimatedStyle,
+                  swipeContentContainer,
+                ]}
+              >
+                {MessageSwipeContent ? <MessageSwipeContent /> : null}
+              </AnimatedWrapper>
+              <AnimatedWrapper pointerEvents='box-none' style={messageBubbleAnimatedStyle}>
+                {renderMessageBubble}
+              </AnimatedWrapper>
+            </>
+          ) : (
+            renderMessageBubble
+          )}
         </View>
       </GestureDetector>
     ),
     [
       MessageSwipeContent,
       contentWrapper,
+      isBeingSwiped,
       messageBubbleAnimatedStyle,
       messageSwipeToReplyHitSlop,
       renderMessageBubble,

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,