Merge pull request #8058 from Expensify/amal-reapply-pr-correctly

Reapply RoomHeaderAvatars Logic to fix regression correctly this time

(cherry picked from commit 1d44ed3)

Author: Amal Nazeem

src/pages/ReportDetailsPage.js

@@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
 import {View, ScrollView} from 'react-native';
 import lodashGet from 'lodash/get';
-import Avatar from '../components/Avatar';
+import RoomHeaderAvatars from '../components/RoomHeaderAvatars';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ONYXKEYS from '../ONYXKEYS';
@@ -108,6 +108,7 @@ class ReportDetailsPage extends Component {
     }
 
     render() {
+        const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(this.props.report);
         const isChatRoom = ReportUtils.isChatRoom(this.props.report);
         const chatRoomSubtitle = ReportUtils.getChatRoomSubtitle(this.props.report, this.props.policies);
         const participants = lodashGet(this.props.report, 'participants', []);
@@ -136,13 +137,12 @@ class ReportDetailsPage extends Component {
                         <View
                             style={styles.reportDetailsTitleContainer}
                         >
-                            <Avatar
-                                isChatRoom={isChatRoom}
-                                isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
-                                containerStyles={[styles.singleAvatarLarge, styles.mb4]}
-                                imageStyles={[styles.singleAvatarLarge]}
-                                source={this.props.report.icons[0]}
-                            />
+                            <View style={styles.mb4}>
+                                <RoomHeaderAvatars
+                                    avatarIcons={OptionsListUtils.getAvatarSources(this.props.report)}
+                                    shouldShowLargeAvatars={isPolicyExpenseChat}
+                                />
+                            </View>
                             <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
                                 <View style={[styles.alignSelfCenter, styles.w100]}>
                                     <DisplayNames