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]);