Fix

src/components/AnonymousReportFooter.js

@@ -9,19 +9,24 @@ import reportPropTypes from '../pages/reportPropTypes';
 import CONST from '../CONST';
 import styles from '../styles/styles';
 import * as Session from '../libs/actions/Session';
+import participantPropTypes from './participantPropTypes';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes,
 
     isSmallSizeLayout: PropTypes.bool,
 
+    /** Personal details of all the users */
+    personalDetails: PropTypes.objectOf(participantPropTypes),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     report: {},
     isSmallSizeLayout: false,
+    personalDetails: {},
 };
 
 function AnonymousReportFooter(props) {
@@ -31,6 +36,7 @@ function AnonymousReportFooter(props) {
                 <AvatarWithDisplayName
                     report={props.report}
                     size={CONST.AVATAR_SIZE.MEDIUM}
+                    personalDetails={props.personalDetails}
                     isAnonymous
                 />
             </View>

src/components/MultipleAvatars.js

@@ -71,27 +71,8 @@ const defaultProps = {
     maxAvatarsInRow: CONST.AVATAR_ROW_SIZE.DEFAULT,
 };
 
-function getContainerStyles(size, isInReportAction) {
-    let containerStyles;
-
-    switch (size) {
-        case CONST.AVATAR_SIZE.SMALL:
-            containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
-            break;
-        case CONST.AVATAR_SIZE.SMALLER:
-            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
-            break;
-        case CONST.AVATAR_SIZE.MEDIUM:
-            containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin];
-            break;
-        default:
-            containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin];
-    }
-
-    return containerStyles;
-}
 function MultipleAvatars(props) {
-    let avatarContainerStyles = getContainerStyles(props.size, props.isInReportAction);
+    let avatarContainerStyles = StyleUtils.getContainerStyles(props.size, props.isInReportAction);
     const singleAvatarStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
     const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle];
     const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : [''];

src/components/SubscriptAvatar.js

@@ -39,7 +39,7 @@ const defaultProps = {
 function SubscriptAvatar(props) {
     const isSmall = props.size === CONST.AVATAR_SIZE.SMALL;
     const subscriptStyle = props.size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
-    const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar;
+    const containerStyle = StyleUtils.getContainerStyles(props.size);
     // Default the margin style to what is normal for small or normal sized avatars
     let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;
 

src/pages/home/ReportScreen.js

@@ -435,6 +435,7 @@ function ReportScreen({
                                         isComposerFullSize={isComposerFullSize}
                                         onSubmitComment={onSubmitComment}
                                         policies={policies}
+                                        personalDetails={personalDetails}
                                     />
                                 </>
                             )}

src/pages/home/report/ReportFooter.js

@@ -17,6 +17,7 @@ import reportActionPropTypes from './reportActionPropTypes';
 import reportPropTypes from '../../reportPropTypes';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import * as Session from '../../../libs/actions/Session';
+import participantPropTypes from '../../../components/participantPropTypes';
 
 const propTypes = {
     /** Report object for the current report */
@@ -34,6 +35,9 @@ const propTypes = {
     /** The pending action when we are adding a chat */
     pendingAction: PropTypes.string,
 
+    /** Personal details of all the users */
+    personalDetails: PropTypes.objectOf(participantPropTypes),
+
     /** Whether the composer input should be shown */
     shouldShowComposeInput: PropTypes.bool,
 
@@ -48,6 +52,7 @@ const defaultProps = {
     reportActions: [],
     onSubmitComment: () => {},
     pendingAction: null,
+    personalDetails: {},
     shouldShowComposeInput: true,
     shouldDisableCompose: false,
 };
@@ -68,6 +73,7 @@ function ReportFooter(props) {
                         <AnonymousReportFooter
                             report={props.report}
                             isSmallSizeLayout={isSmallSizeLayout}
+                            personalDetails={props.personalDetails}
                         />
                     )}
                     {isArchivedRoom && <ArchivedReportFooter report={props.report} />}

src/styles/StyleUtils.ts

@@ -1207,6 +1207,29 @@ function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: nu
     };
 }
 
+/**
+ * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
+ */
+function getContainerStyles(size: string, isInReportAction = false): Array<ViewStyle | CSSProperties> {
+    let containerStyles: Array<ViewStyle | CSSProperties>;
+
+    switch (size) {
+        case CONST.AVATAR_SIZE.SMALL:
+            containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
+            break;
+        case CONST.AVATAR_SIZE.SMALLER:
+            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
+            break;
+        case CONST.AVATAR_SIZE.MEDIUM:
+            containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin];
+            break;
+        default:
+            containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin];
+    }
+
+    return containerStyles;
+}
+
 /**
  * Get transparent color by setting alpha value 0 of the passed hex(#xxxxxx) color code
  */
@@ -1290,5 +1313,6 @@ export {
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
     getAmountFontSizeAndLineHeight,
+    getContainerStyles,
     getTransparentColor,
 };