[HOLD for payment 2021-12-06] Room details - Room avatar is square instead of circle

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to a room (e.g #announcements)
2. Tap on the header to access room details

Expected Result:

Avatar image should be a circle

Actual Result:

Avatar image is squared

Workaround:

None needed, visual issue.

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.14-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1636726932159700

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @tylerkaraszewski (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

Android has circled image.

[tylerkaraszewski]

Seems like a straightforward contributor issue, I'll tag as such and let someone propose a solution.

[MelvinBot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[bfitzexpensify]

Upwork posting.

[MelvinBot]

Triggered auto assignment to @Jag96 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[parasharrajat]

@isagoico Could you please confirm if this is reproducible on any platform? my testing revealed that it looks good on the latest code.

[PrashantMangukiya]

Proposed Solution

This is reproducible in version: 1.1.14-4 for iOS 15.0

Issue-Reproducible-ios.mov

We need to change style at line 134, 135, and 152 within ReportDetailsPage.js file.

App/src/pages/ReportDetailsPage.js

Lines 131 to 137 in 6701446

	<Avatar
	isDefaultChatRoom={isDefaultRoom(this.props.report)}
	isArchivedRoom={isArchivedRoom(this.props.report)}
	containerStyles={[styles.singleAvatarLarge, styles.mb4]}
	imageStyles={[styles.singleAvatarLarge]}
	source={{uri: this.props.report.icons[0]}}
	/>

App/src/pages/ReportDetailsPage.js

Lines 147 to 157 in 6701446

	<Text
	style={[
	styles.sidebarLinkText,
	styles.optionAlternateText,
	styles.textLabelSupporting,
	styles.mb6,
	]}
	numberOfLines={1}
	>
	{defaultRoomSubtitle}
	</Text>

**Solution: ** Update style as shown under.

 <Avatar
    isDefaultChatRoom={isDefaultRoom(this.props.report)}
    isArchivedRoom={isArchivedRoom(this.props.report)}
    containerStyles={[styles.avatarLarge, styles.mb4]}    //  *** Updated code here
    imageStyles={[styles.avatarLarge]}                   //  *** Updated code here
    source={{uri: this.props.report.icons[0]}}
/>

 <Text
    style={[
        styles.sidebarLinkText,
        styles.optionAlternateText,
        styles.textLabelSupporting,
        styles.mb4,    //  *** Updated code here
    ]}
    numberOfLines={1}
>
    {defaultRoomSubtitle}
</Text>

Screen record after update

iOS

iOS.mov

Android

Android.mov

Mobile Web

MobileWeb.mov

[parasharrajat]

I am in confusion @PrashantMangukiya What exactly did you change here?

[PrashantMangukiya]

Changed style from this

 containerStyles={[styles.singleAvatarLarge, styles.mb4]} 
 imageStyles={[styles.singleAvatarLarge]} 

to this

containerStyles={[styles.avatarLarge, styles.mb4]}    //  *** Updated
imageStyles={[styles.avatarLarge]}                   //  *** Updated

[wenge8n]

I was able to reproduce this issue in v1.1.14-0, iOS 15.0.

Here is screenshots.
https://imgur.com/a/as4osIF
https://imgur.com/a/hGmUA4s

The problem is that borderRadius property is set but overflow property is not set for the image container.

The solution is, we need to add the style at line 1323 in src/styles/styles.js

singleAvatarLarge: {
      height: 64,
      width: 64,
      backgroundColor: themeColors.icon,
      borderRadius: 64,
+     overflow: 'hidden', // add this line
  },

We need to add overflow: 'hidden'

[Jag96]

While both proposals seem to fix the issue, I think @wenge8n has the simpler solution. @bfitzexpensify let's hire @wenge8n for this one. @wenge8n once you get the invite feel free to start on a PR!

[Jag96]

@wenge8n offer sent!

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.16-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• wen-fix-square-room-avatar #6348

If no regressions arise, payment will be issued on 2021-12-06. 🎊

[bfitzexpensify]

Paid and contract ended.