[Due for payment 2025-08-29] [$250] Share displays a different avatar than the one set on the account

[m-natarajan]

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: 9.1.94-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Log in with an unvalidated account
2. Go to Settings > Profile > Share
3. Compare the avatar shown in the QR code with the account’s current avatar

Expected Result:

The QR code should use the same avatar currently associated with the account.

Actual Result:

The avatar in the QR code does not match the account’s set avatar.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021956146863083122855
• Upwork Job ID: 1956146863083122855
• Last Price Increase: 2025-08-15
• Automatic offers:
• brunovjk | Reviewer | 108448916

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nkdengineer]

Proposal

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

The avatar in the QR code does not match the account’s set avatar.

What is the root cause of that problem?

We are using getAvatarUrl function here

App/src/pages/ShareCodePage.tsx

Line 103 in 7a3cb1d

const logo = isReport ? getLogoForWorkspace(report, policy) : (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType);

App/src/pages/ShareCodePage.tsx

Line 132 in 7a3cb1d

logo={isReport ? expensifyLogo : (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}

That plus 1 to the account id here

App/src/libs/UserUtils.ts

Lines 154 to 159 in 7a3cb1d

	// Note that Avatar count starts at 1 which is why 1 has to be added to the result (or else 0 would result in a broken avatar link)
	const accountIDHashBucket = (Number(accountID) % CONST.DEFAULT_AVATAR_COUNT) + 1;
	const avatarPrefix = `default-avatar`;
	return `${CONST.CLOUDFRONT_URL}/images/avatars/${avatarPrefix}_${accountIDHashBucket}.png`;
	}

But in profile page we are using currentUserPersonalDetails?.avatar

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

Line 58 in 7a3cb1d

const avatarURL = currentUserPersonalDetails?.avatar ?? '';

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

Lines 186 to 188 in 7a3cb1d

	<AvatarWithImagePicker
	isUsingDefaultAvatar={isDefaultAvatar(currentUserPersonalDetails?.avatar ?? '')}
	source={avatarURL}

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

We should use currentUserPersonalDetails?.avatar if we already have avatar like we did in the profile page

    const logo = isReport ? getLogoForWorkspace(report, policy) : (currentUserPersonalDetails?.avatar ?? getDefaultAvatarURL(currentUserPersonalDetails?.accountID));

App/src/pages/ShareCodePage.tsx

Line 132 in 7a3cb1d

logo={isReport ? expensifyLogo : (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}

App/src/pages/ShareCodePage.tsx

Line 103 in 7a3cb1d

const logo = isReport ? getLogoForWorkspace(report, policy) : (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Or we can remove +1 in here

App/src/libs/UserUtils.ts

Line 155 in 7a3cb1d

const accountIDHashBucket = (Number(accountID) % CONST.DEFAULT_AVATAR_COUNT) + 1;

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-15 01:29:49 UTC.

Proposal

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

Share displays a different avatar than the one set on the account

What is the root cause of that problem?

The problem is that getAvatarUrl() function is designed to return the original URL if it's NOT a default avatar. Return a computed default avatar URL if it IS a default avatar. However, the avatar in profile page is from currentUserPersonalDetails

App/src/pages/ShareCodePage.tsx

Line 103 in 5420e2a

const logo = isReport ? getLogoForWorkspace(report, policy) : (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType);

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

Line 186 in 7a3cb1d

<AvatarWithImagePicker

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

We should fallback to avatar from currentUserPersonalDetails first before fallback to value from getAvatarUrl or we can completely remove getAvatarUrl when getting the logo

    const logo = isReport
        ? getLogoForWorkspace(report, policy)
        : ((currentUserPersonalDetails?.avatar as ImageSourcePropType) ?? (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType));

Then replace logo in QRShareWithDownload with the logo above

Note: I don't think it is duplicated since the scope and solution to fix of my solution and the one above is different

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add tests for getAvatarUrl to verify this new case

What alternative solutions did you explore? (Optional)

NA
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @lorretheboy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[dmkt9]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-15 11:13:00 UTC.

Proposal

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

The avatar in the QR code does not match the account’s set avatar.

What is the root cause of that problem?

1. All avatars are rendered through the Avatar component, which internally checks and assigns the source using the getAvatar utility:
   

   App/src/components/Avatar.tsx

   Line 89 in 36c8f8b

   const source = isWorkspace ? originalSource : getAvatar(originalSource, userAccountID);

   
   

   App/src/libs/UserUtils.ts

   Lines 187 to 189 in 36c8f8b

   	function getAvatar(avatarSource?: AvatarSource, accountID?: number): AvatarSource | undefined {
   	return isDefaultAvatar(avatarSource) ? getDefaultAvatar(accountID, avatarSource) : avatarSource;
   	}

   
   

   App/src/libs/UserUtils.ts

   Line 117 in 36c8f8b

   function getDefaultAvatar(accountID = -1, avatarURL?: string): IconAsset | undefined {

2. For the logo in the QR code, we use the avatar URL instead of an SVG element, so the getAvatarURL utility is used:
   

   App/src/pages/ShareCodePage.tsx

   Line 132 in 36c8f8b

   logo={isReport ? expensifyLogo : (getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}

   
   

   App/src/libs/UserUtils.ts

   Lines 198 to 200 in 36c8f8b

   	function getAvatarUrl(avatarSource: AvatarSource | undefined, accountID: number): AvatarSource {
   	return isDefaultAvatar(avatarSource) ? getDefaultAvatarURL(accountID) : avatarSource;
   	}

   
   

   App/src/libs/UserUtils.ts

   Line 149 in 36c8f8b

   function getDefaultAvatarURL(accountID: string | number = ''): string {

3. However, the implementation of getDefaultAvatar and getDefaultAvatarURL is inconsistent, which causes the current issue.

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

We should align the logic used in getDefaultAvatarURL with that of getDefaultAvatar:

App/src/libs/UserUtils.ts

Line 149 in 36c8f8b

function getDefaultAvatarURL(accountID: string | number = ''): string {

function getDefaultAvatarURL(accountID: string | number = '', avatarURL?: string): string {

App/src/libs/UserUtils.ts

Lines 154 to 155 in 36c8f8b

	// Note that Avatar count starts at 1 which is why 1 has to be added to the result (or else 0 would result in a broken avatar link)
	const accountIDHashBucket = (Number(accountID) % CONST.DEFAULT_AVATAR_COUNT) + 1;

// NOTE: We could extract this logic into a shared helper and use it in both `getDefaultAvatar` and `getDefaultAvatarURL`
let accountIDHashBucket: AvatarRange | undefined;
if (avatarURL) {
    const match = avatarURL.match(/(default-avatar_|avatar_)(\d+)(?=\.)/);
    const lastDigit = match && parseInt(match[2], 10);
    accountIDHashBucket = lastDigit as AvatarRange;
} else {
    accountIDHashBucket = (Number(accountID) % CONST.DEFAULT_AVATAR_COUNT) + 1;
}

App/src/libs/UserUtils.ts

Line 199 in 36c8f8b

return isDefaultAvatar(avatarSource) ? getDefaultAvatarURL(accountID) : avatarSource;

return isDefaultAvatar(avatarSource) ? getDefaultAvatarURL(accountID, avatarSource) : avatarSource;

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add unit tests for getAvatarUrl, and a unit test to verify consistency between getAvatar and getAvatarUrl.

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.