[$500] [HOLD for payment 2024-03-29] [HOLD for payment 2024-03-26] Profile - Avatar is blank when viewed in full screen

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.54-0
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com.
2. Go to Concierge chat.
3. Tap on the header.
4. Tap on the avatar.

Expected Result:

Avatar shows up without issue.

Actual Result:

Blank page is seen in avatar view.
This issue is only reproducible with default avatar.

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6418311_1710791664032.RPReplay_Final1710791569.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015a2a95133386223a
• Upwork Job ID: 1778002346278477824
• Last Price Increase: 2024-04-10

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[kbecciv]

We think that this bug might be related to #wave-control

[melvin-bot]

Triggered auto assignment to @hayata-suenaga (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[ahmedGaber93]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile - Avatar is blank when viewed in full screen

What is the root cause of that problem?

the root cause is react native image not support svg.
and we pass source = svg default avtar for concerige here in ProfileAvatar.tsx

App/src/pages/settings/Profile/ProfileAvatar.tsx

Line 41 in 22bd9eb

source={UserUtils.getFullSizeAvatar(avatarURL, accountID)}

follow getFullSizeAvatar > getAvatar > getDefaultAvatar. it return svg file ConciergeAvatar

App/src/libs/UserUtils.ts

Lines 85 to 94 in 22bd9eb

	function getDefaultAvatar(accountID = -1, avatarURL?: string): IconAsset {
	if (accountID <= 0) {
	return FallbackAvatar;
	}
	if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) {
	return ConciergeAvatar;
	}
	if (Number(accountID) === CONST.ACCOUNT_ID.NOTIFICATIONS) {
	return NotificationsAvatar;
	}

and when we display in ProfileAvatar.jsx we use react native image.
follow ProfileAvatar > AttachmentModal > AttachmentView > AttachmentViewImage

What changes do you think we should make in order to solve the problem?

pass prop maybeIcon here to check if svg and use Icon instead of image

we can pass it when platform is native only

 const platform = getPlatform();
  const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 maybeIcon={isNative}

What alternative solutions did you explore? (Optional)

we can also pass avatarURL when is native and type of image is svg

const fullSizeAvatar = UserUtils.getFullSizeAvatar(avatarURL, accountID);
source = (isNative && typeof fullSizeAvatar === 'number') ? avatarURL : fullSizeAvatar;

[situchan]

regression from #36560
It's weird to have source.uri as number but we should still keep this original logic until refactor.

-   if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'number') {
-       imageSource = source.uri;
-   }

Here's fix: #38554
cc: @hayata-suenaga

[hayata-suenaga]

The fix PR was merged into main

Requested a cherry-pick to Staging

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• [CP Staging] fix concierge avatar not showing in preview #38554

If no regressions arise, payment will be issued on 2024-03-26. 🎊

[melvin-bot]

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

• [CP Staging] fix concierge avatar not showing in preview #38554

If no regressions arise, payment will be issued on 2024-03-29. 🎊

[situchan]

Please assign me here

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[hayata-suenaga]

@laurenreidexpensify, please handle payment according to this summary when you have time 🙇

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015a2a95133386223a

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Upwork job price has been updated to $500

[laurenreidexpensify]

Payment Summary:

• Contributor - @situchan for a contributor role (not C+ role) for authoring [CP Staging] fix concierge avatar not showing in preview #38554 that fixes this regression from [CP Staging] fix concierge avatar not showing in preview #38554. - Please apply in Upwork https://www.upwork.com/jobs/~015a2a95133386223a

• C+ no payment as per [$500] [HOLD for payment 2024-03-29] [HOLD for payment 2024-03-26] Profile - Avatar is blank when viewed in full screen #38516 (comment): @aimane-chnaif reviewed @situchan's PR but because @aimane-chnaif was the C+ for the PR that caused the regression, no payment for @aimane-chnaif here 🙇

[laurenreidexpensify]

@situchan is OOO for April - will come back to this in May when he's back to close out payment

[hayata-suenaga]

I think @situchan is back from OOO. Moving the priority of this issue to daily again

[laurenreidexpensify]

@situchan offer sent in Upwork pls accept

[laurenreidexpensify]

Payment issued in Upwork to @situchan - closing