Add avatars based on svg icons for default rooms

src/components/Avatar.js

@@ -1,7 +1,8 @@
 import React, {PureComponent} from 'react';
-import {Image, View} from 'react-native';
+import {Image, View, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
+import RoomAvatar from '../../assets/images/avatars/room.svg';
 
 const propTypes = {
     /** Url source for the avatar */
@@ -15,30 +16,34 @@ const propTypes = {
 
     /** Set the size of Avatar */
     size: PropTypes.oneOf(['default', 'small']),
+
+    /** Whether this avatar is for a default room */
+    isDefaultChatRoom: PropTypes.bool,
 };
 
 const defaultProps = {
     source: '',
     imageStyles: [],
     containerStyles: [],
     size: 'default',
+    isDefaultChatRoom: false,
 };
 
 class Avatar extends PureComponent {
     render() {
-        if (!this.props.source) {
+        if (!this.props.source && !this.props.isDefaultChatRoom) {
             return null;
         }
 
+        const imageStyle = [
+            this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
+            ...this.props.imageStyles,
+        ];
         return (
             <View pointerEvents="none" style={this.props.containerStyles}>
-                <Image
-                    source={{uri: this.props.source}}
-                    style={[
-                        this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
-                        ...this.props.imageStyles,
-                    ]}
-                />
+                {this.props.isDefaultChatRoom
+                    ? <RoomAvatar style={StyleSheet.flatten(imageStyle)} />
+                    : <Image source={{uri: this.props.source}} style={imageStyle} />}
             </View>
         );
     }

src/components/MultipleAvatars.js

@@ -15,16 +15,20 @@ const propTypes = {
     /** Style for Second Avatar */
     // eslint-disable-next-line react/forbid-prop-types
     secondAvatarStyle: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether this avatar is for a default room */
+    isDefaultChatRoom: PropTypes.bool,
 };
 
 const defaultProps = {
     avatarImageURLs: [],
     size: 'default',
     secondAvatarStyle: [styles.secondAvatarHovered],
+    isDefaultChatRoom: false,
 };
 
 const MultipleAvatars = ({
-    avatarImageURLs, size, secondAvatarStyle,
+    avatarImageURLs, size, secondAvatarStyle, isDefaultChatRoom,
 }) => {
     const avatarContainerStyles = size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar;
     const singleAvatarStyles = size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar;
@@ -40,7 +44,7 @@ const MultipleAvatars = ({
     if (avatarImageURLs.length === 1) {
         return (
             <View style={avatarContainerStyles}>
-                <Avatar source={avatarImageURLs[0]} size={size} />
+                <Avatar source={avatarImageURLs[0]} size={size} isDefaultChatRoom={isDefaultChatRoom} />
             </View>
         );
     }

src/libs/OptionsListUtils.js

@@ -660,9 +660,9 @@ function getCurrencyListForSections(currencyOptions, searchValue) {
  * @returns {String}
  */
 function getReportIcons(report, personalDetails) {
+    // Default rooms have a specific avatar so we can return any non-empty array
     if (isDefaultRoom(report)) {
-        // Placeholder image for default rooms soon to be updated
-        return [`${CONST.CLOUDFRONT_URL}/images/avatars/default_avatar_external.png`];
+        return [''];
     }
     return _.map(report.participants, dmParticipant => ({
         firstName: lodashGet(personalDetails, [dmParticipant, 'firstName'], ''),

src/pages/ReportDetailsPage.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
-import {Image, View} from 'react-native';
+import {View} from 'react-native';
 import lodashGet from 'lodash/get';
+import Avatar from '../components/Avatar';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ONYXKEYS from '../ONYXKEYS';
@@ -125,9 +126,11 @@ class ReportDetailsPage extends Component {
                         <View
                             style={styles.reportDetailsTitleContainer}
                         >
-                            <Image
+                            <Avatar
+                                isDefaultChatRoom={isDefaultRoom(this.props.report)}
+                                containerStyles={[styles.singleAvatarLarge, styles.mb4]}
+                                imageStyles={[styles.singleAvatarLarge]}
                                 source={{uri: this.props.report.icons[0]}}
-                                style={[styles.singleAvatarLarge, styles.mb4]}
                             />
                             <View style={styles.reportDetailsRoomInfo}>
                                 <DisplayNames

src/pages/home/HeaderView.js

@@ -121,6 +121,7 @@ const HeaderView = (props) => {
                             <MultipleAvatars
                                 avatarImageURLs={props.report.icons}
                                 secondAvatarStyle={[styles.secondAvatarHovered]}
+                                isDefaultChatRoom={isDefaultChatRoom}
                             />
                             <View style={[styles.flex1, styles.flexColumn]}>
                                 <DisplayNames

src/pages/home/sidebar/OptionRow.js

@@ -183,6 +183,7 @@ const OptionRow = ({
                                                 ? getBackgroundAndBorderStyle(hoveredBackgroundColor)
                                                 : undefined,
                                         ]}
+                                        isDefaultChatRoom={option.isDefaultChatRoom}
                                     />
                                 )
                             }