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

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

@@ -328,6 +328,8 @@ describe('Thread', () => {
       await waitFor(() => {
         expect(screen.getByTestId('loading-error')).toBeTruthy();
       });
+      // The thread's own copy, not the channel's "Error loading messages for this channel...".
+      expect(screen.getByTestId('loading-error')).toHaveTextContent('Error loading replies...');
     });
 
     it('retries the reply query — and only the reply query — from the indicator', async () => {
@@ -511,10 +513,10 @@ describe('Thread lifecycle', () => {
         generateMessage({ reply_count: 3, user }),
       );
       const readState = (unreadMessageCount: number) => ({
-        [chatClient.userID as string]: {
+        [chatClient.userId as string]: {
           lastReadAt: 1,
           unreadMessageCount,
-          user: { id: chatClient.userID as string },
+          user: { id: chatClient.userId as string },
         },
       });
       return { markRead, parentMessage, readState, testChannel };
@@ -584,4 +586,89 @@ describe('Thread lifecycle', () => {
       expect(markRead.mock.calls.every(([options]) => options?.thread_id)).toBe(true);
     });
   });
+
+  describe('reopening a thread left on an older page', () => {
+    const OLDER_PAGE_START = new Date('2020-01-01T00:00:00.000Z').getTime();
+
+    // A thread whose newest replies are loaded, but whose list shows an older page, as it does
+    // after a jump to a quoted or searched reply.
+    const setUpThreadOnOlderPage = async () => {
+      const testChannel = await watchChannel();
+      const parentMessage = testChannel.state.formatMessage(generateMessage({ user }));
+      const threadInstance = new ThreadClass({
+        channel: testChannel,
+        client: chatClient,
+        parentMessage,
+      });
+      jest.spyOn(threadInstance, 'reload').mockResolvedValue(undefined);
+      jest.spyOn(threadInstance.messagePaginator, 'toTail').mockResolvedValue(undefined);
+
+      threadInstance.messagePaginator.setItems({
+        valueOrFactory: Array.from({ length: 10 }, (_, i) =>
+          generateMessage({ id: `newest-${i}`, parent_id: parentMessage.id }),
+        ),
+        isFirstPage: true,
+        isLastPage: true,
+      });
+      threadInstance.messagePaginator.ingestPage({
+        page: Array.from({ length: 5 }, (_, i) =>
+          generateMessage({
+            id: `older-${i}`,
+            parent_id: parentMessage.id,
+            timestamp: OLDER_PAGE_START + i * 1000,
+          }),
+        ),
+        policy: 'strict-overlap-only',
+        setActive: true,
+      });
+      expect(threadInstance.messagePaginator.isActiveIntervalAtHead).toBe(false);
+
+      return threadInstance;
+    };
+
+    it('shows the newest replies again', async () => {
+      const threadInstance = await setUpThreadOnOlderPage();
+
+      openThread(threadInstance);
+
+      await waitFor(() =>
+        expect(threadInstance.messagePaginator.isActiveIntervalAtHead).toBe(true),
+      );
+      expect(threadInstance.messagePaginator.items?.map((reply) => reply.id)).toContain('newest-9');
+    });
+
+    it('keeps a jump the integrator already made to a loaded reply', async () => {
+      const threadInstance = await setUpThreadOnOlderPage();
+      // A deep link from the screen: the target is loaded, so the jump lands at once.
+      await threadInstance.messagePaginator.jumpToMessage('older-2', {
+        focusReason: 'jump-to-message',
+      });
+      const jumpToTheLatestMessageSpy = jest.spyOn(
+        threadInstance.messagePaginator,
+        'jumpToTheLatestMessage',
+      );
+
+      openThread(threadInstance);
+
+      expect(jumpToTheLatestMessageSpy).not.toHaveBeenCalled();
+      expect(threadInstance.messagePaginator.isActiveIntervalAtHead).toBe(false);
+      expect(
+        threadInstance.messagePaginator.messageFocusSignal.getLatestValue().signal?.messageId,
+      ).toBe('older-2');
+    });
+
+    it('leaves a jump that is still in flight alone', async () => {
+      const threadInstance = await setUpThreadOnOlderPage();
+      // A deep link to a reply that is not loaded: its query is in flight.
+      jest.spyOn(threadInstance.messagePaginator, 'isLoading', 'get').mockReturnValue(true);
+      const jumpToTheLatestMessageSpy = jest.spyOn(
+        threadInstance.messagePaginator,
+        'jumpToTheLatestMessage',
+      );
+
+      openThread(threadInstance);
+
+      expect(jumpToTheLatestMessageSpy).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/ThreadList/ThreadListItem.tsx

@@ -158,7 +158,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
         channel: nextValue.channel,
         deletedAt: nextValue.deletedAt,
         ownUnreadMessageCount:
-          (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+          (client.userId && nextValue.read[client.userId]?.unreadMessageCount) || 0,
         parentMessage: nextValue.parentMessage,
       }) as const,
     [client],

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -11,13 +11,15 @@ import { primitives } from '../../theme';
 const selector = (nextValue: ThreadManagerState) =>
   ({ unseenThreadIds: nextValue.unseenThreadIds }) as const;
 
-// The paginator records a failed reload and clears it on the next successful query.
+// The paginator records a failed query and clears it on the next successful one.
 const lastQueryErrorSelector = (nextValue: { lastQueryError?: Error }) => ({
   lastQueryError: nextValue.lastQueryError,
 });
 
 export const ThreadListUnreadBanner = () => {
+  // we need the two extra states so we can tell the client's states apart
   const [loading, setLoading] = useState(false);
+  const [reloadFailed, setReloadFailed] = useState(false);
   const { client } = useChatContext();
   const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
@@ -48,8 +50,10 @@ export const ThreadListUnreadBanner = () => {
     setLoading(true);
     try {
       await client.threads.reload();
+      setReloadFailed(!!client.threads.paginator.lastQueryError);
     } catch {
       // Only with the paginator's `throwErrors`; the error is already in its state.
+      setReloadFailed(true);
     } finally {
       setLoading(false);
     }
@@ -64,7 +68,7 @@ export const ThreadListUnreadBanner = () => {
     );
   }
 
-  if (lastQueryError) {
+  if (reloadFailed && lastQueryError) {
     return (
       <Pressable onPress={handlePress} style={pressableStyle}>
         <icons.ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />

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

@@ -179,4 +179,25 @@ describe('ThreadList loading states', () => {
     await waitFor(() => expect(rows()).toHaveLength(2));
     expect(screen.queryByText("Couldn't load new threads. Tap to retry")).toBeNull();
   });
+
+  it('keeps the new threads count when a different thread query failed', async () => {
+    jest
+      .spyOn(chatClient, 'queryThreadsAndHydrate')
+      .mockResolvedValueOnce({ next: undefined, threads: [makeThread()] });
+    render(
+      <Chat client={chatClient}>
+        <ThreadList isFocused />
+      </Chat>,
+    );
+    await waitFor(() => expect(rows()).toHaveLength(1));
+
+    // A failed next page, for example: the paginator records it the same way as a failed reload.
+    act(() => {
+      chatClient.threads.paginator.state.partialNext({ lastQueryError: new Error('offline') });
+      chatClient.threads.state.partialNext({ unseenThreadIds: ['a'] });
+    });
+
+    await waitFor(() => expect(screen.getByText('1 new thread')).toBeTruthy());
+    expect(screen.queryByText("Couldn't load new threads. Tap to retry")).toBeNull();
+  });
 });

package/src/components/index.ts

@@ -34,6 +34,7 @@ export * from './Channel/hooks/useCreateChannelContext';
 export * from './Channel/hooks/useCreateInputMessageInputContext';
 export * from './Channel/hooks/useCreateMessagesContext';
 export * from './Channel/hooks/useCreateThreadContext';
+export * from './Channel/hooks/useJumpToLatestOnOpen';
 
 export * from './ChannelList/ChannelList';
 export * from './ChannelList/ChannelListFooterLoadingIndicator';
@@ -150,7 +151,9 @@ export * from './MessageList/hooks/useMarkRead';
 // Only the constant, for integrators running their own `jumpToMessage`.
 export { DEFAULT_HIGHLIGHT_DURATION } from './MessageList/hooks/useMessageListFocus';
 export * from './MessageList/hooks/useMessageList';
+export * from './MessageList/hooks/useOwnUnreadCount';
 export * from './MessageList/hooks/useTypingString';
+export * from './MessageList/hooks/useTypingUsers';
 export * from './MessageList/InlineDateSeparator';
 export * from './MessageList/InlineLoadingMoreIndicator';
 export * from './MessageList/InlineLoadingMoreRecentIndicator';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -149,7 +149,6 @@ import { StopMessageStreamingButton } from '../../components/MessageInput/StopMe
 import { DateHeader } from '../../components/MessageList/DateHeader';
 import { InlineDateSeparator } from '../../components/MessageList/InlineDateSeparator';
 import { InlineUnreadIndicator } from '../../components/MessageList/InlineUnreadIndicator';
-import { MessageList } from '../../components/MessageList/MessageList';
 import { MessageSystem } from '../../components/MessageList/MessageSystem';
 import { NetworkDownIndicator } from '../../components/MessageList/NetworkDownIndicator';
 import { ScrollToBottomButton } from '../../components/MessageList/ScrollToBottomButton';
@@ -448,7 +447,6 @@ const components = {
   MessageInputLeadingView,
   MessageInputTrailingView,
   MessageItemView,
-  MessageList,
   MessagePinnedHeader,
   MessageReactionPicker,
   MessageReminderHeader,

package/src/contexts/liveLocationManagerContext/LiveLocationManagerContext.tsx

@@ -35,7 +35,7 @@ export const LiveLocationManagerProvider = (
     }
     return new LiveLocationManager({
       client,
-      getDeviceId: getDeviceId ?? (() => `react-native-${Platform.OS}-${client.userID}`),
+      getDeviceId: getDeviceId ?? (() => `react-native-${Platform.OS}-${client.userId}`),
       watchLocation,
     });
   }, [client, getDeviceId, watchLocation]);

package/src/hooks/__tests__/useChannelMuteActive.test.tsx

@@ -21,7 +21,7 @@ const createClient = ({
     // muted USERS stay client-global — useMutedUsers reads them reactively from mutedUsersStore.
     mutedUsersStore: new StateStore({ mutedUsers }),
     on: jest.fn(() => ({ unsubscribe: jest.fn() })),
-    userID: CURRENT_USER_ID,
+    userId: CURRENT_USER_ID,
   }) as never;
 
 // Back the mock channel with a real StateStore (so `useStateStore` can subscribe to `members` and

package/src/hooks/__tests__/useIsDirectChat.test.tsx

@@ -23,7 +23,7 @@ describe('useIsDirectChat', () => {
     jest
       .spyOn(ChatContext, 'useChatContext')
       .mockImplementation(
-        () => ({ client: { userID: OWN_USER_ID } }) as unknown as ChatContextValue,
+        () => ({ client: { userId: OWN_USER_ID } }) as unknown as ChatContextValue,
       );
   });
 

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -58,7 +58,7 @@ const createChannelMock = (params?: {
         getLatestValue: () => ({ userIds: blockedUserIds }),
         subscribeWithSelector: () => () => {},
       },
-      userID: ownUserId,
+      userId: ownUserId,
     }),
     state: {
       members: {

package/src/hooks/actions/__tests__/useChannelActions.test.tsx

@@ -58,7 +58,7 @@ const createClient = () => ({
   unblockUser: jest.fn(),
   unmuteUser: jest.fn(),
   uploadImage: jest.fn().mockResolvedValue({ file: 'https://cdn.example.com/uploaded.png' }),
-  userID: 'current-user-id',
+  userId: 'current-user-id',
 });
 
 const createChannel = (client: ReturnType<typeof createClient>) =>

package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx

@@ -35,15 +35,15 @@ const createMemberMock = (userId = 'target-user-id'): ChannelMemberResponse =>
     user_id: userId,
   }) as ChannelMemberResponse;
 
-const createChannelMock = (params?: { blockedUserIds?: string[]; userID?: string }): Channel => {
-  const { blockedUserIds = [], userID = 'current-user-id' } = params ?? {};
+const createChannelMock = (params?: { blockedUserIds?: string[]; userId?: string }): Channel => {
+  const { blockedUserIds = [], userId = 'current-user-id' } = params ?? {};
   return {
     getClient: () => ({
       blockedUsers: {
         getLatestValue: () => ({ userIds: blockedUserIds }),
         subscribeWithSelector: () => () => {},
       },
-      userID,
+      userId,
     }),
   } as unknown as Channel;
 };
@@ -84,7 +84,7 @@ describe('useChannelMemberActionItems', () => {
   });
 
   it('returns no action items when the member is the current user', () => {
-    const currentUserChannel = createChannelMock({ userID: 'target-user-id' });
+    const currentUserChannel = createChannelMock({ userId: 'target-user-id' });
 
     const { result } = renderHook(() =>
       useChannelMemberActionItems({ channel: currentUserChannel, member }),
@@ -101,7 +101,7 @@ describe('useChannelMemberActionItems', () => {
     });
 
     const wrapper = ({ children }: PropsWithChildren) => (
-      <ChatProvider value={{ client: { mutedUsersStore, userID: 'current-user-id' } } as never}>
+      <ChatProvider value={{ client: { mutedUsersStore, userId: 'current-user-id' } } as never}>
         {children}
       </ChatProvider>
     );
@@ -166,7 +166,7 @@ describe('useChannelMemberActionItems', () => {
     jest
       .spyOn(useChannelOwnCapabilitiesModule, 'useChannelOwnCapabilities')
       .mockReturnValue(['update-channel-members']);
-    const currentUserChannel = createChannelMock({ userID: 'target-user-id' });
+    const currentUserChannel = createChannelMock({ userId: 'target-user-id' });
 
     const { result } = renderHook(() =>
       useChannelMemberActionItems({ channel: currentUserChannel, member }),

package/src/hooks/actions/useChannelActionItems.tsx

@@ -112,7 +112,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
     t,
     channel,
   } = channelActionItemsParams;
-  const ownUserId = channel.getClient().userID;
+  const ownUserId = channel.getClient().userId;
 
   const actionItems: ChannelActionItem[] = [
     {

package/src/hooks/actions/useChannelActions.ts

@@ -39,7 +39,7 @@ export type ChannelActions = {
 export const getOtherUserInDirectChannel = (channel: Channel) => {
   const members = Object.values(channel.state.members);
   return members.length === 2
-    ? members.find((member) => member.user?.id !== channel.getClient().userID)
+    ? members.find((member) => member.user?.id !== channel.getClient().userId)
     : undefined;
 };
 
@@ -62,7 +62,7 @@ export const useChannelActions = (channel: Channel) => {
   const { client } = useChatContext();
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
-  const ownUserId = client.userID;
+  const ownUserId = client.userId;
 
   const pin = useStableCallback(async (options?: ChannelActionOptions) => {
     try {

package/src/hooks/actions/useChannelMemberActionItems.tsx

@@ -211,7 +211,7 @@ export const useChannelMemberActionItems = ({
 
   const isBlocked = blockedUserIds.includes(member.user?.id ?? '');
 
-  const isCurrentUser = member.user?.id === channel.getClient().userID;
+  const isCurrentUser = member.user?.id === channel.getClient().userId;
 
   const channelMemberActionItemsParams = useMemo<ChannelMemberActionItemsParams>(
     () => ({

package/src/hooks/index.ts

@@ -13,6 +13,7 @@ export * from './useChannelMuteActive';
 export * from './useIsDirectChat';
 export * from './useIsChannelMember';
 export * from './useStreami18n';
+export * from './useTranslatedMessage';
 export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useScreenOrientation';

package/src/hooks/messagePreview/__tests__/useMessageDeliveryStatus.test.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 
 import { act, renderHook } from '@testing-library/react-native';
-import { fromPartial } from '@total-typescript/shoehorn';
-
-import type { Channel, UserResponse } from 'stream-chat';
+import { asTimestampNS } from 'stream-chat';
+import type { Channel, MsgRef } from 'stream-chat';
 
 import { Chat } from '../../../components/Chat/Chat';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
@@ -12,7 +11,16 @@ import { generateUser } from '../../../mock-builders/generator/user';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../useMessageDeliveryStatus';
 
 describe('useMessageDeliveryStatus', () => {
-  const ownMessage = generateMessage({ user: generateUser({ id: 'me' }) });
+  const ownMessage = generateMessage({
+    timestamp: new Date('2026-01-01T10:00:00Z'),
+    user: generateUser({ id: 'me' }),
+  });
+
+  // A cursor `offsetNs` after (or, negative, before) `ownMessage`, on a message of its own.
+  const cursorAt = (offsetNs: number, msgId = `cursor-${offsetNs}`): MsgRef => ({
+    msgId,
+    timestamp: asTimestampNS(ownMessage.created_at + offsetNs),
+  });
 
   const setup = async ({
     isReadEventsEnabled = true,
@@ -32,14 +40,11 @@ describe('useMessageDeliveryStatus', () => {
 
   const setReceipts = (
     channel: Channel,
-    {
-      delivered = {},
-      readers = {},
-    }: { delivered?: Record<string, UserResponse[]>; readers?: Record<string, UserResponse[]> },
+    { delivered = null, read = null }: { delivered?: MsgRef | null; read?: MsgRef | null },
   ) =>
     channel.messageReceiptsTracker.snapshotStore.partialNext({
-      deliveredByMessageId: delivered,
-      readersByMessageId: readers,
+      lastDeliveredRefByOthers: delivered,
+      lastReadRefByOthers: read,
     });
 
   it('returns NOT_SENT_BY_CURRENT_USER when read events are disabled', async () => {
@@ -58,22 +63,55 @@ describe('useMessageDeliveryStatus', () => {
     const { channel, result } = await setup();
     expect(result.current.status).toBe(MessageDeliveryStatus.SENT);
 
-    act(() =>
-      setReceipts(channel, {
-        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
-      }),
-    );
+    act(() => setReceipts(channel, { delivered: cursorAt(0, ownMessage.id) }));
     expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
 
     act(() =>
       setReceipts(channel, {
-        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
-        readers: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
+        delivered: cursorAt(0, ownMessage.id),
+        read: cursorAt(0, ownMessage.id),
       }),
     );
     expect(result.current.status).toBe(MessageDeliveryStatus.READ);
   });
 
+  it('returns READ when another member read past the message', async () => {
+    const { channel, result } = await setup();
+
+    act(() => setReceipts(channel, { delivered: cursorAt(1000), read: cursorAt(1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.READ);
+  });
+
+  it('returns DELIVERED when the message was delivered past it but not read', async () => {
+    const { channel, result } = await setup();
+
+    act(() => setReceipts(channel, { delivered: cursorAt(1000), read: cursorAt(-1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
+  });
+
+  it('returns SENT when every cursor is before the message', async () => {
+    const { channel, result } = await setup();
+
+    act(() => setReceipts(channel, { delivered: cursorAt(-1000), read: cursorAt(-1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.SENT);
+  });
+
+  it('returns READ for a thread reply read past by another member', async () => {
+    const reply = generateMessage({
+      parent_id: 'parent',
+      timestamp: new Date('2026-01-01T10:00:00Z'),
+      user: generateUser({ id: 'me' }),
+    });
+    const { channel, result } = await setup({ lastMessage: reply });
+
+    act(() => setReceipts(channel, { delivered: cursorAt(1000), read: cursorAt(1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.READ);
+  });
+
   // The receipts tracker rebuilds its reader arrays on every snapshot, presence and user updates
   // included, so a preview row must only re-render when the status itself changes.
   it('does not re-render when the receipts change without changing the status', async () => {
@@ -95,24 +133,11 @@ describe('useMessageDeliveryStatus', () => {
       { wrapper },
     );
 
-    act(() =>
-      setReceipts(channel, {
-        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
-      }),
-    );
+    act(() => setReceipts(channel, { delivered: cursorAt(0, ownMessage.id) }));
     expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
     const rendersWhenDelivered = renders;
 
-    act(() =>
-      setReceipts(channel, {
-        delivered: {
-          [ownMessage.id]: [
-            fromPartial<UserResponse>({ id: 'other' }),
-            fromPartial<UserResponse>({ id: 'third' }),
-          ],
-        },
-      }),
-    );
+    act(() => setReceipts(channel, { delivered: cursorAt(1000) }));
     expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
     expect(renders).toBe(rendersWhenDelivered);
   });

package/src/hooks/messagePreview/useMessageDeliveryStatus.ts

@@ -5,7 +5,7 @@ import {
   LocalMessage,
   MessageReceiptsSnapshot,
   MessageResponse,
-  UserResponse,
+  MsgRef,
 } from 'stream-chat';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
@@ -25,13 +25,19 @@ type MessageDeliveryStatusProps = {
   isReadEventsEnabled: boolean;
 };
 
-const hasOtherUser = (users: UserResponse[] | undefined, currentUserId: string | undefined) =>
-  !!users && (users.length > 1 || (users.length === 1 && users[0].id !== currentUserId));
+/** Whether a cursor has reached a message created at `createdAt`, even from a later message. */
+const hasCursorReached = (createdAt: number | undefined, cursor: MsgRef | null) =>
+  !!cursor && typeof createdAt === 'number' && Number.isFinite(createdAt)
+    ? createdAt <= cursor.timestamp
+    : false;
 
 /**
  * Delivery and read status of the last message when it is the current user's, derived from the
  * channel's `messageReceiptsTracker.snapshotStore`, the same store the in-list receipt hooks use.
  *
+ * It compares the message against `lastReadRefByOthers` and `lastDeliveredRefByOthers`, the furthest
+ * points anyone else has reached, so a message stays read once another member reads past it.
+ *
  * @param params.channel The channel the message belongs to.
  * @param params.lastMessage The channel's last message.
  * @param params.isReadEventsEnabled When false, the status is `NOT_SENT_BY_CURRENT_USER`. Defaults
@@ -44,15 +50,15 @@ export const useMessageDeliveryStatus = ({
   isReadEventsEnabled = true,
 }: MessageDeliveryStatusProps) => {
   const { client } = useChatContext();
-  const messageId = lastMessage?.id ?? '';
   const currentUserId = client.user?.id;
+  const createdAt = lastMessage?.created_at;
 
   const selector = useCallback(
     (snapshot: MessageReceiptsSnapshot) => ({
-      isDelivered: hasOtherUser(snapshot.deliveredByMessageId[messageId], currentUserId),
-      isRead: hasOtherUser(snapshot.readersByMessageId[messageId], currentUserId),
+      isDelivered: hasCursorReached(createdAt, snapshot.lastDeliveredRefByOthers),
+      isRead: hasCursorReached(createdAt, snapshot.lastReadRefByOthers),
     }),
-    [currentUserId, messageId],
+    [createdAt],
   );
 
   const { isDelivered, isRead } = useStateStore(

package/src/hooks/useIsDirectChat.ts

@@ -9,7 +9,7 @@ const pickId = (member: ChannelMemberResponse) => ({ id: member.user?.id });
 
 export const useIsDirectChat = (channel?: Channel) => {
   const { client } = useChatContext();
-  const ownUserId = client.userID;
+  const ownUserId = client.userId;
   const members = useChannelMembersState(channel, pickId);
 
   const otherMembers = useMemo(

package/src/i18n/__tests__/catalog.fixture.json

@@ -158,6 +158,7 @@
   "channelPreview.deliveryStatus.read.accessibilityLabel": "Read, sent by you",
   "channelPreview.deliveryStatus.sent.accessibilityLabel": "Sent by you",
   "channelPreview.displayName.others.label": "and {{ count }} others",
+  "channelPreview.doubleTapToOpen.accessibilityLabel": "Double tap to open",
   "channelPreview.lastMessage.accessibilityLabel": "Last message {{date}}",
   "channelPreview.messageFailed.error": "Message failed to send",
   "channelPreview.muted.accessibilityLabel": "Muted",
@@ -208,6 +209,7 @@
   "indicators.loading.error": "Error loading",
   "indicators.loading.messages.error": "Error loading messages for this channel...",
   "indicators.loading.messages.text": "Loading messages...",
+  "indicators.loading.replies.error": "Error loading replies...",
   "message.banUser.label": "Ban User",
   "message.blockUser.label": "Block User",
   "message.blockUserConfirm.label": "Block",

package/src/i18n/keys.ts

@@ -169,6 +169,7 @@ export type TranslationCatalog = {
   'channelPreview.deliveryStatus.read.accessibilityLabel': 'Read, sent by you';
   'channelPreview.deliveryStatus.sent.accessibilityLabel': 'Sent by you';
   'channelPreview.displayName.others.label': 'and {{ count }} others';
+  'channelPreview.doubleTapToOpen.accessibilityLabel': 'Double tap to open';
   'channelPreview.lastMessage.accessibilityLabel': 'Last message {{date}}';
   'channelPreview.messageFailed.error': 'Message failed to send';
   'channelPreview.muted.accessibilityLabel': 'Muted';
@@ -219,6 +220,7 @@ export type TranslationCatalog = {
   'indicators.loading.error': 'Error loading';
   'indicators.loading.messages.error': 'Error loading messages for this channel...';
   'indicators.loading.messages.text': 'Loading messages...';
+  'indicators.loading.replies.error': 'Error loading replies...';
   'message.banUser.label': 'Ban User';
   'message.blockUser.label': 'Block User';
   'message.blockUserConfirm.label': 'Block';
@@ -468,6 +470,7 @@ export type BundledTranslationKey =
   | 'channelPreview.deliveryStatus.delivered.accessibilityLabel'
   | 'channelPreview.deliveryStatus.read.accessibilityLabel'
   | 'channelPreview.deliveryStatus.sent.accessibilityLabel'
+  | 'channelPreview.doubleTapToOpen.accessibilityLabel'
   | 'channelPreview.lastMessage.accessibilityLabel'
   | 'channelPreview.muted.accessibilityLabel'
   | 'channelPreview.pinned.accessibilityLabel'

package/src/i18n/runtimeDefaults.ts

@@ -82,6 +82,7 @@ export const runtimeDefaults = {
   'channelPreview.deliveryStatus.delivered.accessibilityLabel': 'Delivered, sent by you',
   'channelPreview.deliveryStatus.read.accessibilityLabel': 'Read, sent by you',
   'channelPreview.deliveryStatus.sent.accessibilityLabel': 'Sent by you',
+  'channelPreview.doubleTapToOpen.accessibilityLabel': 'Double tap to open',
   'channelPreview.lastMessage.accessibilityLabel': 'Last message {{date}}',
   'channelPreview.muted.accessibilityLabel': 'Muted',
   'channelPreview.pinned.accessibilityLabel': 'Pinned',