[$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 contributors@expensify.com 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