diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -130,8 +130,80 @@
const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo);
- return (
- <>
+ const unreadDot = React.useMemo(
+ () => (
+
+
+
+ ),
+ [data.threadInfo.currentUser.unread, styles.avatarContainer],
+ );
+
+ const threadAvatar = React.useMemo(
+ () => (
+
+
+
+ ),
+ [data.threadInfo, styles.avatarContainer],
+ );
+
+ const threadDetails = React.useMemo(
+ () => (
+
+
+
+
+ {resolvedThreadInfo.uiName}
+
+
+
+ {lastMessage}
+ {lastActivity}
+
+
+ ),
+ [
+ data.threadInfo,
+ lastActivity,
+ lastActivityStyle,
+ lastMessage,
+ resolvedThreadInfo.uiName,
+ styles.row,
+ styles.threadDetails,
+ threadNameStyle,
+ ],
+ );
+
+ const swipeableThreadContent = React.useMemo(
+ () => (
+
+ ),
+ [
+ colors.listIosHighlightUnderlay,
+ onPress,
+ styles.container,
+ styles.content,
+ threadAvatar,
+ threadDetails,
+ unreadDot,
+ ],
+ );
+
+ const swipeableThread = React.useMemo(
+ () => (
-
+ {swipeableThreadContent}
- {sidebars}
- >
+ ),
+ [
+ currentlyOpenedSwipeableId,
+ data.mostRecentNonLocalMessage,
+ data.threadInfo,
+ onSwipeableWillOpen,
+ swipeableThreadContent,
+ ],
);
+
+ const chatThreadListItem = React.useMemo(
+ () => (
+ <>
+ {swipeableThread}
+ {sidebars}
+ >
+ ),
+ [sidebars, swipeableThread],
+ );
+
+ return chatThreadListItem;
}
const chatThreadListItemHeight = 70;