The position of avatar image moves when error occurs in profile page.

[m-natarajan]

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: 9.0.29-2
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: @shubham1206agra
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725459116516319

Action Performed:

1. Go to the Settings tab in the App.
2. Go to Profile.
3. Try to upload a large image (>6MB) as profile picture.
4. Observe the position of Avatar.

Expected Result:

The avatar picture position remains the same

Actual Result:

The avatar picture position changes

Workaround:

Unknown

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

Large image:
https://github.com/Expensify/App/assets/16493223/57399153-d460-45aa-a41e-2103971b9a35

View all open jobs on GitHub

[melvin-bot]

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

[gijoe0295]

Edited by proposal-police: This proposal was edited at 2023-10-23T00:00:00Z.

Proposal

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

The avatar picture position changes

What is the root cause of that problem?

We're self aligning the avatar center:

App/src/components/AvatarWithImagePicker.tsx

Line 375 in 2edeee8

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

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

We're using this avatar in many pages where we align it either center or left. For example in new chat confirmation page, it's center. So we can't just force it to always align start.

We should leverage the avatarStyle to customize its position.

1. Move avatarStyle to the end. We don't need to worry this can cause regressions because avatarStyle is currently only used for resizing the avatars like this:

App/src/components/AvatarWithImagePicker.tsx

Line 375 in 2edeee8

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

2. Apply styles.alignSelfStart to avatarStyle where we need (that means it's center by default), for example in ProfilePage:

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

Line 166 in 1708b72

avatarStyle={styles.avatarXLarge}

What alternative solutions did you explore? (Optional)

I also spotted a related bug: The error message is too near the avatar in create group chat confirmation page.

To fix this, add errorRowStyless={styles.mt6} in NewChatConfirmPage like this:

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

Line 169 in 1708b72

errorRowStyles={styles.mt6}

[ChavdaSachin]

Proposal

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

Avatar position changes when error message prompts

What is the root cause of that problem?

When avatar is without error message, it gets aligned at start from here -

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

Line 157 in ecc73ff

<View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}>

but When avatar is with error message, now this element is composite and so avatar is aligned at center within composite provided by AvatarWithImagePicker

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

apply alignstart to avatar within AvatarWithImagePicker

<View style={styles.w100, styles.alignItemsStart}>

App/src/components/AvatarWithImagePicker.tsx

Line 329 in 8e6c8ac

<View style={styles.w100}>

Result

### What alternative solutions did you explore? (Optional)

[gijoe0295]

Update Proposal

• Significant changes to my solution to avoid a regression

[gijoe0295]

Update Proposal

• Add solution for a related bug

[Nodebrute]

Proposal

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

The position of avatar image moves when error occurs in profile page

What is the root cause of that problem?

We don't pass the type prop here so by default the type will be CONST.ICON_TYPE_AVATAR and for this type we are adding styles.alignSelfCenter this is also the reason why we added styles.alignSelfStar here because without that avatar was in center.

App/src/components/AvatarWithImagePicker.tsx

Line 375 in 798a5cd

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

Here we have a layout very similar to the workspace profile page, but we don't encounter this issue there. Why? because it's type is CONST.ICON_TYPE_WORKSPACE

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

First we can remove this styles.alignSelfStart

Then if the avatar is from profile page we should make sure that this styles.alignSelfCenter don't get applied. There are multiple ways of doing it.
We can pass a prop shouldAlignSelfCenter and then use it here instead of type === CONST.ICON_TYPE_AVATAR

Or we can pass a prop and use it along with type === CONST.ICON_TYPE_AVATAR for example (Pseudocode)

(type === CONST.ICON_TYPE_AVATAR && !shouldNotAlignCenter) && styles.alignSelfCenter

Result

What alternative solutions did you explore? (Optional)

[shubham1206agra]

Proposal

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

The position of image moves when error occurs in profile page.

What is the root cause of that problem?

In

App/src/components/AvatarWithImagePicker.tsx

Line 375 in 6760f96

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

When we show the error message the size of the view that contains the avatar increases which causes avatar to get centre with respect to the DotIndicator (error message).

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

Remove type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter from

App/src/components/AvatarWithImagePicker.tsx

Line 375 in 6760f96

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

And add styles.alignSelfCenter in avatarStyle in the components NewChatConfirmPage and ReportDetailsPage since they have centre alignment here.

What alternative solutions did you explore? (Optional)

[shubham1206agra]

For future C+

[etCoderDysto]

This is dupe of #48244

[shubham1206agra]

@etCoderDysto Thanks for the heads up.

@miljakljajic Please close this issue.

[miljakljajic]

Thank you!