[Due for payment 2025-12-16] [$100] Profile - Last three avatars are not arranged side by side when display name is not English

[mitarachim]

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.2.58-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exp #71653
Email or phone of affected tester (no customers): mjsdjosnjsodijiosd11@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: User Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account > Profile.
3. Click Display name.
4. Enter an emoji as the first name and save it.
5. Click on the avatar.
6. Scroll to the bottom.

Expected Result:

The last three avatars will be arranged from left to right without additional space in between.

Actual Result:

The last three avatars have additional space in between (refer to screenshot).

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7003958_1763132349658.25.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990788250819457455
• Upwork Job ID: 1990788250819457455
• Last Price Increase: 2025-11-25
• Automatic offers:
• thelullabyy | Contributor | 109612895

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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.

[abbasifaizan70]

Proposal: Fix Avatar Selector Spacing Issue with Emoji Names

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

When a user enters an emoji as their first name in the profile settings and then opens the avatar selector page, the last row of avatars has extra large spacing between them instead of being evenly distributed like the other rows.

What is the root cause of that problem?

The avatar selector uses a flexbox layout with justifyContent: 'space-between' which spreads items across the full container width. Here's what happens:

1. When a normal name is entered (e.g., "Alice"), the system generates 18 letter avatars plus 48 preset avatars = 66 total avatars
2. When an emoji is entered (e.g., "😀"), getFirstAlphaNumericCharacter() returns an empty string, so no letter avatars are generated = only 48 preset avatars
3. With 48 avatars arranged in rows, the last row has only 3 items
4. The space-between justification stretches these 3 items across the full width, creating large gaps

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

Update the avatarSelectorListContainer style in src/styles/index.ts (around line 5250):

From:

avatarSelectorListContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 0,
    justifyContent: 'space-between',
},

To:

avatarSelectorListContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 0,
    justifyContent: 'flex-start',
},

What alternative solutions did you explore?

N/A

screenshot after above fix

[samranahm]

Proposal

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

Profile - Last three avatars are not arranged side by side when display name is not English

What is the root cause of that problem?

When display name is emoji, the function returns '' (empty string) This causes getLetterAvatar() to return null in PresetAvatarCatalog.ts that result no letter avatars are generated With fewer total avatars, the grid has fewer complete rows The last incomplete row to have just 2-3 items
This triggers the space-between layout issue described above

App/src/components/AvatarSelector.tsx

Lines 47 to 50 in b6a3ee5

	<View style={styles.avatarSelectorListContainer}>
	{PRESET_AVATAR_CATALOG_ORDERED.map(({id, local}) => {
	const isSelected = selectedID === id;

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

We should use flex-start instead of space-between in avatarSelectorListContainer

here

App/src/styles/index.ts

Lines 5250 to 5255 in b6a3ee5

	avatarSelectorListContainer: {
	flexDirection: 'row',
	flexWrap: 'wrap',
	gap: 0,
	justifyContent: 'space-between',
	},

What alternative solutions did you explore? (Optional)

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.

[twisterdotcom]

cc @grgia - do we want to assign somebody specific to this?

[grgia]

cc @jmusial this spacing has come back to bite

[grgia]

@twisterdotcom i gotcha