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

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

@@ -106,9 +106,7 @@ export type MessageContentPropsWithContext<
     | 'MessageReplies'
     | 'MessageStatus'
     | 'onPressInMessage'
-    | 'quotedRepliesEnabled'
     | 'Reply'
-    | 'threadRepliesEnabled'
   > &
   Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
@@ -154,18 +152,16 @@ const MessageContentWithContext = <
     onPressIn,
     otherAttachments,
     preventPress,
-    quotedRepliesEnabled,
     Reply,
     setMessageContentWidth,
     showMessageStatus,
     tDateTimeParser,
     threadList,
-    threadRepliesEnabled,
   } = props;
 
   const {
     theme: {
-      colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent },
+      colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
           container: { borderRadiusL, borderRadiusS, ...container },
@@ -213,7 +209,9 @@ const MessageContentWithContext = <
 
   const noBorder = (onlyEmojis && !message.quoted_message) || !!otherAttachments.length;
 
-  if (message.deleted_at) {
+  const isMessageTypeDeleted = message.type === 'deleted';
+
+  if (isMessageTypeDeleted) {
     return (
       <MessageDeleted
         formattedDate={getDateText(formatDate)}
@@ -234,7 +232,7 @@ const MessageContentWithContext = <
           : grey_gainsboro
         : blue_alice
       : alignment === 'left' || error
-      ? transparent
+      ? white
       : grey_gainsboro;
 
   const repliesCurveColor = isMyMessage && !error ? backgroundColor : grey_whisper;
@@ -267,6 +265,7 @@ const MessageContentWithContext = <
           });
         }
       }}
+      testID='message-content'
       {...additionalTouchableProps}
       /**
        * Border radii are useful for the case of error message types only.
@@ -283,7 +282,7 @@ const MessageContentWithContext = <
         <MessageHeader
           alignment={alignment}
           formattedDate={getDateText(formatDate)}
-          isDeleted={!!message.deleted_at}
+          isDeleted={!!isMessageTypeDeleted}
           lastGroupMessage={lastGroupMessage}
           members={members}
           message={message}
@@ -293,7 +292,7 @@ const MessageContentWithContext = <
         />
       )}
       <View onLayout={onLayout} style={wrapper}>
-        {hasThreadReplies && !threadList && threadRepliesEnabled && !noBorder && (
+        {hasThreadReplies && !threadList && !noBorder && (
           <View
             style={[
               styles.replyBorder,
@@ -333,8 +332,7 @@ const MessageContentWithContext = <
             switch (messageContentType) {
               case 'quoted_reply':
                 return (
-                  message.quoted_message &&
-                  quotedRepliesEnabled && (
+                  message.quoted_message && (
                     <View
                       key={`quoted_reply_${messageContentOrderIndex}`}
                       style={[styles.replyContainer, replyContainer]}
@@ -374,10 +372,8 @@ const MessageContentWithContext = <
           </View>
         )}
       </View>
-      {threadRepliesEnabled && (
-        <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
-      )}
-      <MessageFooter formattedDate={getDateText(formatDate)} isDeleted={!!message.deleted_at} />
+      <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
+      <MessageFooter formattedDate={getDateText(formatDate)} isDeleted={!!isMessageTypeDeleted} />
     </TouchableOpacity>
   );
 };
@@ -448,18 +444,25 @@ const areEqual = <
     prevGroupStyles?.[0] === nextGroupStyles?.[0];
   if (!groupStylesEqual) return false;
 
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
 
   if (!messageEqual) return false;
 
+  const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
+  const isNextQuotedMessageTypeDeleted = nextMessage.quoted_message?.type === 'deleted';
+
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
-    prevMessage.quoted_message?.deleted_at === nextMessage.quoted_message?.deleted_at;
+    isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
 
   if (!quotedMessageEqual) return false;
 
@@ -566,9 +569,7 @@ export const MessageContent = <
     MessageHeader,
     MessageReplies,
     MessageStatus,
-    quotedRepliesEnabled,
     Reply,
-    threadRepliesEnabled,
   } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { t, tDateTimeParser } = useTranslationContext();
 
@@ -602,13 +603,11 @@ export const MessageContent = <
         onPressIn,
         otherAttachments,
         preventPress,
-        quotedRepliesEnabled,
         Reply,
         showMessageStatus,
         t,
         tDateTimeParser,
         threadList,
-        threadRepliesEnabled,
       }}
       {...props}
     />

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

@@ -160,13 +160,16 @@ const areEqual = <
 
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
 
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
   const formattedDateEqual = prevFormattedDate === nextFormattedDate;

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

@@ -55,7 +55,10 @@ type MessageFooterPropsWithContext<
   | 'showMessageStatus'
   | 'lastGroupMessage'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageStatus'> &
+  Pick<
+    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    'deletedMessagesVisibilityType' | 'MessageStatus'
+  > &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = <
@@ -71,6 +74,7 @@ const MessageFooterWithContext = <
 ) => {
   const {
     alignment,
+    deletedMessagesVisibilityType,
     formattedDate,
     isDeleted,
     lastGroupMessage,
@@ -94,19 +98,24 @@ const MessageFooterWithContext = <
   if (isDeleted) {
     return (
       <View style={metaContainer} testID='message-deleted'>
-        <Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
-        <Text
-          style={[
-            {
-              color: grey,
-              textAlign: alignment,
-            },
-            metaText,
-            deletedMetaText,
-          ]}
-        >
-          {t('Only visible to you')}
-        </Text>
+        {deletedMessagesVisibilityType === 'sender' && (
+          <>
+            <Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
+            <Text
+              style={[
+                {
+                  color: grey,
+                  textAlign: alignment,
+                },
+                metaText,
+                deletedMetaText,
+              ]}
+              testID='only-visible-to-you'
+            >
+              {t('Only visible to you')}
+            </Text>
+          </>
+        )}
         <Text
           style={[
             {
@@ -194,12 +203,20 @@ const areEqual = <
   const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
   if (!lastGroupMessageEqual) return false;
 
+  const deletedMessagesVisibilityTypeEqual =
+    prevProps.deletedMessagesVisibilityType === nextProps.deletedMessagesVisibilityType;
+  if (!deletedMessagesVisibilityTypeEqual) return false;
+
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
   const otherAttachmentsEqual =
@@ -253,12 +270,14 @@ export const MessageFooter = <
   const { alignment, lastGroupMessage, members, message, otherAttachments, showMessageStatus } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const { MessageStatus } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { deletedMessagesVisibilityType, MessageStatus } =
+    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedMessageFooter
       {...{
         alignment,
+        deletedMessagesVisibilityType,
         lastGroupMessage,
         members,
         message,

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { PinHeader } from '../../../icons';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 8,
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  label: {},
+});
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
+export type MessagePinnedHeaderPropsWithContext<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+> = Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'alignment' | 'message'>;
+
+const MessagePinnedHeaderWithContext = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { alignment, message } = props;
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: { pinnedHeader },
+    },
+  } = useTheme();
+  const { container, label } = pinnedHeader;
+  const { t } = useTranslationContext();
+  const { client } = useChatContext();
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+        },
+        container,
+      ]}
+      testID='message-pinned'
+    >
+      <PinHeader pathFill={grey} />
+      <Text style={[{ color: grey }, styles.label, label]}>
+        Pinned by{' '}
+        {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
+      </Text>
+    </View>
+  );
+};
+
+const areEqual = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+>(
+  prevProps: MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  nextProps: MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { message: prevMessage } = prevProps;
+  const { message: nextMessage } = nextProps;
+  const messageEqual =
+    prevMessage.deleted_at === nextMessage.deleted_at &&
+    prevMessage.status === nextMessage.status &&
+    prevMessage.type === nextMessage.type &&
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
+  if (!messageEqual) return false;
+  return true;
+};
+
+const MemoizedMessagePinnedHeader = React.memo(
+  MessagePinnedHeaderWithContext,
+  areEqual,
+) as typeof MessagePinnedHeaderWithContext;
+
+export type MessagePinnedHeaderProps<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+> = Partial<MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+
+export const MessagePinnedHeader = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: MessagePinnedHeaderProps<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { alignment, lastGroupMessage, message } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+
+  return (
+    <MemoizedMessagePinnedHeader
+      {...{
+        alignment,
+        lastGroupMessage,
+        message,
+      }}
+      {...props}
+    />
+  );
+};
+
+MessagePinnedHeader.displayName = 'MessagePinnedHeader{messageSimple{pinned}}';

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

@@ -220,12 +220,14 @@ const areEqual = <
   const {
     message: prevMessage,
     noBorder: prevNoBorder,
+    onOpenThread: prevOnOpenThread,
     t: prevT,
     threadList: prevThreadList,
   } = prevProps;
   const {
     message: nextMessage,
     noBorder: nextNoBorder,
+    onOpenThread: nextOnOpenThread,
     t: nextT,
     threadList: nextThreadList,
   } = nextProps;
@@ -242,6 +244,9 @@ const areEqual = <
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 
+  const onOpenThreadEqual = prevOnOpenThread === nextOnOpenThread;
+  if (!onOpenThreadEqual) return false;
+
   return true;
 };
 

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

@@ -43,7 +43,11 @@ export type MessageSimplePropsWithContext<
 > &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'enableMessageGroupingByUser' | 'MessageAvatar' | 'MessageContent' | 'ReactionList'
+    | 'enableMessageGroupingByUser'
+    | 'MessageAvatar'
+    | 'MessageContent'
+    | 'MessagePinnedHeader'
+    | 'ReactionList'
   >;
 
 const MessageSimpleWithContext = <
@@ -66,6 +70,7 @@ const MessageSimpleWithContext = <
     message,
     MessageAvatar,
     MessageContent,
+    MessagePinnedHeader,
     ReactionList,
   } = props;
 
@@ -85,26 +90,29 @@ const MessageSimpleWithContext = <
   const showReactions = hasReactions && ReactionList;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-          marginBottom: hasMarginBottom
-            ? isVeryLastMessage && enableMessageGroupingByUser
-              ? 30
-              : 8
-            : 0,
-          marginTop: showReactions ? 2 : 0,
-        },
-        container,
-      ]}
-      testID='message-simple-wrapper'
-    >
-      {alignment === 'left' && <MessageAvatar />}
-      <MessageContent setMessageContentWidth={setMessageContentWidth} />
-      {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
-    </View>
+    <>
+      {message.pinned && <MessagePinnedHeader />}
+      <View
+        style={[
+          styles.container,
+          {
+            justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+            marginBottom: hasMarginBottom
+              ? isVeryLastMessage && enableMessageGroupingByUser
+                ? 30
+                : 8
+              : 0,
+            marginTop: showReactions ? 2 : 0,
+          },
+          container,
+        ]}
+        testID='message-simple-wrapper'
+      >
+        {alignment === 'left' && <MessageAvatar />}
+        <MessageContent setMessageContentWidth={setMessageContentWidth} />
+        {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
+      </View>
+    </>
   );
 };
 
@@ -142,16 +150,23 @@ const areEqual = <
   const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
   if (!groupStylesEqual) return false;
 
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
+  const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
+  const isNextQuotedMessageTypeDeleted = nextMessage.quoted_message?.type === 'deleted';
+
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
-    prevMessage.quoted_message?.deleted_at === nextMessage.quoted_message?.deleted_at;
+    isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
 
   if (!quotedMessageEqual) return false;
 
@@ -216,8 +231,13 @@ export const MessageSimple = <
 ) => {
   const { alignment, channel, groupStyles, hasReactions, message } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { enableMessageGroupingByUser, MessageAvatar, MessageContent, ReactionList } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const {
+    enableMessageGroupingByUser,
+    MessageAvatar,
+    MessageContent,
+    MessagePinnedHeader,
+    ReactionList,
+  } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedMessageSimple<At, Ch, Co, Ev, Me, Re, Us>
@@ -230,6 +250,7 @@ export const MessageSimple = <
         message,
         MessageAvatar,
         MessageContent,
+        MessagePinnedHeader,
         ReactionList,
       }}
       {...props}

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

@@ -45,10 +45,7 @@ export type MessageStatusPropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends DefaultUserType = DefaultUserType,
-> = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'message' | 'readEventsEnabled' | 'threadList'
->;
+> = Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'message' | 'threadList'>;
 
 const MessageStatusWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -61,11 +58,11 @@ const MessageStatusWithContext = <
 >(
   props: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { message, readEventsEnabled, threadList } = props;
+  const { message, threadList } = props;
 
   const {
     theme: {
-      colors: { accent_blue },
+      colors: { accent_blue, grey_dark },
       messageSimple: {
         status: { checkAllIcon, checkIcon, readByCount, statusContainer, timeIcon },
       },
@@ -80,11 +77,7 @@ const MessageStatusWithContext = <
     );
   }
 
-  if (
-    isMessageWithStylesReadByAndDateSeparator(message) &&
-    !threadList &&
-    readEventsEnabled !== false
-  ) {
+  if (isMessageWithStylesReadByAndDateSeparator(message) && !threadList) {
     return (
       <View style={[styles.statusContainer, statusContainer]}>
         {typeof message.readBy === 'number' ? (
@@ -98,7 +91,7 @@ const MessageStatusWithContext = <
         {typeof message.readBy === 'number' || message.readBy === true ? (
           <CheckAll pathFill={accent_blue} {...checkAllIcon} />
         ) : (
-          <Check {...checkIcon} />
+          <Check pathFill={grey_dark} {...checkIcon} />
         )}
       </View>
     );
@@ -107,7 +100,7 @@ const MessageStatusWithContext = <
   if (message.status === 'received' && message.type !== 'ephemeral' && !threadList) {
     return (
       <View style={[styles.statusContainer, statusContainer]} testID='delivered-container'>
-        <Check {...checkIcon} />
+        <Check pathFill={grey_dark} {...checkIcon} />
       </View>
     );
   }
@@ -127,23 +120,12 @@ const areEqual = <
   prevProps: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
   nextProps: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const {
-    message: prevMessage,
-    readEventsEnabled: prevReadEventsEnabled,
-    threadList: prevThreadList,
-  } = prevProps;
-  const {
-    message: nextMessage,
-    readEventsEnabled: nextReadEventsEnabled,
-    threadList: nextThreadList,
-  } = nextProps;
+  const { message: prevMessage, threadList: prevThreadList } = prevProps;
+  const { message: nextMessage, threadList: nextThreadList } = nextProps;
 
   const threadListEqual = prevThreadList === nextThreadList;
   if (!threadListEqual) return false;
 
-  const readEventsEnabledEqual = prevReadEventsEnabled === nextReadEventsEnabled;
-  if (!readEventsEnabledEqual) return false;
-
   const messageEqual =
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
@@ -180,10 +162,9 @@ export const MessageStatus = <
 >(
   props: MessageStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { message, readEventsEnabled, threadList } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { message, threadList } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  return <MemoizedMessageStatus {...{ message, readEventsEnabled, threadList }} {...props} />;
+  return <MemoizedMessageStatus {...{ message, threadList }} {...props} />;
 };
 
 MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';