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

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -1,212 +1,117 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import {
-  ChannelFilters,
-  ChannelManager,
-  ChannelManagerState,
-  ChannelOptions,
-  ChannelSort,
-} from 'stream-chat';
+import type { ChannelPaginator, ChannelPaginatorState } from 'stream-chat';
 
-import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useStateStore } from '../../../hooks';
-import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
-
-type Parameters = {
-  channelManager: ChannelManager;
-  enableOfflineSupport: boolean;
-  filters: ChannelFilters;
-  options: ChannelOptions;
-  setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
-  sort: ChannelSort;
-};
+import { useStableCallback } from '../../../hooks/useStableCallback';
+import { useClientUserId } from '../../Chat/hooks/useClientUserId';
 
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
-
-export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
+type QueryType = 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
 
-const selector = (nextValue: ChannelManagerState) =>
+const selector = (nextValue: ChannelPaginatorState) =>
   ({
-    channelListInitialized: nextValue.initialized,
-    channels: nextValue.channels,
-    error: nextValue.error,
-    pagination: nextValue.pagination,
+    channels: nextValue.items,
+    hasNextPage: nextValue.hasMoreTail,
+    isLoading: nextValue.isLoading,
+    lastQueryError: nextValue.lastQueryError,
   }) as const;
 
-export const usePaginatedChannels = ({
-  channelManager,
-  enableOfflineSupport,
-  filters = {},
-  options = {},
-  sort = {},
-}: Parameters) => {
-  const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
-  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>('queryLocalDB');
-  const activeChannels = useActiveChannelsRefContext();
-  const isMountedRef = useIsMountedRef();
+export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>(null);
   const { client } = useChatContext();
-  const { channelListInitialized, channels, pagination, error } =
-    useStateStore(channelManager?.state, selector) ?? {};
-  const hasNextPage = pagination?.hasNext;
-
-  const filtersRef = useRef<typeof filters | null>(null);
-  const optionsRef = useRef<typeof options | null>(null);
-  const sortRef = useRef<typeof sort | null>(null);
-  const activeRequestId = useRef<number>(0);
-  const isQueryingRef = useRef(false);
+
+  const { channels, hasNextPage, isLoading, lastQueryError } =
+    useStateStore(paginator.state, selector) ?? {};
+
+  const channelListInitialized = channels !== undefined;
+  const error = lastQueryError;
+
+  const isMountedRef = useRef(true);
   const lastRefresh = useRef(Date.now());
 
-  const queryChannels: QueryChannels = async (
-    queryType: QueryType = 'loadChannels',
-  ): Promise<void> => {
-    if (!client || !isMountedRef.current) {
-      return;
-    }
-
-    const hasUpdatedData =
-      queryType === 'loadChannels' ||
-      queryType === 'refresh' ||
-      queryType === 'backgroundRefresh' ||
-      JSON.stringify(filtersRef.current) !== JSON.stringify(filters) ||
-      JSON.stringify(optionsRef.current) !== JSON.stringify(options) ||
-      JSON.stringify(sortRef.current) !== JSON.stringify(sort);
-
-    const isQueryStale = () => !isMountedRef || activeRequestId.current !== currentRequestId;
-
-    /**
-     * We don't need to make another call to query channels if we don't
-     * have new data for the query to include
-     * */
-    if (!hasUpdatedData) {
-      if (activeQueryType === null) {
-        return;
-      }
-    }
-
-    filtersRef.current = filters;
-    optionsRef.current = options;
-    sortRef.current = sort;
-    isQueryingRef.current = true;
-    activeRequestId.current++;
-    const currentRequestId = activeRequestId.current;
-    setActiveQueryType(queryType);
-
-    const newOptions = {
-      offset: 0,
-      ...options,
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
     };
+  }, []);
 
-    try {
-      if (isQueryStale() || !isMountedRef.current) {
+  const queryChannels = useStableCallback(
+    async (queryType: QueryType = 'loadChannels'): Promise<void> => {
+      if (!client || !isMountedRef.current) {
         return;
       }
-      /**
-       * We skipInitialization here for handling race condition between ChannelList, Channel (and Thread)
-       * when they all (may) update the channel state at the same time (when connection state recovers)
-       * TODO: if we move the channel state to a single context and share it between ChannelList, Channel and Thread we can remove this
-       */
-      if (queryType === 'loadChannels') {
-        await channelManager.loadNext();
-      } else {
-        await channelManager.queryChannels(filters, sort, newOptions, {
-          skipInitialization: enableOfflineSupport ? undefined : activeChannels.current,
-        });
-      }
 
-      setStaticChannelsActive(false);
-      isQueryingRef.current = false;
-    } catch (err: unknown) {
-      isQueryingRef.current = false;
+      setActiveQueryType(queryType);
+
+      try {
+        if (queryType === 'loadChannels') {
+          // Next page — append toward the tail, keeping the current list.
+          await paginator.toTail();
+        } else if (queryType === 'reload') {
+          // First page from scratch (blanks to the skeleton).
+          await paginator.reload();
+        } else {
+          await paginator.toTail({ keepPreviousItems: true, reset: 'yes' });
+        }
+      } catch (err: unknown) {
+        console.warn(err);
+      }
 
-      if (isQueryStale()) {
+      if (isMountedRef.current) {
+        setActiveQueryType(null);
+      }
+    },
+  );
+
+  const refreshList = useStableCallback(
+    async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
+      const now = Date.now();
+      // Only allow pull-to-refresh 5 seconds after the last successful refresh. This throttle is now
+      // purely about the user pulling repeatedly: reconnect refreshes no longer come through here at
+      // all — `client.connectionRecovery` owns them and re-runs each list's own query directly on the
+      // paginator, so they can never be swallowed by this window.
+      if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
         return;
       }
 
-      console.warn(err);
-    }
+      lastRefresh.current = Date.now();
+      await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
+    },
+  );
 
-    setActiveQueryType(null);
-  };
+  const reloadList = useStableCallback(() => queryChannels('reload'));
 
-  const refreshList = async ({
-    force = false,
-    isBackground = false,
-  }: { force?: boolean; isBackground?: boolean } = {}) => {
-    const now = Date.now();
-    // Only allow pull-to-refresh 5 seconds after last successful refresh, unless the request
-    // is invoked with force: true.
-    if (!force && now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
-      return;
-    }
-
-    lastRefresh.current = Date.now();
-    await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
-  };
+  const refreshListWithDefaults = useStableCallback(() => refreshList());
 
-  const reloadList = async () => {
-    await queryChannels('reload');
-  };
-
-  /**
-   * Equality check using stringified filters/options/sort ensure that we don't make un-necessary queryChannels api calls
-   * for the scenario:
-   *
-   * <ChannelList
-   *    filters={{
-   *      members: { $in: ['vishal'] }
-   *    }}
-   *    ...
-   * />
-   *
-   * Here we have passed filters as inline object, which means on every re-render of
-   * parent component, ChannelList will receive new object reference (even though value is same), which
-   * in return will trigger useEffect. To avoid this, we can add a value check.
-   */
-  const filterStr = useMemo(() => JSON.stringify(filters), [filters]);
-  const optionsStr = useMemo(() => JSON.stringify(options), [options]);
-  const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
+  const loadNextPage = useStableCallback(async () => {
+    if (!paginator.isInitialized) return;
+    await queryChannels('loadChannels');
+  });
 
+  // Load the first page whenever the paginator has none: on the first mount, after the app swaps in a
+  // new paginator, and after `client.disconnectUser` resets it. A paginator that already has channels
+  // is shown as is, and a load already in flight is left alone.
+  const userId = useClientUserId(client);
+  const isUnloaded = channels === undefined;
   useEffect(() => {
-    const listener: ReturnType<typeof client.on> = client.on(
-      'connection.changed',
-      async (event) => {
-        if (event.online) {
-          // Reconnection refreshes stay silent but must NOT be throttled by the
-          // pull-to-refresh debounce. This is the query that rewatches the
-          // channels on the fresh socket.
-          await refreshList({ force: true, isBackground: true });
-        }
-      },
-    );
+    if (!isUnloaded || !userId || paginator.isLoading) return;
     reloadList();
-
-    return () => listener?.unsubscribe?.();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterStr, optionsStr, sortStr, channelManager]);
+  }, [isUnloaded, paginator, reloadList, userId]);
 
   return {
     channelListInitialized,
     channels,
     error,
     hasNextPage,
-    loadingChannels:
-      activeQueryType === 'queryLocalDB'
-        ? true
-        : // Although channels.length === 0 should come as a given when we have !channelListInitialized,
-          // due to the way offline storage works currently we have to do this additional
-          // check to make sure channels were not populated before the reactive list becomes
-          // ready. I do not like providing a way to set the ready state, as it should be managed
-          // in the LLC entirely. Once we move offline support to the LLC, we can remove this check
-          // too as it'll be redundant.
-          pagination?.isLoading || (!channelListInitialized && channels.length === 0 && !error),
-    loadingNextPage: pagination?.isLoadingNext,
-    loadNextPage: channelManager.loadNext,
+    loadingChannels: channels === undefined && !error,
+    loadingNextPage: activeQueryType === 'loadChannels' && !!isLoading,
+    loadNextPage,
     refreshing: activeQueryType === 'refresh',
-    refreshList: () => refreshList(),
+    refreshList: refreshListWithDefaults,
     reloadList,
-    staticChannelsActive,
   };
 };

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -10,6 +10,7 @@ import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
 
 import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
@@ -34,20 +35,31 @@ export type ChannelDetailsBottomSheetProps = {
 
 export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) => {
   const styles = useStyles();
+  const { client } = useChatContext();
   const { t } = useTranslationContext();
   const members = useChannelMembersState(channel);
   const memberCount = useMemo(() => Object.keys(members).length, [members]);
   const onlineCount = useChannelOnlineMemberCount(channel);
   const isDirectChat = useIsDirectChat(channel);
+  // The watcher count includes the current user, so a DM reads the other member's presence.
+  const isOtherMemberOnline = useMemo(
+    () =>
+      Object.values(members).some(
+        (member) => member.user?.id !== client.userID && member.user?.online,
+      ),
+    [client, members],
+  );
   const muted = useChannelMuteActive(channel);
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(
     () =>
-      t('{{memberCount}} members, {{onlineCount}} online', {
+      t('channelDetails.presence.membersOnline.label', {
         count: memberCount,
         memberCount: displayedMemberCount,
         onlineCount: displayedOnlineCount,
+        defaultValue_one: '{{memberCount}} member, {{onlineCount}} online',
+        defaultValue_other: '{{memberCount}} members, {{onlineCount}} online',
       }),
     [displayedMemberCount, displayedOnlineCount, memberCount, t],
   );
@@ -61,7 +73,11 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
           {muted ? <ChannelPreviewMutedStatus /> : null}
         </View>
         <Text style={styles.headerMeta}>
-          {isDirectChat ? (onlineCount === 1 ? t('Online') : t('Offline')) : membersAndOnlineLabel}
+          {isDirectChat
+            ? isOtherMemberOnline
+              ? t('common.presence.online.label', 'Online')
+              : t('common.presence.offline.label', 'Offline')
+            : membersAndOnlineLabel}
         </Text>
       </View>
     </View>

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { LocalMessage, MessageResponse } from 'stream-chat';
+import { ChannelConfig, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 
@@ -11,10 +11,18 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
+import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
+/**
+ * Module scope so the reference stays stable — an inline selector re-subscribes on every render.
+ */
+const readEventsSelector = ({ readEvents }: ChannelConfig) => ({
+  readEventsEnabled: readEvents.enabled,
+});
+
 export type ChannelMessagePreviewDeliveryStatusProps = Pick<ChannelPreviewProps, 'channel'> & {
   message: MessageResponse | LocalMessage;
 };
@@ -26,7 +34,11 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   const { client } = useChatContext();
   const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
-  const channelConfigExists = typeof channel?.getConfig === 'function';
+  // `configState` is absent on the partial channel mocks some tests pass in; a real channel always
+  // has one. Resolved configuration, so `read_events` is already ANDed with anything registered
+  // through `client.config.set({ channel: { readEvents } })`.
+  const configState = channel?.configState;
+  const { readEventsEnabled } = useStateStore(configState, readEventsSelector) ?? {};
   const styles = useStyles();
   const {
     theme: {
@@ -48,35 +60,43 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }, [message, client.user?.id]);
 
   const readEvents = useMemo(() => {
-    if (!channelConfigExists) {
+    if (!configState) {
       return true;
     }
-    const read_events = !channel.disconnected && !!channel?.id && channel.getConfig()?.read_events;
+    const read_events = !channel.pendingDisposal && !!channel?.id && readEventsEnabled;
     if (typeof read_events !== 'boolean') {
       return true;
     }
     return read_events;
-  }, [channelConfigExists, channel]);
+  }, [configState, readEventsEnabled, channel]);
+
+  // `status` only exists on optimistic/local messages (`LocalMessage`); a delivered
+  // `MessageResponse` won't carry it. Read it through a guard instead of asserting the shape.
+  const messageStatus = 'status' in message ? message.status : undefined;
 
   const { status } = useMessageDeliveryStatus({
     channel,
-    lastMessage: message as LocalMessage,
+    lastMessage: message,
     isReadEventsEnabled: readEvents,
   });
 
   const statusLabel = useA11yLabel(
-    message.status === MessageStatusTypes.SENDING
-      ? 'a11y/Sending'
-      : message.status === MessageStatusTypes.RECEIVED && status === MessageDeliveryStatus.READ
-        ? 'a11y/Read, sent by you'
+    messageStatus === MessageStatusTypes.SENDING
+      ? 'message.status.sending.accessibilityLabel'
+      : messageStatus === MessageStatusTypes.RECEIVED && status === MessageDeliveryStatus.READ
+        ? 'channelPreview.deliveryStatus.read.accessibilityLabel'
         : status === MessageDeliveryStatus.DELIVERED
-          ? 'a11y/Delivered, sent by you'
+          ? 'channelPreview.deliveryStatus.delivered.accessibilityLabel'
           : status === MessageDeliveryStatus.SENT
-            ? 'a11y/Sent by you'
-            : 'a11y/Sending',
+            ? 'channelPreview.deliveryStatus.sent.accessibilityLabel'
+            : 'message.status.sending.accessibilityLabel',
   );
 
-  if (!channel.data?.name && membersWithoutSelf.length === 1 && !isLastMessageByCurrentUser) {
+  if (
+    !channel.data?.custom?.name &&
+    membersWithoutSelf.length === 1 &&
+    !isLastMessageByCurrentUser
+  ) {
     return null;
   }
 
@@ -87,9 +107,9 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   return (
     <CompositeAccessibilityProbe label={statusLabel}>
       <View style={styles.container}>
-        {message.status === MessageStatusTypes.SENDING ? (
+        {messageStatus === MessageStatusTypes.SENDING ? (
           <icons.Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
-        ) : message.status === MessageStatusTypes.RECEIVED &&
+        ) : messageStatus === MessageStatusTypes.RECEIVED &&
           status === MessageDeliveryStatus.READ ? (
           <icons.CheckAll
             stroke={semantics.accentPrimary}
@@ -107,7 +127,7 @@ export const ChannelMessagePreviewDeliveryStatus = ({
         ) : status === MessageDeliveryStatus.SENT ? (
           <icons.Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
         ) : null}
-        <Text style={styles.text}>{t('You')}:</Text>
+        <Text style={styles.text}>{t('common.you.label', 'You')}:</Text>
       </View>
     </CompositeAccessibilityProbe>
   );

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -5,24 +5,20 @@ import type { Channel } from 'stream-chat';
 import { ChannelSwipableWrapper } from './ChannelSwipableWrapper';
 import { useChannelPreviewData } from './hooks/useChannelPreviewData';
 
-import {
-  ChannelsContextValue,
-  useChannelsContext,
-} from '../../contexts/channelsContext/ChannelsContext';
+import { useChannelsContext } from '../../contexts/channelsContext/ChannelsContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTranslatedMessage } from '../../hooks/useTranslatedMessage';
 
-export type ChannelPreviewProps = Partial<Pick<ChatContextValue, 'client'>> &
-  Partial<Pick<ChannelsContextValue, 'forceUpdate'>> & {
-    /**
-     * Instance of Channel from stream-chat package.
-     */
-    channel: Channel;
-  };
+export type ChannelPreviewProps = Partial<Pick<ChatContextValue, 'client'>> & {
+  /**
+   * Instance of Channel from stream-chat package.
+   */
+  channel: Channel;
+};
 
 export const ChannelPreview = (props: ChannelPreviewProps) => {
-  const { channel, client: propClient, forceUpdate: propForceUpdate } = props;
+  const { channel, client: propClient } = props;
 
   const { client: contextClient } = useChatContext();
   const { getChannelActionItems, swipeActionsEnabled } = useChannelsContext();
@@ -30,11 +26,7 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
 
   const client = propClient || contextClient;
 
-  const { muted, pinned, unread, lastMessage } = useChannelPreviewData(
-    channel,
-    client,
-    propForceUpdate,
-  );
+  const { muted, pinned, unread, lastMessage } = useChannelPreviewData(channel, client);
 
   const translatedLastMessage = useTranslatedMessage(lastMessage);
 

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -51,8 +51,11 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     );
   }, [channel.state.members, client.user?.id]);
 
+  // `status` only exists on optimistic/local messages (`LocalMessage`), so read it via a
+  // guard rather than asserting `lastMessage` (a `LocalMessage | MessageResponse`) is local.
+  const lastMessageStatus = lastMessage && 'status' in lastMessage ? lastMessage.status : undefined;
   const isFailedMessage =
-    lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
+    lastMessageStatus === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
   const showMessageDeliveryStatus = !isMessageDeleted;
 
   if (usersTyping.length > 0) {
@@ -62,7 +65,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (draftMessage) {
     return (
       <View style={styles.container}>
-        <Text style={styles.draftText}>{t('Draft')}:</Text>
+        <Text style={styles.draftText}>{t('common.draft.label', 'Draft')}:</Text>
         <ChannelPreviewLastMessage message={draftMessage} />
       </View>
     );
@@ -72,7 +75,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (!lastMessage) {
     return (
       <Text style={[styles.subtitle, { color: semantics.textTertiary }]}>
-        {t('No messages yet')}
+        {t('channelPreview.noMessages.text', 'No messages yet')}
       </Text>
     );
   }
@@ -92,12 +95,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         <ErrorBadge size='xs' />
-        <Text style={styles.errorText}>{t('Message failed to send')}</Text>
+        <Text style={styles.errorText}>
+          {t('channelPreview.messageFailed.error', 'Message failed to send')}
+        </Text>
       </View>
     );
   }
 
-  if (channel.data?.name || membersWithoutSelf.length > 1) {
+  if (channel.data?.custom?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
         {showMessageDeliveryStatus ? (

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -16,7 +16,7 @@ export const ChannelPreviewMutedStatus = () => {
     },
   } = useTheme();
   const { icons } = useComponentsContext();
-  const accessibilityLabel = useA11yLabel('a11y/Muted');
+  const accessibilityLabel = useA11yLabel('channelPreview.muted.accessibilityLabel');
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>

package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx

@@ -16,7 +16,7 @@ export const ChannelPreviewPinnedStatus = () => {
     },
   } = useTheme();
   const { icons } = useComponentsContext();
-  const accessibilityLabel = useA11yLabel('a11y/Pinned');
+  const accessibilityLabel = useA11yLabel('channelPreview.pinned.accessibilityLabel');
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
+import { convertTimestampToDate } from 'stream-chat';
+
 import type { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewViewPropsWithContext } from './ChannelPreviewView';
 
@@ -8,8 +10,8 @@ import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
+import { getCalendarDateStringForA11y, getDateString } from '../../i18n/utils';
 import { primitives } from '../../theme';
-import { getDateString, getDateStringForA11y } from '../../utils/i18n/getDateString';
 
 export type ChannelPreviewStatusProps = Pick<
   ChannelPreviewViewPropsWithContext,
@@ -23,24 +25,24 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
   const styles = useStyles();
 
   const created_at = lastMessage?.created_at;
-  const latestMessageDate = created_at ? new Date(created_at) : new Date();
+  const latestMessageDate = convertTimestampToDate(created_at);
 
   const formattedDate = useMemo(
     () =>
       getDateString({
-        date: created_at,
+        messageCreatedAt: convertTimestampToDate(created_at),
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/ChannelPreviewStatus',
+        timestampTranslationKey: 'timestamp.ChannelPreviewStatus',
       }),
     [created_at, t, tDateTimeParser],
   );
 
   const a11yDate = useMemo(
     () =>
-      getDateStringForA11y({
+      getCalendarDateStringForA11y({
         calendarFormatOverrides: { sameDay: 'LT' },
-        date: created_at,
+        messageCreatedAt: convertTimestampToDate(created_at),
         tDateTimeParser,
         userLanguage,
       }),
@@ -55,7 +57,10 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
     () => ({ date: a11yDate ?? visibleDate ?? '' }),
     [a11yDate, visibleDate],
   );
-  const accessibilityLabel = useA11yLabel('a11y/Last message {{date}}', labelParams);
+  const accessibilityLabel = useA11yLabel(
+    'channelPreview.lastMessage.accessibilityLabel',
+    labelParams,
+  );
 
   return (
     <Text accessibilityLabel={accessibilityLabel} style={styles.date}>