diff --git a/src/components/DisplayNames/index.native.tsx b/src/components/DisplayNames/index.native.tsx
index 8d1d3d2866ed..8f1fef37a6ba 100644
--- a/src/components/DisplayNames/index.native.tsx
+++ b/src/components/DisplayNames/index.native.tsx
@@ -1,16 +1,18 @@
import React from 'react';
import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
import DisplayNamesProps from './types';
// As we don't have to show tooltips of the Native platform so we simply render the full display names list.
function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+ const {translate} = useLocalize();
return (
- {fullTitle}
+ {fullTitle || translate('common.hidden')}
);
}
diff --git a/src/components/DisplayNames/index.tsx b/src/components/DisplayNames/index.tsx
index f5714fcbfb8b..7ff1081937d5 100644
--- a/src/components/DisplayNames/index.tsx
+++ b/src/components/DisplayNames/index.tsx
@@ -1,15 +1,19 @@
import React from 'react';
+import useLocalize from '@hooks/useLocalize';
import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
import DisplayNamesProps from './types';
function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldUseFullTitle, displayNamesWithTooltips}: DisplayNamesProps) {
+ const {translate} = useLocalize();
+ const title = fullTitle || translate('common.hidden');
+
if (!tooltipEnabled) {
return (
);
}
@@ -17,7 +21,7 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
return (
- _.chain(props.iou.participants)
- .map((participant) => {
- const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
- return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
- })
- .filter((participant) => !!participant.login || !!participant.text)
- .value(),
+ _.map(props.iou.participants, (participant) => {
+ const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
+ return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
+ }),
[props.iou.participants, personalDetails],
);
const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(props.report)), [props.report]);