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

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

@@ -47,52 +47,58 @@ exports[`Thread should match thread snapshot 1`] = `
               "message": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message6",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "arthur",
                   "image": "https://i.imgur.com/LuuGvh0.png",
                   "name": "Arthur",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
               "nextMessage": undefined,
               "previousMessage": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message5",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "finn",
                   "image": "https://i.imgur.com/spueyAP.png",
                   "name": "Finn",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
             },
@@ -100,76 +106,85 @@ exports[`Thread should match thread snapshot 1`] = `
               "message": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message5",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "finn",
                   "image": "https://i.imgur.com/spueyAP.png",
                   "name": "Finn",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
               "nextMessage": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message6",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "arthur",
                   "image": "https://i.imgur.com/LuuGvh0.png",
                   "name": "Arthur",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
               "previousMessage": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "82a83b16-b611-527c-b3ac-765ef6220490",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message4",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "arthur",
                   "image": "https://i.imgur.com/LuuGvh0.png",
                   "name": "Arthur",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
             },
@@ -177,58 +192,63 @@ exports[`Thread should match thread snapshot 1`] = `
               "message": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "82a83b16-b611-527c-b3ac-765ef6220490",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message4",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "arthur",
                   "image": "https://i.imgur.com/LuuGvh0.png",
                   "name": "Arthur",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
               "nextMessage": {
                 "attachments": [],
                 "cid": "messaging:test-channel",
-                "created_at": 2020-05-05T14:50:00.000Z,
-                "deleted_at": null,
+                "created_at": 1588690200000000000,
+                "deleted_at": undefined,
+                "error": undefined,
                 "html": "<p>regular</p>",
                 "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
-                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "message_text_updated_at": 1588690200000000000,
                 "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-                "pinned_at": null,
+                "pinned_at": undefined,
+                "quoted_message": undefined,
+                "reaction_groups": undefined,
                 "status": "received",
                 "text": "Message5",
                 "type": "regular",
-                "updated_at": 2020-05-05T14:50:00.000Z,
+                "updated_at": 1588690200000000000,
                 "user": {
                   "banned": false,
-                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "created_at": 1587994789331000000,
                   "id": "finn",
                   "image": "https://i.imgur.com/spueyAP.png",
                   "name": "Finn",
                   "online": false,
                   "role": "user",
-                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                  "updated_at": 1587994789332000000,
                 },
               },
               "previousMessage": undefined,
             },
           ]
         }
-        extraData={false}
         getItem={[Function]}
         getItemCount={[Function]}
         invertStickyHeaders={true}
@@ -336,6 +356,7 @@ exports[`Thread should match thread snapshot 1`] = `
                       {},
                     ],
                     {
+                      "marginBottom": 12,
                       "paddingHorizontal": 16,
                       "paddingVertical": 8,
                     },
@@ -1368,7 +1389,6 @@ exports[`Thread should match thread snapshot 1`] = `
                   [
                     undefined,
                     {
-                      "marginBottom": 12,
                       "paddingHorizontal": 16,
                       "paddingVertical": 8,
                     },
@@ -1699,7 +1719,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     }
                   }
                 >
-                   Replies
+                  3 Replies
                 </Text>
               </View>
             </View>

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

@@ -13,19 +13,24 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { useStateStore } from '../../../hooks';
 import { primitives } from '../../../theme';
 
-type ThreadFooterComponentPropsWithContext = Pick<
-  ThreadContextValue,
-  'parentMessagePreventPress' | 'thread' | 'threadInstance'
->;
+type ThreadFooterComponentPropsWithContext = Pick<ThreadContextValue, 'thread'> & {
+  /**
+   * Boolean to enable/disable parent message press. Defaults to `true`.
+   */
+  parentMessagePreventPress?: boolean;
+};
+
+const loadingSelector = (state: { isLoading: boolean }) => ({ isLoading: state.isLoading });
 
 export const InlineLoadingMoreThreadIndicator = () => {
-  const { threadLoadingMore } = useThreadContext();
+  const { thread } = useThreadContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
+  const { isLoading } = useStateStore(thread?.messagePaginator?.state, loadingSelector) ?? {};
 
-  if (!threadLoadingMore) {
+  if (!isLoading) {
     return null;
   }
 
@@ -38,19 +43,23 @@ export const InlineLoadingMoreThreadIndicator = () => {
 
 const selector = (nextValue: ThreadState) =>
   ({
+    parentMessage: nextValue.parentMessage,
     replyCount: nextValue.replyCount,
   }) as const;
 
 const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithContext) => {
-  const { parentMessagePreventPress, thread, threadInstance } = props;
+  const { parentMessagePreventPress = true, thread } = props;
   const { Message } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const styles = useStyles();
 
-  const { replyCount = thread?.reply_count } = useStateStore(threadInstance?.state, selector) ?? {};
+  // The parent message is read reactively from the thread instance so the header updates live when
+  // it is edited / reacted to / its reply_count changes.
+  const { parentMessage, replyCount = parentMessage?.reply_count } =
+    useStateStore(thread?.state, selector) ?? {};
 
-  if (!thread) {
+  if (!parentMessage) {
     return null;
   }
 
@@ -58,16 +67,15 @@ const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithC
     <View style={styles.threadHeaderContainer} testID='thread-footer-component'>
       <Message
         groupStyles={['single']}
-        message={thread}
+        message={parentMessage}
         preventPress={parentMessagePreventPress}
-        readBy={0}
-        threadList
+        showMessageStatus={false}
       />
       <View style={styles.newThread}>
         <Text style={styles.text}>
           {replyCount === 1
-            ? t('1 Reply')
-            : t('{{ replyCount }} Replies', {
+            ? t('message.replies.one.label', '1 Reply')
+            : t('message.replies.many.label', '{{ replyCount }} Replies', {
                 replyCount,
               })}
         </Text>
@@ -81,49 +89,17 @@ const areEqual = (
   prevProps: ThreadFooterComponentPropsWithContext,
   nextProps: ThreadFooterComponentPropsWithContext,
 ) => {
-  const {
-    parentMessagePreventPress: prevParentMessagePreventPress,
-    thread: prevThread,
-    threadInstance: prevThreadInstance,
-  } = prevProps;
-  const {
-    parentMessagePreventPress: nextParentMessagePreventPress,
-    thread: nextThread,
-    threadInstance: nextThreadInstance,
-  } = nextProps;
-
-  if (prevParentMessagePreventPress !== nextParentMessagePreventPress) {
-    return false;
-  }
+  // The parent message + reply count are read reactively from `thread.state` inside the
+  // component (via useStateStore), so this memo only needs to gate parent-driven re-renders on the
+  // remaining props: the prevent-press flag and the thread instance identity.
+  const { parentMessagePreventPress: prevParentMessagePreventPress, thread: prevThread } =
+    prevProps;
+  const { parentMessagePreventPress: nextParentMessagePreventPress, thread: nextThread } =
+    nextProps;
 
-  const threadEqual =
-    prevThread?.id === nextThread?.id &&
-    prevThread?.text === nextThread?.text &&
-    prevThread?.reply_count === nextThread?.reply_count;
-
-  if (!threadEqual) {
-    return false;
-  }
-
-  if (prevThreadInstance !== nextThreadInstance) {
-    return false;
-  }
-
-  const latestReactionsEqual =
-    prevThread &&
-    nextThread &&
-    Array.isArray(prevThread.latest_reactions) &&
-    Array.isArray(nextThread.latest_reactions)
-      ? prevThread.latest_reactions.length === nextThread.latest_reactions.length &&
-        prevThread.latest_reactions.every(
-          ({ type }, index) => type === nextThread.latest_reactions?.[index].type,
-        )
-      : prevThread?.latest_reactions === nextThread?.latest_reactions;
-  if (!latestReactionsEqual) {
-    return false;
-  }
-
-  return true;
+  return (
+    prevParentMessagePreventPress === nextParentMessagePreventPress && prevThread === nextThread
+  );
 };
 
 const MemoizedThreadFooter = React.memo(
@@ -132,24 +108,13 @@ const MemoizedThreadFooter = React.memo(
 ) as typeof ThreadFooterComponentWithContext;
 
 export type ThreadFooterComponentProps = Partial<
-  Pick<ThreadContextValue, 'parentMessagePreventPress' | 'thread'>
+  Pick<ThreadFooterComponentPropsWithContext, 'parentMessagePreventPress'>
 >;
 
 export const ThreadFooterComponent = (props: ThreadFooterComponentProps) => {
-  const { parentMessagePreventPress, thread, threadInstance, threadLoadingMore } =
-    useThreadContext();
+  const { thread } = useThreadContext();
 
-  return (
-    <MemoizedThreadFooter
-      {...{
-        parentMessagePreventPress,
-        thread,
-        threadInstance,
-        threadLoadingMore,
-      }}
-      {...props}
-    />
-  );
+  return <MemoizedThreadFooter thread={thread} {...props} />;
 };
 
 const useStyles = () => {

package/src/components/ThreadList/ThreadList.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 
-import { Thread, ThreadManagerState } from 'stream-chat';
+import type { PaginatorState, Thread } from 'stream-chat';
 
 import { ThreadListItem } from './ThreadListItem';
 import { ThreadListItemSkeleton } from './ThreadListItemSkeleton';
@@ -21,12 +21,10 @@ import { EmptyStateIndicator } from '../Indicators/EmptyStateIndicator';
 import { LoadingIndicator } from '../Indicators/LoadingIndicator';
 import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
-const selector = (nextValue: ThreadManagerState) =>
-  ({
-    isLoading: nextValue.pagination.isLoading,
-    isLoadingNext: nextValue.pagination.isLoadingNext,
-    threads: nextValue.threads,
-  }) as const;
+const NO_THREADS: Thread[] = [];
+
+const paginatorSelector = ({ isLoading, items }: PaginatorState<Thread>) =>
+  ({ isLoading, threads: items ?? NO_THREADS }) as const;
 
 export type ThreadListProps = Pick<
   ThreadsContextValue,
@@ -102,26 +100,22 @@ export const ThreadList = (props: ThreadListProps) => {
     if (!client) {
       return;
     }
-
-    const listener = client.on('connection.recovered', () => {
-      client.threads.reload({ force: true });
-    });
-
-    return () => {
-      client.threads.deactivate();
-      listener.unsubscribe();
-    };
+    return () => client.threads.deactivate();
   }, [client]);
 
-  const { isLoading, isLoadingNext, threads } = useStateStore(client.threads.state, selector);
+  const { isLoading, threads } = useStateStore(client.threads.paginator.state, paginatorSelector);
+  // A no-op until the first page has landed, at the end of the list, and while a page is loading.
+  const loadMore = useCallback(async () => {
+    await client.threads.paginator.toTail();
+  }, [client]);
 
   return (
     <NotificationTargetProvider hostId={notificationHostId} panel='thread-list'>
       <ThreadsProvider
         value={{
-          isLoading,
-          isLoadingNext,
-          loadMore: client.threads.loadNextPage,
+          isLoading: isLoading && !threads.length,
+          isLoadingNext: isLoading && threads.length > 0,
+          loadMore,
           threads,
           ...props,
         }}

package/src/components/ThreadList/ThreadListItem.tsx

@@ -3,8 +3,10 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import {
   AttachmentManagerState,
+  convertTimestampToDate,
   DraftMessage,
   LocalMessage,
+  MessagePaginatorAggregateState,
   TextComposerState,
   Thread,
   ThreadState,
@@ -18,8 +20,8 @@ import {
 } from '../../contexts/threadsContext/ThreadListItemContext';
 import { useThreadsContext } from '../../contexts/threadsContext/ThreadsContext';
 import { useStateStore } from '../../hooks';
+import { getDateString } from '../../i18n/utils';
 import { primitives } from '../../theme';
-import { getDateString } from '../../utils/i18n/getDateString';
 import { useChannelPreviewDisplayPresence } from '../ChannelPreview/hooks';
 import { useChannelPreviewDisplayName } from '../ChannelPreview/hooks/useChannelPreviewDisplayName';
 import { BadgeNotification, UserAvatarStack } from '../ui';
@@ -46,6 +48,11 @@ const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
   attachments: state.attachments,
 });
 
+// The newest reply, also when the loaded page of replies is not the newest one.
+const lastReplySelector = (state: MessagePaginatorAggregateState) => ({
+  lastReply: state.lastMessage ?? undefined,
+});
+
 export const ThreadListItemComponent = () => {
   const {
     channel,
@@ -75,10 +82,7 @@ export const ThreadListItemComponent = () => {
       <Pressable
         onPress={() => {
           if (onThreadSelect) {
-            onThreadSelect(
-              { thread: parentMessage as LocalMessage, threadInstance: thread },
-              channel,
-            );
+            onThreadSelect(thread);
           }
         }}
         style={({ pressed }) => [
@@ -115,8 +119,8 @@ export const ThreadListItemComponent = () => {
             />
             <Text style={styles.messageRepliesText}>
               {parentMessage?.reply_count === 1
-                ? t('1 Reply')
-                : t('{{ replyCount }} Replies', {
+                ? t('message.replies.one.label', '1 Reply')
+                : t('message.replies.many.label', '{{ replyCount }} Replies', {
                     replyCount: parentMessage?.reply_count,
                   })}
             </Text>
@@ -137,7 +141,7 @@ export const ThreadListItemComponent = () => {
 export const ThreadListItem = (props: ThreadListItemProps) => {
   const { client } = useChatContext();
   const { t, tDateTimeParser } = useTranslationContext();
-  const { thread, timestampTranslationKey = 'timestamp/ThreadListItem' } = props;
+  const { thread, timestampTranslationKey = 'timestamp.ThreadListItem' } = props;
   const { ThreadListItem: ThreadListItemOverride } = useComponentsContext();
   const { text: draftText } = useStateStore(
     thread.messageComposer.textComposer.state,
@@ -153,7 +157,6 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
       ({
         channel: nextValue.channel,
         deletedAt: nextValue.deletedAt,
-        lastReply: nextValue.replies.at(-1),
         ownUnreadMessageCount:
           (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
         parentMessage: nextValue.parentMessage,
@@ -161,11 +164,13 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
     [client],
   );
 
-  const { channel, deletedAt, lastReply, ownUnreadMessageCount, parentMessage } = useStateStore(
+  const { channel, deletedAt, ownUnreadMessageCount, parentMessage } = useStateStore(
     thread.state,
     selector,
   );
 
+  const { lastReply } = useStateStore(thread.messagePaginator.aggregateState, lastReplySelector);
+
   const timestamp = lastReply?.created_at;
 
   useEffect(() => {
@@ -184,6 +189,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
 
     return {
       attachments,
+      custom: {},
       id: thread.messageComposer.id,
       text: draftText ?? '',
     };
@@ -193,7 +199,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
   const dateString = useMemo(
     () =>
       getDateString({
-        date: timestamp,
+        messageCreatedAt: convertTimestampToDate(timestamp),
         t,
         tDateTimeParser,
         timestampTranslationKey,
@@ -203,7 +209,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
   const deletedAtDateString = useMemo(
     () =>
       getDateString({
-        date: deletedAt as Date | undefined,
+        messageCreatedAt: convertTimestampToDate(deletedAt),
         t,
         tDateTimeParser,
         timestampTranslationKey,
@@ -215,8 +221,9 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
     <ThreadListItemProvider
       value={{
         channel,
-        dateString,
-        deletedAtDateString,
+        // `getDateString` returns `null` for "nothing renderable"; the context takes `undefined`.
+        dateString: dateString ?? undefined,
+        deletedAtDateString: deletedAtDateString ?? undefined,
         draftMessage,
         lastReply,
         ownUnreadMessageCount,

package/src/components/ThreadList/ThreadListItemMessagePreview.tsx

@@ -27,7 +27,7 @@ export const ThreadListItemMessagePreview = ({ message }: ThreadListItemMessageP
 
   return (
     <View style={[styles.container]}>
-      {isDraft ? <Text style={styles.draftText}>{t('Draft')}:</Text> : null}
+      {isDraft ? <Text style={styles.draftText}>{t('common.draft.label', 'Draft')}:</Text> : null}
       {MessagePreviewIcon ? (
         <MessagePreviewIcon height={20} stroke={semantics.textPrimary} width={20} />
       ) : null}