[$250] Android - 3-button navigation bar overlaps the Copilot account

[IuliiaHerets]

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: v9.0.73-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

Prerequire - Make sure that your Android device uses 3-button navigation bar
Steps:

1. Navigate to hybrid app in android mobile (Account A) and https://staging.new.expensify.com in other device(Account B)
2. Account B add a copilot to the account (account A)
3. In app - Log in to Account A.
4. Go to settings and click the account switcher

Expected Result:

Android 3-button navigation bar doesn't overlap the copilot account

Actual Result:

Android 3-button navigation bar overlaps the copilot account

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6689888_1733827150043.Screen_Recording_20241210_124450_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021869485429092398114
• Upwork Job ID: 1869485429092398114
• Last Price Increase: 2024-12-18

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

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

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-12-10 12:05:45 UTC.

Proposal

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

Android - 3-button navigation bar overlaps the Copilot account

What is the root cause of that problem?

A case was missed during android edge-to-edge implementation

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

Change innerContainerStyle and add a condition to retain scrollContainerStyle only on web.

                    shouldUseModalPaddingStyle={false}
                    innerContainerStyle={{paddingBottom: unmodifiedPaddings.bottom}}
                    scrollContainerStyle={!shouldUseNarrowLayout && styles.pb4}

App/src/components/AccountSwitcher.tsx

Lines 203 to 204 in 9975b27

	innerContainerStyle={styles.pb0}
	scrollContainerStyle={styles.pb4}

Like it is implemented here

App/src/pages/Search/SearchTypeMenuNarrow.tsx

Lines 215 to 216 in 9975b27

	shouldUseModalPaddingStyle={false}
	innerContainerStyle={{paddingBottom: unmodifiedPaddings.bottom}}

result

Search menu and FAB menu for comparison

Result	Search Menu	FAB menu

Note: unmodifiedPaddings.bottom dynamically computes the padding value based on the host device.

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

NA

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.

[daledah]

Edited by proposal-police: This proposal was edited at 2024-12-11 04:44:20 UTC.

Proposal

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

• Android 3-button navigation bar overlaps the copilot account

What is the root cause of that problem?

• This style:
  

  App/src/components/AccountSwitcher.tsx

  Lines 203 to 204 in 9975b27

  	innerContainerStyle={styles.pb0}
  	scrollContainerStyle={styles.pb4}

  
  is added via commit on purpose. When we added it, the edge-to-edge mode is not applied.

• Now, with the edge-to-edge mode, we need to add an additional padding bottom space to the bottom of the modal to make sure the 3-button navigation bar will not overlap the Copilot account modal. But, because we are using innerContainerStyle={styles.pb0}, the modalContainerStyle.paddingBottom in:

App/src/components/Modal/BaseModal.tsx

Line 157 in f8f12c2

modalContainerStyle,

is 0. As a result, the final paddingBottom value in:

App/src/components/Modal/BaseModal.tsx

Line 276 in f8f12c2

style={[styles.defaultModalContainer, modalPaddingStyles, modalContainerStyle, !isVisible && styles.pointerEventsNone]}

is 0.

• So, the Copilot modal is not applied an additional paddingBottom style to make sure it is not overlaped by the 3-button-navigation.

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

• In:

App/src/components/AccountSwitcher.tsx

Line 203 in 9975b27

innerContainerStyle={styles.pb0}

Instead of using paddingBottom: 0, we can use: paddingBottom: paddingBottom with the paddingBottom is {paddingBottom} = useStyledSafeAreaInsets()

• This fix will make sure the app is not broken in macos chrome platform.

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

What alternative solutions did you explore? (Optional)

[OfstadC]

Will test this this afternoon

[OfstadC]

I didn't get a chance to test this yet - will tackle on Tuesday when i'm back in office

[melvin-bot]

@OfstadC Whoops! This issue is 2 days overdue. Let's get this updated quick!

[OfstadC]

Not able to reproduce

I tried on 4 different devices with the 3 button navigation and all copilot accounts were visible to select

[ChavdaSachin]

I was able to repro this with 6 copilots and pixel 6 emulator

[izarutskaya]

Reproducible in latest build v9.0.76-12

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

@ChavdaSachin 's Proposal looks good and worked well while testing; let's go with it.

@daledah's Proposal looks good, previously selected proposal has an issue with scrollView's bottom padding style

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @youssef-lr, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[daledah]

@jayeshmangwani The selected solution will break the UI in web, which was added via commit on purpose. Could you help check again?

Before	After

[jayeshmangwani]

@daledah I couldn’t see much of a difference locally. I applied the suggested changes and reviewed it again, but I’m unsure what major differences to look for. Could you add a comparison video for clarity?

[daledah]

I couldn’t see much of a difference locally. I applied the suggested changes and reviewed it again, but I’m unsure what major differences to look for

In the latest main branch, the ScrollView includes a bottom padding style (we move the padding bottom to the scroll view in past PR), but this style is missing after applying the selected solution. You can see the different in my images above.

[jayeshmangwani]

You can see the different in my images above.

I can’t see the difference locally; could you add a full video instead of just a cropped screenshot?

[daledah]

@jayeshmangwani Here is video:

• Before:

Screen.Recording.2024-12-20.at.14.39.04.mov

• After:

Screen.Recording.2024-12-20.at.14.38.32.mov

[jayeshmangwani]

@daledah Are you sure you’ve applied these changes?
I’ve tried a few times, and it’s working fine for me.

[melvin-bot]

@youssef-lr, @OfstadC, @jayeshmangwani Eep! 4 days overdue now. Issues have feelings too...

[jayeshmangwani]

There are a few updates on the Slack thread, and it looks like Chris is handling all similar issues. Tagging you, @chrispader, so you can track this issue while addressing the translucent issue holistically.

[melvin-bot]

@youssef-lr, @OfstadC, @jayeshmangwani Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@youssef-lr, @OfstadC, @jayeshmangwani 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@youssef-lr, @OfstadC, @jayeshmangwani 10 days overdue. Is anyone even seeing these? Hello?

[OfstadC]

Any update @jayeshmangwani ? 😃

[jayeshmangwani]

@chrispader, is there an ongoing PR for these Slack changes that we can track?

[melvin-bot]

@youssef-lr, @OfstadC, @jayeshmangwani Eep! 4 days overdue now. Issues have feelings too...

[jayeshmangwani]

@mountiny, I’m tagging you here based on the Slack thread about fixing the bottom padding for Android.

Do you have any idea which PR is tackling the 3-button navigation issue? I see this PR, but it’s been in draft for a month

[jayeshmangwani]

@OfstadC, can we please make this Issue weekly until we know, for which PR we’re waiting on?

[mountiny]

@jayeshmangwani That is correct PR I think, Margelo had limited hours, but I hope they can speed things up now

[OfstadC]

Thanks @mountiny - i'll leave this is Daily for now unless you think it should be moved to weekly 😃

[melvin-bot]

@youssef-lr, @OfstadC, @jayeshmangwani Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[jayeshmangwani]

Monitoring this PR #55633 , same as last update #53842 (comment)

[melvin-bot]

@jayeshmangwani Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jayeshmangwani]

No new updates on the PR from this update.

[melvin-bot]

@jayeshmangwani Huh... This is 4 days overdue. Who can take care of this?

[jayeshmangwani]

Unfortunately, no new updates here 😄.