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

package/src/components/MessageList/MessageList.tsx

@@ -12,11 +12,7 @@ import {
 
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
-import {
-  isMessageWithStylesReadByAndDateSeparator,
-  MessageType,
-  useMessageList,
-} from './hooks/useMessageList';
+import { useMessageList } from './hooks/useMessageList';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
@@ -91,7 +87,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const keyExtractor = (item: MessageType) => {
+const keyExtractor = (item: LocalMessage) => {
   if (item.id) {
     return item.id;
   }
@@ -111,7 +107,7 @@ const hasReadLastMessage = (channel: Channel, userId: string) => {
   return latestMessageIdInChannel === lastReadMessageIdServer;
 };
 
-const getPreviousLastMessage = (messages: MessageType[], newMessage?: MessageResponse) => {
+const getPreviousLastMessage = (messages: LocalMessage[], newMessage?: MessageResponse) => {
   if (!newMessage) return;
   let previousLastMessage;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -189,7 +185,7 @@ type MessageListPropsWithContext = Pick<
      *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
      * ```
      */
-    additionalFlatListProps?: Partial<FlatListProps<MessageType>>;
+    additionalFlatListProps?: Partial<FlatListProps<LocalMessage>>;
     /**
      * UI component for footer of message list. By default message list will use `InlineLoadingMoreIndicator`
      * as FooterComponent. If you want to implement your own inline loading indicator, you can access `loadingMore`
@@ -231,7 +227,7 @@ type MessageListPropsWithContext = Pick<
      *  }}
      * ```
      */
-    setFlatListRef?: (ref: FlatListType<MessageType> | null) => void;
+    setFlatListRef?: (ref: FlatListType<LocalMessage> | null) => void;
   };
 
 /**
@@ -322,10 +318,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const { processedMessageList, rawMessageList } = useMessageList({
-    noGroupByUser,
-    threadList,
-  });
+  const { dateSeparatorsRef, messageGroupStylesRef, processedMessageList, rawMessageList } =
+    useMessageList({
+      noGroupByUser,
+      threadList,
+    });
   const messageListLengthBeforeUpdate = useRef(0);
   const messageListLengthAfterUpdate = processedMessageList.length;
 
@@ -362,7 +359,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onStartReachedInPromise = useRef<Promise<void> | null>(null);
   const onEndReachedInPromise = useRef<Promise<void> | null>(null);
 
-  const flatListRef = useRef<FlatListType<MessageType> | null>(null);
+  const flatListRef = useRef<FlatListType<LocalMessage> | null>(null);
 
   const channelResyncScrollSet = useRef<boolean>(true);
 
@@ -496,7 +493,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onViewableItemsChanged = useRef(unstableOnViewableItemsChanged);
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
 
-  const stableOnViwableItemsChanged = useCallback(
+  const stableOnViewableItemsChanged = useCallback(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
       onViewableItemsChanged.current({ viewableItems });
     },
@@ -735,7 +732,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const shouldApplyAndroidWorkaround = inverted && Platform.OS === 'android';
 
   const renderItem = useCallback(
-    ({ index, item: message }: { index: number; item: MessageType }) => {
+    ({ index, item: message }: { index: number; item: LocalMessage }) => {
       if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
         return null;
       }
@@ -756,14 +753,14 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
       const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
-      const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
-        message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
+      const renderDateSeperator = dateSeparatorsRef.current[message.id] && (
+        <InlineDateSeparator date={dateSeparatorsRef.current[message.id]} />
+      );
+
       const renderMessage = (
         <Message
           goToMessage={goToMessage}
-          groupStyles={
-            isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
-          }
+          groupStyles={messageGroupStylesRef.current[message.id] ?? []}
           isTargetedMessage={highlightedMessageId === message.id}
           lastReceivedId={
             lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
@@ -814,10 +811,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       channelUnreadState?.last_read_message_id,
       channelUnreadState?.unread_messages,
       client.userID,
+      dateSeparatorsRef,
       goToMessage,
       highlightedMessageId,
       lastReceivedId,
       messageContainer,
+      messageGroupStylesRef,
       modifiedTheme,
       myMessageTheme,
       onThreadSelect,
@@ -998,7 +997,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
   const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const onScrollToIndexFailedRef = useRef<FlatListProps<MessageType>['onScrollToIndexFailed']>(
+  const onScrollToIndexFailedRef = useRef<FlatListProps<LocalMessage>['onScrollToIndexFailed']>(
     (info) => {
       // We got a failure as we tried to scroll to an item that was outside the render length
       if (!flatListRef.current) {
@@ -1083,7 +1082,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setMessages(messagesWithImages as MessageType[]);
+      setMessages(messagesWithImages as LocalMessage[]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -1112,7 +1111,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     onUserScrollEvent(event);
   });
 
-  const refCallback = useStableCallback((ref: FlatListType<MessageType>) => {
+  const refCallback = useStableCallback((ref: FlatListType<LocalMessage>) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {
@@ -1251,7 +1250,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           onScrollEndDrag={onScrollEndDrag}
           onScrollToIndexFailed={onScrollToIndexFailedRef.current}
           onTouchEnd={dismissImagePicker}
-          onViewableItemsChanged={stableOnViwableItemsChanged}
+          onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
           scrollEnabled={overlay === 'none'}

package/src/components/MessageList/MessageSystem.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import type { MessageType } from './hooks/useMessageList';
+import { LocalMessage } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -10,7 +10,7 @@ import { getDateString } from '../../utils/i18n/getDateString';
 
 export type MessageSystemProps = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
-  message: MessageType;
+  message: LocalMessage;
   /**
    * Additional styles for the system message container.
    */

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,8 +1,6 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
-import type { ChannelState, MessageResponse } from 'stream-chat';
-
-import { useLastReadData } from './useLastReadData';
+import type { LocalMessage } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
@@ -13,7 +11,7 @@ import {
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
-import { getDateSeparators } from '../utils/getDateSeparators';
+import { DateSeparators, getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
 
 export type UseMessageListParams = {
@@ -24,24 +22,12 @@ export type UseMessageListParams = {
 
 export type GroupType = string;
 
-export type MessagesWithStylesReadByAndDateSeparator = MessageResponse & {
-  groupStyles: GroupType[];
-  readBy: boolean | number;
-  dateSeparator?: Date;
+export type MessageGroupStyles = {
+  [key: string]: string[];
 };
 
-export type MessageType =
-  | ReturnType<ChannelState['formatMessage']>
-  | MessagesWithStylesReadByAndDateSeparator;
-
-// Type guards to check MessageType
-export const isMessageWithStylesReadByAndDateSeparator = (
-  message: MessageType,
-): message is MessagesWithStylesReadByAndDateSeparator =>
-  (message as MessagesWithStylesReadByAndDateSeparator).readBy !== undefined;
-
 export const shouldIncludeMessageInList = (
-  message: MessageType,
+  message: LocalMessage,
   options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
 ) => {
   const { deletedMessagesVisibilityType, userId } = options;
@@ -64,38 +50,52 @@ export const shouldIncludeMessageInList = (
 export const useMessageList = (params: UseMessageListParams) => {
   const { noGroupByUser, threadList } = params;
   const { client } = useChatContext();
-  const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } = useChannelContext();
+  const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
   const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
     useMessagesContext();
   const { messages } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
-
   const messageList = threadList ? threadMessages : messages;
-  const readList: ChannelState['read'] | undefined = threadList ? undefined : read;
 
-  const readData = useLastReadData({
-    messages: messageList,
-    read: readList,
-    userID: client.userID,
-  });
-
-  const processedMessageList = useMemo<MessageType[]>(() => {
-    const dateSeparators = getDateSeparators({
-      deletedMessagesVisibilityType,
-      hideDateSeparators,
-      messages: messageList,
-      userId: client.userID,
-    });
-
-    const messageGroupStyles = getMessagesGroupStyles({
-      dateSeparators,
+  const dateSeparators = useMemo(
+    () =>
+      getDateSeparators({
+        deletedMessagesVisibilityType,
+        hideDateSeparators,
+        messages: messageList,
+        userId: client.userID,
+      }),
+    [deletedMessagesVisibilityType, hideDateSeparators, messageList, client.userID],
+  );
+
+  const dateSeparatorsRef = useRef<DateSeparators>(dateSeparators);
+  dateSeparatorsRef.current = dateSeparators;
+
+  const messageGroupStyles = useMemo(
+    () =>
+      getMessagesGroupStyles({
+        dateSeparators: dateSeparatorsRef.current,
+        hideDateSeparators,
+        maxTimeBetweenGroupedMessages,
+        messages: messageList,
+        noGroupByUser,
+        userId: client.userID,
+      }),
+    [
+      dateSeparatorsRef,
+      getMessagesGroupStyles,
       hideDateSeparators,
       maxTimeBetweenGroupedMessages,
-      messages: messageList,
+      messageList,
       noGroupByUser,
-      userId: client.userID,
-    });
+      client.userID,
+    ],
+  );
+
+  const messageGroupStylesRef = useRef<MessageGroupStyles>(messageGroupStyles);
+  messageGroupStylesRef.current = messageGroupStyles;
 
+  const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
     for (const message of messageList) {
       if (
@@ -104,28 +104,17 @@ export const useMessageList = (params: UseMessageListParams) => {
           userId: client.userID,
         })
       ) {
-        const messageId = message.id;
-        newMessageList.unshift({
-          ...message,
-          dateSeparator: dateSeparators[messageId] || undefined,
-          groupStyles: messageGroupStyles[messageId] || ['single'],
-          readBy: messageId ? readData[messageId] || false : false,
-        });
+        newMessageList.unshift(message);
       }
     }
     return newMessageList;
-  }, [
-    client.userID,
-    deletedMessagesVisibilityType,
-    getMessagesGroupStyles,
-    hideDateSeparators,
-    maxTimeBetweenGroupedMessages,
-    messageList,
-    noGroupByUser,
-    readData,
-  ]);
+  }, [client.userID, deletedMessagesVisibilityType, messageList]);
 
   return {
+    /** Date separators */
+    dateSeparatorsRef,
+    /** Message group styles */
+    messageGroupStylesRef,
     /** Messages enriched with dates/readby/groups and also reversed in order */
     processedMessageList,
     /** Raw messages from the channel state */

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -1,10 +1,12 @@
+import { LocalMessage } from 'stream-chat';
+
 import type { DateSeparators } from './getDateSeparators';
 
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 
 import { isEditedMessage } from '../../../utils/utils';
-import type { GroupType, MessageType } from '../hooks/useMessageList';
+import type { GroupType } from '../hooks/useMessageList';
 
 export type GetGroupStylesParams = {
   dateSeparators: DateSeparators;
@@ -19,9 +21,9 @@ export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
 const getGroupStyle = (
   dateSeparators: DateSeparators,
-  message: MessageType,
-  previousMessage: MessageType,
-  nextMessage: MessageType,
+  message: LocalMessage,
+  previousMessage: LocalMessage,
+  nextMessage: LocalMessage,
   hideDateSeparators?: boolean,
   maxTimeBetweenGroupedMessages?: number,
 ): GroupStyle[] => {
@@ -38,7 +40,7 @@ const getGroupStyle = (
     previousMessage.type === 'error' ||
     userId !== previousMessage?.user?.id ||
     !!isPrevMessageTypeDeleted ||
-    (!hideDateSeparators && dateSeparators[message.id]) ||
+    (!hideDateSeparators && dateSeparators[previousMessage.id]) ||
     isEditedMessage(previousMessage);
 
   const isBottomMessage =

package/src/components/MessageList/utils/getLastReceivedMessage.ts

@@ -1,8 +1,8 @@
-import { MessageStatusTypes } from '../../../utils/utils';
+import { LocalMessage } from 'stream-chat';
 
-import type { MessageType } from '../hooks/useMessageList';
+import { MessageStatusTypes } from '../../../utils/utils';
 
-export const getLastReceivedMessage = (messages: MessageType[]) => {
+export const getLastReceivedMessage = (messages: LocalMessage[]) => {
   /**
    * There are no status on dates so they will be skipped
    */

package/src/components/MessageList/utils/getReadState.ts

@@ -0,0 +1,27 @@
+import { ChannelState, LocalMessage } from 'stream-chat';
+
+/**
+ * Get the number of users who have read the message
+ * @param message - The message to get the read state for
+ * @param read - The read state of the channel
+ * @returns The number of users who have read the message
+ */
+export const getReadState = (message: LocalMessage, read?: ChannelState['read']) => {
+  if (!read) {
+    return 0;
+  }
+
+  const readState = Object.values(read).reduce((acc, readState) => {
+    if (!readState.last_read) {
+      return acc;
+    }
+
+    if (message.created_at && message.created_at < readState.last_read) {
+      return acc + 1;
+    }
+
+    return acc;
+  }, 0);
+
+  return readState;
+};

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { ReactionResponse } from 'stream-chat';
+import { LocalMessage, ReactionResponse } from 'stream-chat';
 
 import {
   MessagesContextValue,
@@ -17,7 +17,6 @@ import {
   TranslationProvider,
 } from '../../../contexts/translationContext/TranslationContext';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import { MessageType } from '../../MessageList/hooks/useMessageList';
 import * as useFetchReactionsModule from '../hooks/useFetchReactions';
 import { MessageUserReactions } from '../MessageUserReactions';
 import { MessageUserReactionsItemProps } from '../MessageUserReactionsItem';
@@ -35,7 +34,7 @@ const defaultProps = {
   message: {
     ...generateMessage(),
     reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } },
-  } as unknown as MessageType,
+  } as unknown as LocalMessage,
   supportedReactions: mockSupportedReactions,
 };
 

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { ReactionResponse, ReactionSort } from 'stream-chat';
+import { LocalMessage, ReactionResponse, ReactionSort } from 'stream-chat';
 
-import { MessageType } from '../../../components/MessageList/hooks/useMessageList';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { getReactionsForFilterSort } from '../../../store/apis/getReactionsforFilterSort';
 
 export type UseFetchReactionParams = {
   limit?: number;
-  message?: MessageType;
+  message?: LocalMessage;
   reactionType?: string;
   sort?: ReactionSort;
 };

package/src/components/Poll/components/Button.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
 
-import { Poll, PollOption } from 'stream-chat';
+import { LocalMessage, Poll, PollOption } from 'stream-chat';
 
 import { useTheme } from '../../../contexts';
 
-import { MessageType } from '../../MessageList/hooks/useMessageList';
-
 export type PollButtonProps = {
-  onPress?: ({ message, poll }: { message: MessageType; poll: Poll }) => void;
+  onPress?: ({ message, poll }: { message: LocalMessage; poll: Poll }) => void;
 };
 
 export type PollVoteButtonProps = {

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { Modal, SafeAreaView, StyleSheet, Text, View } from 'react-native';
 
-import { Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
+import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
 import { PollOptionFullResults } from './PollOptionFullResults';
 import { PollVote } from './PollVote';
@@ -13,7 +13,6 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
-import { MessageType } from '../../../MessageList/hooks/useMessageList';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
 import { PollModalHeader } from '../PollModalHeader';
@@ -25,7 +24,7 @@ export type ShowAllVotesButtonProps = {
     option,
     poll,
   }: {
-    message: MessageType;
+    message: LocalMessage;
     option: PollOption;
     poll: Poll;
   }) => void;

package/src/components/Reply/Reply.tsx

@@ -34,7 +34,6 @@ import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { VideoThumbnail } from '../Attachment/VideoThumbnail';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
-import { MessageType } from '../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   container: {
@@ -177,7 +176,7 @@ const ReplyWithContext = (props: ReplyPropsWithContext) => {
     },
   } = useTheme();
 
-  const poll = client.polls.fromState((quotedMessage as MessageType)?.poll_id ?? '');
+  const poll = client.polls.fromState(quotedMessage?.poll_id ?? '');
   const { name: pollName }: ReplySelectorReturnType = useStateStore(poll?.state, selector) ?? {};
 
   const messageText = quotedMessage ? quotedMessage.text : '';

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

@@ -51,12 +51,8 @@ exports[`Thread should match thread snapshot 1`] = `
             {
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
-              "dateSeparator": undefined,
               "deleted_at": null,
               "error": null,
-              "groupStyles": [
-                "single",
-              ],
               "html": "<p>regular</p>",
               "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
@@ -64,7 +60,6 @@ exports[`Thread should match thread snapshot 1`] = `
               "pinned_at": null,
               "quoted_message": null,
               "reaction_groups": null,
-              "readBy": false,
               "status": "received",
               "text": "Message6",
               "type": "regular",
@@ -83,12 +78,8 @@ exports[`Thread should match thread snapshot 1`] = `
             {
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
-              "dateSeparator": undefined,
               "deleted_at": null,
               "error": null,
-              "groupStyles": [
-                "single",
-              ],
               "html": "<p>regular</p>",
               "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
@@ -96,7 +87,6 @@ exports[`Thread should match thread snapshot 1`] = `
               "pinned_at": null,
               "quoted_message": null,
               "reaction_groups": null,
-              "readBy": false,
               "status": "received",
               "text": "Message5",
               "type": "regular",
@@ -115,12 +105,8 @@ exports[`Thread should match thread snapshot 1`] = `
             {
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
-              "dateSeparator": 2020-05-05T14:50:00.000Z,
               "deleted_at": null,
               "error": null,
-              "groupStyles": [
-                "single",
-              ],
               "html": "<p>regular</p>",
               "id": "82a83b16-b611-527c-b3ac-765ef6220490",
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
@@ -128,7 +114,6 @@ exports[`Thread should match thread snapshot 1`] = `
               "pinned_at": null,
               "quoted_message": null,
               "reaction_groups": null,
-              "readBy": false,
               "status": "received",
               "text": "Message4",
               "type": "regular",

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

@@ -101,6 +101,7 @@ const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithC
           groupStyles={['single']}
           message={thread}
           preventPress={parentMessagePreventPress}
+          readBy={0}
           threadList
         />
       </View>

package/src/components/ThreadList/ThreadListItem.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { Thread, ThreadState } from 'stream-chat';
+import { LocalMessage, Thread, ThreadState } from 'stream-chat';
 
 import {
   TranslationContextValue,
@@ -19,7 +19,6 @@ import { MessageBubble } from '../../icons';
 import { getDateString } from '../../utils/i18n/getDateString';
 import { Avatar } from '../Avatar/Avatar';
 import { useChannelPreviewDisplayName } from '../ChannelPreview/hooks/useChannelPreviewDisplayName';
-import { MessageType } from '../MessageList/hooks/useMessageList';
 
 export type ThreadListItemProps = {
   thread: Thread;
@@ -76,7 +75,7 @@ const getTitleFromMessage = ({
 }: {
   t: TranslationContextValue['t'];
   currentUserId?: string;
-  message?: MessageType | undefined;
+  message?: LocalMessage;
 }) => {
   const attachment = message?.attachments?.at(0);
 
@@ -132,7 +131,10 @@ export const ThreadListItemComponent = () => {
     <TouchableOpacity
       onPress={() => {
         if (onThreadSelect) {
-          onThreadSelect({ thread: parentMessage as MessageType, threadInstance: thread }, channel);
+          onThreadSelect(
+            { thread: parentMessage as LocalMessage, threadInstance: thread },
+            channel,
+          );
         }
       }}
       style={[styles.touchableWrapper, threadListItem.touchableWrapper]}

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
 export * from './Attachment/VideoThumbnail';
+export * from './Attachment/ImageReloadIndicator';
 export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
@@ -148,7 +149,7 @@ export * from './MessageList/TypingIndicatorContainer';
 export * from './MessageList/utils/getDateSeparators';
 export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
-export * from './MessageList/utils/getReadStates';
+export * from './MessageList/utils/getReadState';
 
 export * from './MessageMenu/MessageActionList';
 export * from './MessageMenu/MessageActionListItem';

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -45,7 +45,7 @@ export function useChannelState(
   const cid = channel?.id || 'id'; // in case channel is not initialized, use generic id string for indexing
   const { setState, state } = useChannelsStateContext();
 
-  const [threadMessages, setThreadMessages] = useStateManager(
+  const [threadMessages, setThreadMessagesInternal] = useStateManager(
     {
       cid,
       key: 'threadMessages',
@@ -54,6 +54,10 @@ export function useChannelState(
     },
     (threadId && channel?.state?.threads?.[threadId]) || [],
   );
+  const setThreadMessages = useCallback(
+    (value: ChannelState['threadMessages']) => setThreadMessagesInternal([...value]),
+    [setThreadMessagesInternal],
+  );
 
   return {
     setThreadMessages,