stream-chat-react-native-core 10.0.0-rc.2 → 10.0.0-rc.3

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -45,7 +45,7 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const isOtherMemberOnline = useMemo(
     () =>
       Object.values(members).some(
-        (member) => member.user?.id !== client.userID && member.user?.online,
+        (member) => member.user?.id !== client.userId && member.user?.online,
       ),
     [client, members],
   );

package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx

@@ -29,7 +29,7 @@ export const ChannelLastMessagePreview = ({ message }: ChannelLastMessagePreview
           width={16}
         />
       ) : null}
-      <Text numberOfLines={1} style={[styles.subtitle]}>
+      <Text numberOfLines={1} style={[styles.subtitle]} testID='channel-preview-message'>
         {messagePreviewTitle}
       </Text>
     </View>

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -96,7 +96,11 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }
 
   if (!isLastMessageByCurrentUser) {
-    return <Text style={styles.username}>{message?.user?.name || message?.user?.id}:</Text>;
+    return (
+      <Text style={styles.username} testID='channel-preview-sender'>
+        {message?.user?.name || message?.user?.id}:
+      </Text>
+    );
   }
 
   return (
@@ -122,7 +126,9 @@ export const ChannelMessagePreviewDeliveryStatus = ({
         ) : status === MessageDeliveryStatus.SENT ? (
           <icons.Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
         ) : null}
-        <Text style={styles.text}>{t('common.you.label', 'You')}:</Text>
+        <Text style={styles.text} testID='channel-preview-sender'>
+          {t('common.you.label', 'You')}:
+        </Text>
       </View>
     </CompositeAccessibilityProbe>
   );

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -19,7 +19,7 @@ export const ChannelPreviewTitle = ({ channel, title }: ChannelPreviewTitleProps
   const displayName = useChannelPreviewDisplayName(channel);
 
   return (
-    <Text numberOfLines={1} style={styles.title}>
+    <Text numberOfLines={1} style={styles.title} testID='channel-preview-title'>
       {title ?? displayName}
     </Text>
   );

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -77,7 +77,7 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
   } = useTheme();
   const styles = useStyles();
   const swipeRegistry = useSwipeRegistryContext();
-  const accessibilityHint = useA11yLabel('attachment.gallery.doubleTapToOpen.accessibilityLabel');
+  const accessibilityHint = useA11yLabel('channelPreview.doubleTapToOpen.accessibilityLabel');
 
   const onPress = useStableCallback(() => {
     if (swipeRegistry?.hasOpen()) {

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

@@ -145,7 +145,7 @@ describe('ChannelPreview', () => {
   describe('notification.mark_read event', () => {
     it("should not update the unread count if the event's cid does not match the channel's cid", async () => {
       channel = await initChannelFromData(chatClient);
-      seedUnread(channel, chatClient.userID as string, 10);
+      seedUnread(channel, chatClient.userId as string, 10);
 
       const { getByTestId } = render(<TestComponent />);
 
@@ -167,7 +167,7 @@ describe('ChannelPreview', () => {
 
     it('should update the unread count to 0', async () => {
       channel = await initChannelFromData(chatClient);
-      seedUnread(channel, chatClient.userID as string, 10);
+      seedUnread(channel, chatClient.userId as string, 10);
 
       const { getByTestId } = render(<TestComponent />);
 
@@ -327,7 +327,7 @@ describe('ChannelPreview', () => {
         muteStatus: { createdAt: null, expiresAt: null, muted: true },
       });
     });
-    seedUnread(channel, chatClient.userID as string, 5);
+    seedUnread(channel, chatClient.userId as string, 5);
 
     const { getByTestId } = render(<TestComponent />);
 
@@ -360,7 +360,7 @@ describe('ChannelPreview', () => {
   it('should update the unread count on "message.new" event', async () => {
     const someOtherUser = generateUser({ id: 'not-me' });
     channel = await initChannelFromData(chatClient);
-    seedUnread(channel, chatClient.userID as string, 0);
+    seedUnread(channel, chatClient.userId as string, 0);
 
     const { getByTestId } = render(<TestComponent />);
 

package/src/components/ChannelPreview/__tests__/ChannelPreviewView.test.tsx

@@ -4,6 +4,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react-nativ
 import truncate from 'lodash/truncate';
 import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import type { TranslationDictionary } from '../../../i18n/types';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
@@ -11,6 +13,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../../Chat/Chat';
 import { ChannelPreviewView } from '../ChannelPreviewView';
 
@@ -56,6 +59,43 @@ describe('ChannelPreviewView', () => {
     });
   });
 
+  it("takes its accessibility hint from its own key, not the gallery's", async () => {
+    await initializeChannel(generateChannelResponse());
+    const i18nInstance = new Streami18n({ logger: () => {} });
+    i18nInstance.registerTranslation('en', {
+      'attachment.gallery.doubleTapToOpen.accessibilityLabel': 'Double tap to view the photo',
+    } as TranslationDictionary);
+
+    const { rerender } = render(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <ChannelPreviewView channel={channel as ChannelType} onSelect={jest.fn()} />
+        </Chat>
+      </OverlayProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId('channel-preview-button').props.accessibilityHint).toBe(
+        'Double tap to open',
+      ),
+    );
+
+    i18nInstance.registerTranslation('en', {
+      'channelPreview.doubleTapToOpen.accessibilityLabel': 'Double tap to open the channel',
+    } as TranslationDictionary);
+    rerender(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <ChannelPreviewView channel={channel as ChannelType} onSelect={jest.fn()} />
+        </Chat>
+      </OverlayProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId('channel-preview-button').props.accessibilityHint).toBe(
+        'Double tap to open the channel',
+      ),
+    );
+  });
+
   it('should render name of channel', async () => {
     const channelName = Date.now().toString();
     await initializeChannel(

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewData.test.tsx

@@ -0,0 +1,51 @@
+import { StateStore } from '@stream-io/state-store';
+import { act, renderHook } from '@testing-library/react-native';
+import { Channel, ChannelMemberResponse, StreamChat } from 'stream-chat';
+
+import { convertDateToTimestamp } from '../../../../mock-builders/generator/time';
+import { useChannelPreviewData } from '../useChannelPreviewData';
+
+describe('useChannelPreviewData', () => {
+  const buildMockChannel = (membership: Record<string, unknown>) =>
+    ({
+      messageComposer: { registerDraftEventSubscriptions: () => () => undefined },
+      messagePaginator: { aggregateState: new StateStore({ latestMessage: null }) },
+      state: new StateStore({ membership, muteStatus: { muted: false }, read: {} }),
+    }) as unknown as Channel;
+  const client = { userId: 'me' } as unknown as StreamChat;
+
+  it('does not re-render when re-hydration replaces membership with an equal copy', () => {
+    const channel = buildMockChannel({ pinned_at: null, user_id: 'me' });
+    let renders = 0;
+    const { result } = renderHook(() => {
+      renders++;
+      return useChannelPreviewData(channel, client);
+    });
+    const rendersBefore = renders;
+
+    act(() => {
+      channel.state.partialNext({
+        membership: { pinned_at: null, user_id: 'me' } as unknown as ChannelMemberResponse,
+      });
+    });
+
+    expect(renders).toBe(rendersBefore);
+    expect(result.current.pinned).toBe(false);
+  });
+
+  it('updates when the channel is pinned', () => {
+    const channel = buildMockChannel({ pinned_at: null, user_id: 'me' });
+    const { result } = renderHook(() => useChannelPreviewData(channel, client));
+
+    act(() => {
+      channel.state.partialNext({
+        membership: {
+          pinned_at: convertDateToTimestamp('2026-06-15T08:00:00.000Z'),
+          user_id: 'me',
+        } as unknown as ChannelMemberResponse,
+      });
+    });
+
+    expect(result.current.pinned).toBe(true);
+  });
+});

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayName.test.tsx

@@ -24,7 +24,7 @@ describe('useChannelPreviewDisplayName', () => {
     jest
       .spyOn(ChatContext, 'useChatContext')
       .mockImplementation(
-        () => ({ client: { userID: OWN_USER_ID } }) as unknown as ChatContextValue,
+        () => ({ client: { userId: OWN_USER_ID } }) as unknown as ChatContextValue,
       );
     jest.spyOn(useChannelNameModule, 'useChannelName').mockReturnValue(undefined);
   });

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayPresence.test.tsx

@@ -18,7 +18,7 @@ describe('useChannelPreviewDisplayPresence', () => {
     jest.clearAllMocks();
     chatClient = await getTestClientWithUser({
       id: currentUserId,
-      userID: currentUserId,
+      userId: currentUserId,
     } as unknown as Parameters<typeof getTestClientWithUser>[0]);
 
     // Create mock channel

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewPollLabel.test.tsx

@@ -0,0 +1,87 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import { Poll, PollResponseData, PollVoteResponseData, StreamChat } from 'stream-chat';
+
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { useChannelPreviewPollLabel } from '../useChannelPreviewPollLabel';
+
+const OWN_USER = { id: 'own-user' };
+const MESSAGE_ID = 'message-id';
+const POLL_ID = 'poll-id';
+
+const generateVote = (id: string, optionId: string, createdAt: string) =>
+  ({
+    created_at: new Date(createdAt).getTime(),
+    id,
+    option_id: optionId,
+    poll_id: POLL_ID,
+    updated_at: new Date(createdAt).getTime(),
+    user: OWN_USER,
+    user_id: OWN_USER.id,
+  }) as unknown as PollVoteResponseData;
+
+const setup = (ownVotes: PollVoteResponseData[]) => {
+  const client = {
+    deletePollVote: jest.fn(() => new Promise(() => {})),
+    user: OWN_USER,
+    userID: OWN_USER.id,
+  } as unknown as StreamChat;
+  const latestVotesByOption: Record<string, PollVoteResponseData[]> = {};
+  const voteCountsByOption: Record<string, number> = {};
+  ownVotes.forEach((vote) => {
+    latestVotesByOption[vote.option_id as string] = [vote];
+    voteCountsByOption[vote.option_id as string] = 1;
+  });
+  const poll = new Poll({
+    client,
+    poll: {
+      enforce_unique_vote: false,
+      id: POLL_ID,
+      latest_answers: [],
+      latest_votes_by_option: latestVotesByOption,
+      name: 'Poll',
+      options: [
+        { id: 'option-a', text: 'A' },
+        { id: 'option-b', text: 'B' },
+      ],
+      own_votes: ownVotes,
+      vote_count: ownVotes.length,
+      vote_counts_by_option: voteCountsByOption,
+    } as unknown as PollResponseData,
+  });
+  (client as unknown as { polls: unknown }).polls = { fromState: () => poll };
+
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+  const hook = renderHook(() => useChannelPreviewPollLabel({ pollId: POLL_ID }), { wrapper });
+  return { ...hook, poll };
+};
+
+describe('useChannelPreviewPollLabel', () => {
+  it('returns no label once the only vote is removed', () => {
+    const vote = generateVote('vote-a', 'option-a', '2026-10-27T10:00:00.000Z');
+    const { poll, result } = setup([vote]);
+    expect(result.current).toBe('You voted: A');
+
+    act(() => {
+      poll.removeVote(vote.id, MESSAGE_ID);
+    });
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('labels the remaining latest vote once another option loses its only vote', () => {
+    const voteA = generateVote('vote-a', 'option-a', '2026-10-27T10:00:00.000Z');
+    const voteB = generateVote('vote-b', 'option-b', '2026-10-27T09:00:00.000Z');
+    const { poll, result } = setup([voteA, voteB]);
+
+    act(() => {
+      poll.removeVote(voteA.id, MESSAGE_ID);
+    });
+
+    expect(poll.data.latest_votes_by_option['option-a'] ?? []).toEqual([]);
+    expect(result.current).toBe('You voted: B');
+  });
+});

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -22,7 +22,7 @@ const lastMessageSelector = (state: MessagePaginatorAggregateState) => ({
 });
 
 export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
-  const userId = client.userID;
+  const userId = client.userId;
   const { lastMessage } =
     useStateStore(channel.messagePaginator.aggregateState, lastMessageSelector) ?? {};
 
@@ -30,20 +30,19 @@ export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
   // rather than one subscription per concern.
   const previewStateSelector = useCallback(
     (state: MembershipState & MuteStatusState & ReadState) => ({
-      membership: state.membership,
       muteStatus: state.muteStatus,
+      pinned: state.membership?.pinned_at != null,
       unread: userId ? (state.read[userId]?.unread_messages ?? 0) : 0,
     }),
     [userId],
   );
   const {
-    membership,
     muteStatus,
+    pinned = false,
     unread: reactiveUnread,
   } = useStateStore(channel.state, previewStateSelector) ?? {};
 
   const muted = muteStatus?.muted ?? false;
-  const pinned = membership?.pinned_at != null;
   // Muted channels show no unread count.
   const unread = muted ? 0 : (reactiveUnread ?? 0);
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -18,7 +18,7 @@ const pickName = (member: ChannelMemberResponse) => ({
 export const useChannelPreviewDisplayName = (channel?: Channel) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
-  const currentUserId = client?.userID;
+  const currentUserId = client?.userId;
   const members = useChannelMembersState(channel, pickName);
   const channelName = useChannelName(channel);
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts

@@ -11,7 +11,7 @@ import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents
 const selector = (channel: Channel, client: StreamChat) => {
   const members = channel.state.members;
   const membersCount = Object.keys(members).length;
-  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userID);
+  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userId);
 
   if (membersCount !== 2) return false;
   return otherMember?.user?.online ?? false;

package/src/components/ChannelPreview/hooks/useChannelPreviewPollLabel.ts

@@ -32,7 +32,7 @@ export const useChannelPreviewPollLabel = ({ pollId }: UseChannelPreviewPollLabe
     () =>
       latestVotesByOption
         ? Object.values(latestVotesByOption)
-            .map((votes) => votes?.[0])
+            .flatMap((votes) => votes?.[0] ?? [])
             .sort((a, b) => b.created_at - a.created_at)
         : [],
     [latestVotesByOption],

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

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import type { StreamChat } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
 
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
@@ -136,6 +136,36 @@ describe('Chat', () => {
     expect(chatClient.networkConnection.isOnline).toBe(true);
   });
 
+  it('keeps a reporter the app registered before mounting', async () => {
+    const statusReporter = jest.fn(() => () => undefined);
+    chatClient.config.set({ client: { networkConnection: { statusReporter } } });
+
+    const { getByTestId } = render(
+      <Chat client={chatClient}>
+        <View testID='children' />
+      </Chat>,
+    );
+    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+
+    expect(chatClient.networkConnection.config.statusReporter).toBe(statusReporter);
+    expect(NetInfo.addEventListener).not.toHaveBeenCalled();
+  });
+
+  it('keeps a reporter passed to the client constructor', async () => {
+    const statusReporter = jest.fn(() => () => undefined);
+    const client = new StreamChat('key', { client: { networkConnection: { statusReporter } } });
+
+    const { getByTestId } = render(
+      <Chat client={client}>
+        <View testID='children' />
+      </Chat>,
+    );
+    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+
+    expect(client.networkConnection.config.statusReporter).toBe(statusReporter);
+    expect(NetInfo.addEventListener).not.toHaveBeenCalled();
+  });
+
   it('keeps the NetInfo listener alive after unmount, because the client outlives <Chat>', async () => {
     // The reporter's lifetime is the CLIENT's, not this component's. Releasing it here would leave
     // `isOnline` frozen at a stale value (`setStatusReporter(null)` keeps the last status by design),

package/src/components/Chat/hooks/useConnectionLifecycle.ts

@@ -9,9 +9,9 @@ import type { NetworkStatusReporter, StreamChat } from 'stream-chat';
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 
 /**
- * Installs the NetInfo network status reporter on the client and closes the WebSocket while the app
- * is in the background, reopening it in the foreground (push notifications are only delivered while
- * no socket is active).
+ * Installs the NetInfo network status reporter on the client, unless the app registered one, and
+ * closes the WebSocket while the app is in the background, reopening it in the foreground (push
+ * notifications are only delivered while no socket is active).
  *
  * Read the results with `useNetworkConnectionState()` and `useWSConnectionState()`.
  *
@@ -32,7 +32,7 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
 
   const onForeground = useCallback(() => {
     // Without a user ID, opening the connection would raise an unneeded error.
-    if (!clientExists || !client.userID) {
+    if (!clientExists || !client.userId) {
       return;
     }
 
@@ -44,7 +44,7 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
   // A `<Chat>` mounted while the app is already active (Android recreating the activity) never sees
   // the background-to-foreground change that reopens a socket its predecessor closed.
   useEffect(() => {
-    if (!closeConnectionOnBackground || !clientExists || !client.userID) return;
+    if (!closeConnectionOnBackground || !clientExists || !client.userId) return;
     if (AppState.currentState === 'active' && client.wsConnection.connection?.isDisconnected) {
       client.openConnection();
     }
@@ -55,6 +55,11 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
       return;
     }
 
+    // a reporter the app registered, through `client.config` or the client's constructor wins
+    if (client.config.getConfig('client')?.networkConnection?.statusReporter) {
+      return;
+    }
+
     // Set through the client config so `client.config.get('client')` shows the installed reporter.
     // Required on React Native: the client's fallback mirrors its own WebSocket and cannot report
     // the network returning before the socket notices.
@@ -74,7 +79,8 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
 };
 
 /**
- * Subscribes to NetInfo and reports every change to the client. `<Chat>` installs it in an effect.
+ * Subscribes to NetInfo and reports every change to the client. `<Chat>` installs it in an effect,
+ * unless a reporter is registered in `client.config`.
  *
  * When you build the client yourself, install it at construction instead:
  *

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -33,7 +33,7 @@ const LoadingErrorWrapper = (props: React.PropsWithChildren<LoadingErrorWrapperP
 
 export type LoadingErrorProps = {
   error?: Error;
-  listType?: 'channel' | 'message' | 'default';
+  listType?: 'channel' | 'message' | 'thread' | 'default';
   loadNextPage?: () => Promise<void>;
   retry?: () => void;
 };
@@ -64,6 +64,13 @@ export const LoadingErrorIndicator = (props: LoadingErrorProps) => {
           )}
         />
       );
+    case 'thread':
+      return (
+        <LoadingErrorWrapper
+          onPress={retry}
+          text={t('indicators.loading.replies.error', 'Error loading replies...')}
+        />
+      );
     default:
       return <LoadingErrorWrapper text={t('indicators.loading.error', 'Error loading')} />;
   }

package/src/components/Message/Message.tsx

@@ -343,7 +343,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const actionsEnabled =
     message.type === 'regular' && message.status === MessageStatusTypes.RECEIVED;
 
-  const isMyMessage = client && message && client.userID === message.user?.id;
+  const isMyMessage = client && message && client.userId === message.user?.id;
 
   const handleAction = async (name: string, value: string) => {
     if (message.id) {

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

@@ -71,6 +71,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           <icons.CheckAll
             height={16}
             stroke={styles.readCheck.color}
+            testID='message-status-read'
             width={16}
             {...checkAllIcon}
           />
@@ -78,13 +79,26 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           <icons.CheckAll
             stroke={styles.deliveredCheck.color}
             height={16}
+            testID='message-status-delivered'
             width={16}
             {...checkAllIcon}
           />
         ) : sending ? (
-          <icons.Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
+          <icons.Time
+            stroke={styles.sendingCheck.color}
+            height={16}
+            testID='message-status-sending'
+            width={16}
+            {...timeIcon}
+          />
         ) : sent ? (
-          <icons.Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
+          <icons.Check
+            stroke={styles.sentCheck.color}
+            height={16}
+            testID='message-status-sent'
+            width={16}
+            {...checkIcon}
+          />
         ) : null}
       </View>
     </>

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

@@ -57,8 +57,9 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
   const createdAtTimestamp = message.created_at;
   const messageId = message.id;
   const nextMessageId = nextMessage?.id;
-  const nextMessageIsOwn = nextMessage?.user?.id === client.userID;
+  const nextMessageIsOwn = nextMessage?.user?.id === client.userId;
   const nextMessageCreatedAt = nextMessage?.created_at ?? undefined;
+  const isThreadList = !!messagePaginator.parentMessageId;
 
   // The unread separator goes on the row above the first unread message from another user. It is
   // located per message inside the selector, so the flag stays `false` for every other row and a
@@ -66,7 +67,9 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
   const showUnreadSeparatorSelector = useCallback(
     (snapshot: UnreadSnapshotState) => {
       let showUnreadSeparator: boolean;
-      if (snapshot.firstUnreadMessageId) {
+      if (isThreadList) {
+        showUnreadSeparator = false;
+      } else if (snapshot.firstUnreadMessageId) {
         // Frozen boundary (channel open or mark-unread): anchor to the known first unread ID.
         showUnreadSeparator = nextMessageId === snapshot.firstUnreadMessageId;
       } else if (snapshot.unreadCount) {
@@ -103,7 +106,14 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
         unreadCount: showUnreadSeparator ? snapshot.unreadCount : undefined,
       };
     },
-    [createdAtTimestamp, messageId, nextMessageCreatedAt, nextMessageId, nextMessageIsOwn],
+    [
+      createdAtTimestamp,
+      isThreadList,
+      messageId,
+      nextMessageCreatedAt,
+      nextMessageId,
+      nextMessageIsOwn,
+    ],
   );
   const { showUnreadSeparator, unreadCount } = useStateStore(
     messagePaginator.unreadStateSnapshot,
@@ -119,7 +129,7 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
 
   const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
-  const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+  const wrapMessageInTheme = client.userId === message.user?.id && !!myMessageTheme;
   const renderDateSeperator = dateSeparatorDate ? (
     <View style={styles.dateSeparatorContainer}>
       <InlineDateSeparator date={dateSeparatorDate} />

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

@@ -184,4 +184,25 @@ describe('MessageStatus', () => {
       });
     });
   });
+
+  it.each([
+    [false, false, 'sending', 'message-status-sending'],
+    [true, true, 'received', 'message-status-read'],
+    [false, false, 'received', 'message-status-sent'],
+    [true, false, 'received', 'message-status-delivered'],
+  ] as [boolean, boolean, string, string][])(
+    'exposes a status testID when delivered is %s, read is %s and status is %s',
+    async (delivered, read, status, testID) => {
+      const message = generateMessage({ user: generateUser() });
+      const { getByTestId } = renderMessageStatus({
+        delivered,
+        message: { ...message, status },
+        read,
+      });
+      // The icon row is hidden from screen readers in favour of the hidden text label.
+      await waitFor(() => {
+        expect(getByTestId(testID, { includeHiddenElements: true })).toBeTruthy();
+      });
+    },
+  );
 });

package/src/components/Message/hooks/__tests__/useCreateMessageActionHandlers.test.tsx

@@ -22,7 +22,7 @@ const createClient = (mutedUsers: UserMuteResponse[] = []) =>
     on: jest.fn(() => ({ unsubscribe: jest.fn() })),
     pinMessage: jest.fn(),
     unpinMessage: jest.fn(),
-    userID: 'current-user-id',
+    userId: 'current-user-id',
   }) as unknown as StreamChat & {
     moderation: { mute: jest.Mock; unmute: jest.Mock };
     notifications: { add: jest.Mock; remove: jest.Mock; startTimeout: jest.Mock };

package/src/components/Message/hooks/__tests__/useUserMuteActive.test.tsx

@@ -13,7 +13,7 @@ const muteOf = (targetId: string) =>
 const createClient = () =>
   ({
     mutedUsersStore: new StateStore<{ mutedUsers: UserMuteResponse[] }>({ mutedUsers: [] }),
-    userID: 'current-user-id',
+    userId: 'current-user-id',
   }) as unknown as StreamChat;
 
 describe('useUserMuteActive', () => {