[$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native)

[IuliiaHerets]

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.0.26-1
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh270801@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account settings > Profile.
3. Upload a large photo.

Expected Result:

Avatar position will not move after the error appears.

Actual Result:

On web and desktop app, avatar position moves after the error appears.
On Android and iOS app, the avatar position does not move but the error message is not placed correctly.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6585839_1724882325226.pic.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021831363479706276077
• Upwork Job ID: 1831363479706276077
• Last Price Increase: 2024-09-04

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

Triggered auto assignment to @Julesssss (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

[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.

[Julesssss]

We'll fix, but this is not a blocker.

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-09-03 10:29:15 UTC.

Proposal

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

Avatar position moves after error appears (web), incorrect error position (native)

What is the root cause of that problem?

• We are using styles.alignSelfCenter for avatar
  

  App/src/components/AvatarWithImagePicker.tsx

  Line 375 in b9af3d1

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

• For native issue, we are not adding full width (styles.w100) to a view component that wraps AvatarWithImagePicker below, and the view component in AvatarWithImagePicker is inheriting a width that is not stretched to full width
  

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

  Lines 157 to 160 in 4fe86eb

  	<View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}>
  	<MenuItemGroup shouldUseSingleExecution={false}>
  	<AvatarWithImagePicker
  	isUsingDefaultAvatar={UserUtils.isDefaultAvatar(currentUserPersonalDetails?.avatar ?? '')}

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

• We should use styles.alignSelfStartfor avatar
• We should add styles.w100 for the view component to address the native issue

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

What alternative solutions did you explore? (Optional)

Alternative solution for web issue

• We can also remove type === CONST.ICON_TYPE_AVATAR && styles.alignSelfStart from here
  

  App/src/components/AvatarWithImagePicker.tsx

  Line 375 in b9af3d1

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

• Remove type prop from WorkspaceProfilePage and from other pages where type is passed to AvatarWithImagePicker
  

  App/src/pages/workspace/WorkspaceProfilePage.tsx

  Lines 176 to 177 in 4fe86eb

  	type={CONST.ICON_TYPE_WORKSPACE}
  	fallbackIcon={Expensicons.FallbackWorkspaceAvatar}

• Remove type prop from AvatarWithImagePicker too

[dominictb]

Edited by proposal-police: This proposal was edited at 2023-10-02T14:53:00Z.

Proposal

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

On web and desktop app, avatar position moves after the error appears.
On Android and iOS app, the avatar position does not move but the error message is not placed correctly.

What is the root cause of that problem?

1. web bug
   We're using styles.alignSelfCenter in

App/src/components/AvatarWithImagePicker.tsx

Line 375 in b9af3d1

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

When there's an error, the width of avatar container is same as error message -> the avatar is center

2. native bug

We don't set the width: 100% for the container in

App/src/components/AvatarWithImagePicker.tsx

Line 328 in b9af3d1

<View style={style}>

w100 in here doesn't cover the error message

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

1. Fix web bug
   We should remove type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter
2. Fix native bug

Add styles.w100 in here

What alternative solutions did you explore? (Optional)

NA

[etCoderDysto]

Updated Proposal

• Added an alternative solution
• Added a solution to fix native issue

[melvin-bot]

@Julesssss, @kevinksullivan Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

@haris-ali9211 Your proposal will be dismissed because you did not follow the proposal template.

[haris-ali9211]

Proposal

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

The avatar position moves after the error appears on the web and desktop app. On Android and iOS apps, the avatar position does not move, but the error message is not placed correctly.

What is the root cause of that problem?

• Bug Causing in webApp

<PressableWithoutFeedback
    onPress={() => onPressAvatar(openPicker)}
    accessibilityRole={CONST.ROLE.BUTTON}
    accessibilityLabel={translate('avatarWithImagePicker.editImage')}
    disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
    disabledStyle={disabledStyle}
    style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
    ref={anchorRef}
>

• Why It Is Causing

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

• Here on the style, we are using styles.alignSelfCenter, which is why, when an error arises, the container's size becomes greater than the avatar. Consequently, the avatar centers itself due to the alignSelfCenter property.

---

• Bug Causing in Native

<View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}>
    <MenuItemGroup shouldUseSingleExecution={false}>
        <AvatarWithImagePicker
            isUsingDefaultAvatar={UserUtils.isDefaultAvatar(currentUserPersonalDetails?.avatar ?? '')}
            source={avatarURL}
            avatarID={accountID}
            onImageSelected={PersonalDetails.updateAvatar}
            onImageRemoved={PersonalDetails.deleteAvatar}
            size={CONST.AVATAR_SIZE.XLARGE}
            avatarStyle={styles.avatarXLarge}
            pendingAction={currentUserPersonalDetails?.pendingFields?.avatar ?? undefined}
            errors={currentUserPersonalDetails?.errorFields?.avatar ?? null}
            errorRowStyles={styles.mt6}
            onErrorClose={PersonalDetails.clearAvatarErrors}
            onViewPhotoPress={() => Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))}
            previewSource={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
            originalFileName={currentUserPersonalDetails.originalFileName}
            headerTitle={translate('profilePage.profileAvatar')}
            fallbackIcon={currentUserPersonalDetails?.fallbackIcon}
            editIconStyle={styles.profilePageAvatar}
        />
    </MenuItemGroup>
</View>

• Why It Is Causing

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

• Here we are not applying styles.w100 (full width) to the View component that encloses AvatarWithImagePicker. Because of this, the inner View component inherits a width that does not extend fully across the container, leading to layout issues.

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

• For WebApp
  Apply styles.alignSelfStart to the avatar to resolve the centering issue.

• For Native Mobile
  Add styles.w100 to the view component to correct the layout

[shubham1206agra]

Just marking here for visibility, @rushatgabhane will fix this in #48517.

[dominictb]

@shubham1206agra I see this bug is external, should we handle it here?

[shubham1206agra]

No, it will be handled by @rushatgabhane since it was a regression from copilot.

[kevinksullivan]

Closing out since we have that PR fixing this and other issues.