diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 88955766c991..0ed4ae665781 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -150,24 +150,40 @@ function ReportActionItemSingle({
} else {
secondaryAvatar = {name: '', source: '', type: 'avatar'};
}
- const icon = {
- source: avatarSource ?? FallbackAvatar,
- type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
- name: primaryDisplayName ?? '',
- id: avatarId,
- };
+ const icon = useMemo(
+ () => ({
+ source: avatarSource ?? FallbackAvatar,
+ type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
+ name: primaryDisplayName ?? '',
+ id: avatarId,
+ }),
+ [avatarSource, isWorkspaceActor, primaryDisplayName, avatarId],
+ );
// Since the display name for a report action message is delivered with the report history as an array of fragments
// we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
// we should stop referring to the report history items entirely for this information.
- const personArray = displayName
- ? [
- {
- type: 'TEXT',
- text: displayName,
- },
- ]
- : action?.person;
+ const personArray = useMemo(() => {
+ const baseArray = displayName
+ ? [
+ {
+ type: 'TEXT',
+ text: displayName,
+ },
+ ]
+ : [action?.person?.at(0)] ?? [];
+
+ if (displayAllActors && secondaryAvatar?.name) {
+ return [
+ ...baseArray,
+ {
+ type: 'TEXT',
+ text: secondaryAvatar?.name ?? '',
+ },
+ ];
+ }
+ return baseArray;
+ }, [displayName, action?.person, displayAllActors, secondaryAvatar?.name]);
const reportID = report?.reportID;
const iouReportID = iouReport?.reportID;
@@ -231,6 +247,74 @@ function ReportActionItemSingle({
);
};
+
+ const getHeading = useCallback(() => {
+ return () => {
+ if (displayAllActors && personArray.length === 2 && isReportPreviewAction) {
+ return (
+
+
+
+ {` & `}
+
+
+
+ );
+ }
+ return (
+
+ {personArray.map((fragment, index) => (
+
+ ))}
+
+ );
+ };
+ }, [
+ displayAllActors,
+ secondaryAvatar,
+ isReportPreviewAction,
+ personArray,
+ styles.flexRow,
+ styles.flex1,
+ styles.chatItemMessageHeaderSender,
+ styles.pre,
+ action,
+ actorAccountID,
+ displayName,
+ icon,
+ ]);
+
const hasEmojiStatus = !displayAllActors && status?.emojiCode;
const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');
const statusText = status?.text ?? '';
@@ -261,18 +345,7 @@ function ReportActionItemSingle({
accessibilityLabel={actorHint}
role={CONST.ROLE.BUTTON}
>
- {personArray?.map((fragment, index) => (
-
- ))}
+ {getHeading()}
{!!hasEmojiStatus && (