Merge pull request #8013 from Expensify/OSBotify-cherry-pick-staging-8011

🍒 Cherry pick PR #8011 to staging 🍒

Author: Amal Nazeem

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001014104
-        versionName "1.1.41-4"
+        versionCode 1001014105
+        versionName "1.1.41-5"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.41.4</string>
+	<string>1.1.41.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.41.4</string>
+	<string>1.1.41.5</string>
 </dict>
 </plist>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.41-4",
+  "version": "1.1.41-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

package.json

@@ -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';
@@ -103,6 +103,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', []);
@@ -131,13 +132,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

src/pages/ReportDetailsPage.js

@@ -1495,14 +1495,6 @@ const styles = {
         borderRadius: 18,
     },
 
-    singleAvatarLarge: {
-        height: 64,
-        width: 64,
-        backgroundColor: themeColors.icon,
-        borderRadius: 64,
-        overflow: 'hidden',
-    },
-
     secondAvatar: {
         position: 'absolute',
         right: -18,
@@ -1752,7 +1744,7 @@ const styles = {
         ...flex.flexColumn,
         ...flex.alignItemsCenter,
         ...spacing.mt4,
-        height: 150,
+        height: 170,
     },
 
     reportDetailsRoomInfo: {