stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

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

@@ -24,7 +24,6 @@ export type MessageRepliesPropsWithContext = Pick<
   | 'onPressIn'
   | 'onOpenThread'
   | 'preventPress'
-  | 'threadList'
 > &
   Pick<TranslationContextValue, 't'>;
 
@@ -39,7 +38,6 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     onPressIn,
     preventPress,
     t,
-    threadList,
   } = props;
   const { icons, MessageRepliesAvatars } = useComponentsContext();
 
@@ -69,20 +67,25 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
       <icons.ReplyConnectorRight height={48} width={16} stroke={connectorStroke} />
     );
 
-  if (threadList || !message.reply_count) {
+  if (!message.reply_count) {
     return null;
   }
 
   const replyCountLabel =
     message.reply_count === 1
-      ? t('1 Reply')
-      : t('{{ replyCount }} Replies', { replyCount: message.reply_count });
+      ? t('message.replies.one.label', '1 Reply')
+      : t('message.replies.many.label', '{{ replyCount }} Replies', {
+          replyCount: message.reply_count,
+        });
 
   return (
     <View style={[styles.container, container]}>
       {alignment === 'left' ? connector : null}
       <Pressable
-        accessibilityHint={t('a11y/Double tap to view thread')}
+        accessibilityHint={t(
+          'message.replies.viewHint.accessibilityLabel',
+          'Double tap to view thread',
+        )}
         accessibilityLabel={replyCountLabel}
         accessibilityRole='button'
         disabled={preventPress}
@@ -131,23 +134,8 @@ const areEqual = (
   prevProps: MessageRepliesPropsWithContext,
   nextProps: MessageRepliesPropsWithContext,
 ) => {
-  const {
-    message: prevMessage,
-    onOpenThread: prevOnOpenThread,
-    t: prevT,
-    threadList: prevThreadList,
-  } = prevProps;
-  const {
-    message: nextMessage,
-    onOpenThread: nextOnOpenThread,
-    t: nextT,
-    threadList: nextThreadList,
-  } = nextProps;
-
-  const threadListEqual = prevThreadList === nextThreadList;
-  if (!threadListEqual) {
-    return false;
-  }
+  const { message: prevMessage, onOpenThread: prevOnOpenThread, t: prevT } = prevProps;
+  const { message: nextMessage, onOpenThread: nextOnOpenThread, t: nextT } = nextProps;
 
   const messageReplyCountEqual = prevMessage.reply_count === nextMessage.reply_count;
   if (!messageReplyCountEqual) {
@@ -184,7 +172,6 @@ export const MessageReplies = (props: MessageRepliesProps) => {
     onPress,
     onPressIn,
     preventPress,
-    threadList,
   } = useMessageContext();
   const { t } = useTranslationContext();
 
@@ -200,7 +187,6 @@ export const MessageReplies = (props: MessageRepliesProps) => {
         onPressIn,
         preventPress,
         t,
-        threadList,
       }}
       {...props}
     />

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

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
-import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
@@ -12,15 +11,19 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
+import { useIsMessageDeliveredToOthers } from '../hooks/useIsMessageDeliveredToOthers';
+import { useIsMessageReadByOthers } from '../hooks/useIsMessageReadByOthers';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
-export type MessageStatusPropsWithContext = Pick<
-  MessageContextValue,
-  'deliveredToCount' | 'message' | 'readBy'
->;
+export type MessageStatusPropsWithContext = Pick<MessageContextValue, 'message'> & {
+  /** Whether the message reached at least one other member. */
+  delivered: boolean;
+  /** Whether at least one other member read the message. */
+  read: boolean;
+};
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { deliveredToCount, message, readBy } = props;
+  const { delivered, message, read } = props;
 
   const styles = useStyles();
   const { icons } = useComponentsContext();
@@ -33,11 +36,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     },
   } = useTheme();
 
-  const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
-
-  // Variables to determine the status of the message
-  const read = hasReadByGreaterThanOne || readBy === true;
-  const delivered = deliveredToCount > 1;
   const sending = message.status === MessageStatusTypes.SENDING;
   const sent =
     message.status === MessageStatusTypes.RECEIVED &&
@@ -47,13 +45,13 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
 
   const accessibilityLabel = useA11yLabel(
     read
-      ? 'a11y/Read'
+      ? 'message.status.read.accessibilityLabel'
       : delivered
-        ? 'a11y/Delivered'
+        ? 'message.status.delivered.accessibilityLabel'
         : sending
-          ? 'a11y/Sending'
+          ? 'message.status.sending.accessibilityLabel'
           : sent
-            ? 'a11y/Sent'
+            ? 'message.status.sent.accessibilityLabel'
             : '',
   );
 
@@ -97,16 +95,16 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const { deliveredToCount: prevDeliveredBy, message: prevMessage, readBy: prevReadBy } = prevProps;
-  const { deliveredToCount: nextDeliveredBy, message: nextMessage, readBy: nextReadBy } = nextProps;
+  const { delivered: prevDelivered, message: prevMessage, read: prevRead } = prevProps;
+  const { delivered: nextDelivered, message: nextMessage, read: nextRead } = nextProps;
 
-  const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
-  if (!deliveredByEqual) {
+  const deliveredEqual = prevDelivered === nextDelivered;
+  if (!deliveredEqual) {
     return false;
   }
 
-  const readByEqual = prevReadBy === nextReadBy;
-  if (!readByEqual) {
+  const readEqual = prevRead === nextRead;
+  if (!readEqual) {
     return false;
   }
 
@@ -127,21 +125,16 @@ const MemoizedMessageStatus = React.memo(
 export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 
 export const MessageStatus = (props: MessageStatusProps) => {
-  const { channel } = useChannelContext();
-  const { deliveredToCount, message, readBy } = useMessageContext();
-
-  const channelMembersCount = Object.keys(channel?.state.members).length;
+  const { message: contextMessage } = useMessageContext();
+  const message = props.message ?? contextMessage;
+  const readByOthers = useIsMessageReadByOthers({ message });
+  const deliveredToOthers = useIsMessageDeliveredToOthers({ message });
 
   return (
     <MemoizedMessageStatus
-      {...{
-        channel,
-        channelMembersCount,
-        deliveredToCount,
-        message,
-        readBy,
-      }}
-      {...props}
+      delivered={props.delivered ?? deliveredToOthers}
+      message={message}
+      read={props.read ?? readByOthers}
     />
   );
 };
@@ -156,12 +149,6 @@ const useStyles = () => {
 
   return useMemo(() => {
     return StyleSheet.create({
-      readByCount: {
-        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
-        fontSize: primitives.typographyFontSizeXs,
-        fontWeight: primitives.typographyFontWeightRegular,
-        lineHeight: primitives.typographyLineHeightTight,
-      },
       container: {
         alignItems: 'center',
         flexDirection: 'row',

package/src/components/Message/MessageItemView/MessageTimestamp.tsx

@@ -6,8 +6,8 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../i18n/utils';
 import { primitives } from '../../../theme';
-import { getDateString } from '../../../utils/i18n/getDateString';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
 export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDateTimeParser'>> & {
@@ -30,7 +30,7 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
     formattedDate,
     tDateTimeParser: propsTDateTimeParser,
     timestamp,
-    timestampTranslationKey = 'timestamp/MessageTimestamp',
+    timestampTranslationKey = 'timestamp.MessageTimestamp',
   } = props;
   const { t, tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
   const tDateTimeParser = propsTDateTimeParser || contextTDateTimeParser;
@@ -39,7 +39,7 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
   const dateString = useMemo(
     () =>
       getDateString({
-        date: timestamp,
+        messageCreatedAt: timestamp,
         t,
         tDateTimeParser,
         timestampTranslationKey,

package/src/components/Message/MessageItemView/MessageWrapper.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 
-import { LocalMessage } from 'stream-chat';
+import { LocalMessage, UnreadSnapshotState } from 'stream-chat';
 
 import { useMessageDateSeparator } from '../../../components/MessageList/hooks/useMessageDateSeparator';
 import { useMessageGroupStyles } from '../../../components/MessageList/hooks/useMessageGroupStyles';
@@ -13,17 +13,11 @@ import { useMessageListItemContext } from '../../../contexts/messageListItemCont
 import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
 
+import { useIsTargetedMessage } from '../../../hooks/useIsTargetedMessage';
+import { useMessagePaginator } from '../../../hooks/useMessagePaginator';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
 import { primitives } from '../../../theme';
 
-const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
-  first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
-  last_read_message_id: state.channelUnreadState?.last_read_message_id,
-  last_read_timestamp: state.channelUnreadState?.last_read?.getTime(),
-  unread_messages: state.channelUnreadState?.unread_messages,
-});
-
 export type MessageWrapperProps = {
   message: LocalMessage;
   previousMessage?: LocalMessage;
@@ -33,15 +27,11 @@ export type MessageWrapperProps = {
 export const MessageWrapper = React.memo(function MessageWrapper(props: MessageWrapperProps) {
   const { message, previousMessage, nextMessage } = props;
   const { client } = useChatContext();
-  const {
-    allowDateSeparatorForSystemMessages,
-    channelUnreadStateStore,
-    channel,
-    hideDateSeparators,
-    highlightedMessageId,
-    maxTimeBetweenGroupedMessages,
-    threadList,
-  } = useChannelContext();
+  const { allowDateSeparatorForSystemMessages, hideDateSeparators, maxTimeBetweenGroupedMessages } =
+    useChannelContext();
+
+  const messagePaginator = useMessagePaginator();
+  const isTargetedMessage = useIsTargetedMessage(message.id);
   const { InlineDateSeparator, InlineUnreadIndicator, Message, MessageSystem } =
     useComponentsContext();
   const { getMessageGroupStyle, myMessageTheme, shouldShowUnreadUnderlay } = useMessagesContext();
@@ -53,7 +43,6 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
     previousMessage,
   });
 
-  const isNewestMessage = nextMessage === undefined;
   const groupStyles = useMessageGroupStyles({
     dateSeparatorDate,
     getMessageGroupStyle,
@@ -64,28 +53,75 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
     noGroupByUser,
   });
 
-  const { first_unread_message_id, last_read_timestamp, last_read_message_id, unread_messages } =
-    useStateStore(channelUnreadStateStore.state, channelUnreadStateSelector);
+  // Wire timestamps throughout, directly comparable. `new Date(ns)` yielded NaN, so the unread
+  // separator never rendered.
+  const createdAtTimestamp = message.created_at;
+  const messageId = message.id;
+  const nextMessageId = nextMessage?.id;
+  const nextMessageIsOwn = nextMessage?.user?.id === client.userID;
+  const nextMessageCreatedAt = nextMessage?.created_at ?? undefined;
+
+  // The unread separator belongs above the first UNREAD message from another user — i.e. on the row
+  // whose newer neighbour is that first unread. We locate it per-message inside the selector so
+  // `useStateStore`'s per-key comparison keeps the flag referentially stable (`false === false`) for
+  // every non-boundary row: a mark-read changes the channel-wide unread fields but only re-renders
+  // the one or two boundary rows whose flag actually flips, not the whole list.
+  const showUnreadSeparatorSelector = useCallback(
+    (snapshot: UnreadSnapshotState) => {
+      let showUnreadSeparator: boolean;
+      if (snapshot.firstUnreadMessageId) {
+        // Frozen boundary (channel open / mark-unread): anchor directly to the known first-unread id.
+        showUnreadSeparator = nextMessageId === snapshot.firstUnreadMessageId;
+      } else if (snapshot.unreadCount) {
+        // Live boundary: the separator sits above the FIRST unread-from-another message — i.e. on
+        // the last genuinely-read row (created at/before the read boundary) whose newer neighbour is
+        // that first unread. Gating on "this row is read" (rather than "this row isn't itself an
+        // unread-from-another") keeps it to a SINGLE separator even when our own messages are
+        // interleaved among the unreads: an own message sent after the boundary is not "read" by
+        // this test, so `own → unread-from-another` transitions further down never start a second
+        // separator. Chronological ordering guarantees exactly one read→unread transition.
+        const lastReadAt = snapshot.lastReadAt ?? 0;
+        const nextIsUnreadFromOther =
+          !!nextMessageId &&
+          !nextMessageIsOwn &&
+          nextMessageCreatedAt !== undefined &&
+          nextMessageCreatedAt > lastReadAt;
+        const thisIsRead =
+          typeof createdAtTimestamp === 'number' && createdAtTimestamp <= lastReadAt;
+        // Own messages sent elsewhere after the boundary leave no read row above the first unread,
+        // so the rule above never fires. Anchor on the last read message in those cases.
+        const isLastReadBeforeOwnUnread =
+          thisIsRead &&
+          messageId === snapshot.lastReadMessageId &&
+          nextMessageIsOwn &&
+          nextMessageCreatedAt !== undefined &&
+          nextMessageCreatedAt > lastReadAt;
+        showUnreadSeparator = (nextIsUnreadFromOther && thisIsRead) || isLastReadBeforeOwnUnread;
+      } else {
+        showUnreadSeparator = false;
+      }
+
+      return {
+        showUnreadSeparator,
+        // Only the boundary row needs the unread count (for its inline indicator). Gating it on
+        // `showUnreadSeparator` keeps this `undefined` for every other row, so the channel-wide
+        // count changing on each mark-read doesn't re-render the whole list.
+        unreadCount: showUnreadSeparator ? snapshot.unreadCount : undefined,
+      };
+    },
+    [createdAtTimestamp, messageId, nextMessageCreatedAt, nextMessageId, nextMessageIsOwn],
+  );
+  const { showUnreadSeparator, unreadCount } = useStateStore(
+    messagePaginator.unreadStateSnapshot,
+    showUnreadSeparatorSelector,
+  );
+
   const {
     theme: {
       messageList: { messageContainer },
     },
   } = useTheme();
   const styles = useStyles();
-  if (!channel || channel.disconnected) {
-    return null;
-  }
-
-  const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-  const isLastReadMessage =
-    last_read_message_id === message.id ||
-    (!unread_messages && createdAtTimestamp === last_read_timestamp);
-
-  const showUnreadSeparator =
-    isLastReadMessage &&
-    !isNewestMessage &&
-    // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
-    (!!first_unread_message_id || !!unread_messages);
 
   const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
@@ -100,12 +136,12 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
     <Message
       goToMessage={goToMessage}
       groupStyles={groupStyles}
-      isTargetedMessage={highlightedMessageId === message.id}
+      isTargetedMessage={isTargetedMessage}
+      isVeryLastMessage={!nextMessage}
       message={message}
       onThreadSelect={onThreadSelect}
       showUnreadUnderlay={showUnreadUnderlay}
       style={[messageContainer]}
-      threadList={threadList}
     />
   );
 
@@ -129,7 +165,7 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
       )}
       {showUnreadUnderlay && (
         <View style={styles.unreadUnderlayContainer}>
-          <InlineUnreadIndicator unreadCount={unread_messages} />
+          <InlineUnreadIndicator unreadCount={unreadCount} />
         </View>
       )}
     </View>

package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx

@@ -67,8 +67,8 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
     },
   } = useTheme();
   const styles = useStyles();
-  const accessibilityHint = useA11yLabel('a11y/Double tap to view reactions');
-  const youReacted = useA11yLabel('a11y/you reacted');
+  const accessibilityHint = useA11yLabel('message.reactionList.viewHint.accessibilityLabel');
+  const youReacted = useA11yLabel('message.reactionList.youReacted.accessibilityLabel');
   const supportedReactionTypes = supportedReactions?.map(
     (supportedReaction) => supportedReaction.type,
   );
@@ -76,7 +76,7 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
   const moreReactionsCount = reactionsCount - 4;
   const reactionsCountText =
     moreReactionsCount < 99 ? moreReactionsCount : `+${moreReactionsCount}`;
-  const moreReactionsA11yText = useA11yLabel('a11y/and {{count}} more reactions', {
+  const moreReactionsA11yText = useA11yLabel('message.reactionList.more.accessibilityLabel', {
     count: moreReactionsCount,
   });
 

package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx

@@ -62,7 +62,7 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
     },
   } = useTheme();
   const styles = useStyles();
-  const youReacted = useA11yLabel('a11y/you reacted');
+  const youReacted = useA11yLabel('message.reactionList.youReacted.accessibilityLabel');
 
   return (
     <ReactionListItemWrapper

package/src/components/Message/MessageItemView/__tests__/Message.test.tsx

@@ -4,7 +4,7 @@ import { Pressable, Text, View } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
-import type { Channel as ChannelType, StreamChat } from 'stream-chat';
+import type { Channel as ChannelType, StreamChat, Thread as ThreadInstance } from 'stream-chat';
 
 import type { ComponentOverrides } from '../../../../contexts/componentsContext/ComponentsContext';
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
@@ -22,6 +22,7 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { MessageComposer } from '../../../MessageInput/MessageComposer';
+import { Thread } from '../../../Thread/Thread';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 import { Message } from '../../Message';
 import { MessageOverlayWrapper } from '../../MessageOverlayWrapper';
@@ -61,7 +62,10 @@ describe('Message', () => {
   let renderMessage: (
     options: Omit<React.ComponentProps<typeof Message>, 'groupStyles'> &
       Partial<Pick<React.ComponentProps<typeof Message>, 'groupStyles'>>,
-    channelProps?: Partial<React.ComponentProps<typeof Channel>>,
+    channelProps?: Partial<React.ComponentProps<typeof Channel>> & {
+      /** Renders the message inside `<Thread thread>` instead of `<Channel>`. */
+      thread?: ThreadInstance;
+    },
     componentOverrides?: ComponentOverrides,
   ) => ReturnType<typeof render>;
 
@@ -79,8 +83,24 @@ describe('Message', () => {
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.channel.id);
 
-    renderMessage = (options, channelProps, componentOverrides) =>
-      render(
+    renderMessage = (options, channelProps, componentOverrides) => {
+      const { thread, ...listProps } = channelProps ?? {};
+      const content = (
+        <>
+          <Message groupStyles={['bottom']} {...options} />
+          <MessageComposer />
+        </>
+      );
+      const container = thread ? (
+        <Thread thread={thread} {...listProps}>
+          {content}
+        </Thread>
+      ) : (
+        <Channel channel={channel} {...listProps}>
+          {content}
+        </Channel>
+      );
+      return render(
         <SafeAreaProvider>
           <OverlayProvider>
             <MessageListItemProvider
@@ -95,23 +115,16 @@ describe('Message', () => {
             >
               <Chat client={chatClient}>
                 {componentOverrides ? (
-                  <WithComponents overrides={componentOverrides}>
-                    <Channel channel={channel} {...channelProps}>
-                      <Message groupStyles={['bottom']} {...options} />
-                      <MessageComposer />
-                    </Channel>
-                  </WithComponents>
+                  <WithComponents overrides={componentOverrides}>{container}</WithComponents>
                 ) : (
-                  <Channel channel={channel} {...channelProps}>
-                    <Message groupStyles={['bottom']} {...options} />
-                    <MessageComposer />
-                  </Channel>
+                  container
                 )}
               </Chat>
             </MessageListItemProvider>
           </OverlayProvider>
         </SafeAreaProvider>,
       );
+    };
   });
 
   afterEach(() => {
@@ -151,6 +164,114 @@ describe('Message', () => {
     });
   });
 
+  it('opens the thread with the registered thread instance of the parent message', async () => {
+    const message = channel.state.formatMessage(generateMessage({ reply_count: 2, user }));
+    const onThreadSelect = jest.fn();
+
+    const { getByTestId } = renderMessage({ message, onThreadSelect });
+
+    await waitFor(() => expect(getByTestId('message-replies')).toBeTruthy());
+    fireEvent.press(getByTestId('message-replies'));
+
+    expect(onThreadSelect).toHaveBeenCalledTimes(1);
+    const thread = onThreadSelect.mock.calls[0][0];
+    expect(thread.id).toBe(message.id);
+    expect(thread.channel).toBe(channel);
+    expect(chatClient.threads.get(message.id)).toBe(thread);
+  });
+
+  it('passes the thread of the parent message when "View" is pressed on a reply in the channel', async () => {
+    const parentMessage = generateMessage({ reply_count: 1, user });
+    const reply = channel.state.formatMessage(
+      generateMessage({ parent_id: parentMessage.id, show_in_channel: true, user }),
+    );
+    const getMessagesById = jest
+      .spyOn(channel, 'getMessagesById')
+      .mockResolvedValue({ messages: [parentMessage] } as unknown as Awaited<
+        ReturnType<typeof channel.getMessagesById>
+      >);
+    const onAlsoSentToChannelHeaderPress = jest.fn();
+
+    const { getByText } = renderMessage({ message: reply }, { onAlsoSentToChannelHeaderPress });
+
+    await waitFor(() => expect(getByText('Replied to a thread')).toBeTruthy());
+    fireEvent.press(getByText('View'));
+
+    await waitFor(() => expect(onAlsoSentToChannelHeaderPress).toHaveBeenCalledTimes(1));
+    expect(getMessagesById).toHaveBeenCalledWith([parentMessage.id]);
+    const { targetedMessageId, thread } = onAlsoSentToChannelHeaderPress.mock.calls[0][0];
+    expect(targetedMessageId).toBe(reply.id);
+    expect(thread.id).toBe(parentMessage.id);
+    expect(thread.channel).toBe(channel);
+    expect(chatClient.threads.get(parentMessage.id)).toBe(thread);
+  });
+
+  it('reuses the registered thread of the parent without fetching it', async () => {
+    const parentMessage = channel.state.formatMessage(generateMessage({ reply_count: 1, user }));
+    const registeredThread = chatClient.threads.ensure({ channel, parentMessage });
+    const reply = channel.state.formatMessage(
+      generateMessage({ parent_id: parentMessage.id, show_in_channel: true, user }),
+    );
+    const getMessagesById = jest.spyOn(channel, 'getMessagesById');
+    const onAlsoSentToChannelHeaderPress = jest.fn();
+
+    const { getByText } = renderMessage({ message: reply }, { onAlsoSentToChannelHeaderPress });
+
+    await waitFor(() => expect(getByText('Replied to a thread')).toBeTruthy());
+    fireEvent.press(getByText('View'));
+
+    await waitFor(() =>
+      expect(onAlsoSentToChannelHeaderPress).toHaveBeenCalledWith({
+        targetedMessageId: reply.id,
+        thread: registeredThread,
+      }),
+    );
+    expect(getMessagesById).not.toHaveBeenCalled();
+  });
+
+  it('builds the thread from a loaded parent without fetching it', async () => {
+    const parentMessage = channel.state.formatMessage(generateMessage({ reply_count: 1, user }));
+    chatClient.messageStore.upsert(parentMessage);
+    const reply = channel.state.formatMessage(
+      generateMessage({ parent_id: parentMessage.id, show_in_channel: true, user }),
+    );
+    const getMessagesById = jest.spyOn(channel, 'getMessagesById');
+    const onAlsoSentToChannelHeaderPress = jest.fn();
+
+    const { getByText } = renderMessage({ message: reply }, { onAlsoSentToChannelHeaderPress });
+
+    await waitFor(() => expect(getByText('Replied to a thread')).toBeTruthy());
+    expect(chatClient.threads.get(parentMessage.id)).toBeUndefined();
+    fireEvent.press(getByText('View'));
+
+    await waitFor(() => expect(onAlsoSentToChannelHeaderPress).toHaveBeenCalledTimes(1));
+    expect(getMessagesById).not.toHaveBeenCalled();
+    const { thread } = onAlsoSentToChannelHeaderPress.mock.calls[0][0];
+    expect(thread.id).toBe(parentMessage.id);
+    expect(chatClient.threads.get(parentMessage.id)).toBe(thread);
+  });
+
+  it('passes only the targeted message when "View" is pressed on a reply in the thread', async () => {
+    const parentMessage = channel.state.formatMessage(generateMessage({ reply_count: 1, user }));
+    const thread = chatClient.threads.ensure({ channel, parentMessage });
+    const reply = channel.state.formatMessage(
+      generateMessage({ parent_id: parentMessage.id, show_in_channel: true, user }),
+    );
+    const getMessagesById = jest.spyOn(channel, 'getMessagesById');
+    const onAlsoSentToChannelHeaderPress = jest.fn();
+
+    const { getByText } = renderMessage(
+      { message: reply },
+      { onAlsoSentToChannelHeaderPress, thread },
+    );
+
+    await waitFor(() => expect(getByText('Also sent in channel')).toBeTruthy());
+    fireEvent.press(getByText('View'));
+
+    expect(onAlsoSentToChannelHeaderPress).toHaveBeenCalledWith({ targetedMessageId: reply.id });
+    expect(getMessagesById).not.toHaveBeenCalled();
+  });
+
   it('teleports a custom overlay target without applying overlay styles to siblings', async () => {
     const message = generateMessage({ user });
     const { getByTestId, getByText } = renderMessage(

package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
-import type { StreamChat } from 'stream-chat';
+import type { StreamChat, UserResponse } from 'stream-chat';
 
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import {
@@ -19,7 +19,7 @@ describe('MessageAuthor', () => {
   let chatClient: StreamChat;
 
   beforeEach(async () => {
-    chatClient = await getTestClientWithUser({ id: 'me' });
+    chatClient = await getTestClientWithUser({ id: 'me' } as UserResponse);
   });
 
   it('should render message author', async () => {