[Due for payment 2025-04-03] [$250] Android - Menu - The bottom menu flickers on tapping app's back button from overview page

[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: V9.1.4-0
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
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Left Hand Navigation (LHN)

Action Performed:

1. Launch app
2. Go to workspace settings
3. Tap overview/ members/ categories
4. Tap app's back button

Expected Result:

The bottom menu inbox/reports/settings must not flicker on tapping app's back button from overview/ members/ categories page.

Actual Result:

The bottom menu inbox/reports/settings flickers on tapping app's back button from overview/ members/ categories page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6750624_1740198521104.Screenrecorder-2025-02-22-09-53-30-365.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021893815349803323599
• Upwork Job ID: 1893815349803323599
• Last Price Increase: 2025-03-17
• Automatic offers:
• thelullabyy | Contributor | 106570024

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

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

[huult]

Proposal

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

The bottom menu flickers on tapping app's back button from overview page

What is the root cause of that problem?

This issue was caused by Expensify/App#49539.

When navigating back to a screen that includes the bottom tab, isReadyToDisplayBottomBar is initially false. After the interaction finishes, it updates to true. This change updates the display property from none to flex, which causes the bottom tab bar to flicker.

App/src/components/Navigation/TopLevelBottomTabBar/index.tsx

Line 50 in d372bc2

setIsAfterClosingTransition(true);

App/src/styles/index.ts

Line 581 in cb8aad4

display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none',

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

To resolve this issue, we use opacity instead of display. By adjusting the opacity from 0 to 1, the tab bar remains in the layout flow, ensuring smoother transitions without reflows.

App/src/styles/index.ts

Line 581 in cb8aad4

display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none',

update to:

 opacity: shouldDisplayTopLevelBottomTabBar ? 1 : 0,

or

  ...(Platform.OS === 'web'
        ? { display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none' }
        : { opacity: shouldDisplayTopLevelBottomTabBar ? 1 : 0 }),

Screen.Recording.2025-02-22.at.22.49.21.mov

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)

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.

[thelullabyy]

Proposal

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

• The bottom menu inbox/reports/settings flickers on tapping app's back button from overview/ members/ categories page.

What is the root cause of that problem?

• Note: The bottom navigation menu itself does not flicker, but its icons experience a flickering effect.
• The bottom menu is only displayed on specific predefined screens. On other screens, it is hidden by dynamically toggling its display style between 'flex' (visible) and 'none' (hidden):

App/src/styles/index.ts

Line 581 in cb8aad4

display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none',

• Toggling the display style from none to others, in this case is flex can cause the child images:
  

  App/src/components/Navigation/BottomTabBar/index.tsx

  Line 231 in 0b6d1a0

  <Icon

  
  

  App/src/components/Navigation/BottomTabBar/index.tsx

  Line 262 in 0b6d1a0

  <Icon

are reload. Causing a flickering effect where they momentarily disappear before reappearing. This behavior is visible in the OP’s video.

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

• We can take an alternative approach, ensuring that the bottom tab bar is shown and hidden at the appropriate times, rather than relying on the current implementation:

App/src/styles/index.ts

Line 581 in cb8aad4

display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none',

• We can replace:

App/src/styles/index.ts

Line 581 in cb8aad4

display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none',

by:

            opacity: shouldDisplayTopLevelBottomTabBar ? 1 : 0,
            pointerEvents: shouldDisplayTopLevelBottomTabBar ? 'auto' : 'none',

• We can create the separate style for web and native. Since the bug only appears in native, the above changes should only apply to native.

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

• N / A

What alternative solutions did you explore? (Optional)

• We can replace:

App/src/styles/index.ts

Line 581 in cb8aad4

display: shouldDisplayTopLevelBottomTabBar ? 'flex' : 'none',

by:

            opacity: shouldDisplayTopLevelBottomTabBar ? 1 : 0,
            height: shouldDisplayTopLevelBottomTabBar ? 'auto' : 0,

[melvin-bot]

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

[melvin-bot]

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

[gurus00]

Proposal

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

The bottom menu flickers on tapping app's back button from overview page

What is the root cause of that problem?

The bottom menu is shown on specific predefined screens. It has incorrect display style between flex and none when it's toggling.

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

We can take an alternative approach, ensuring that the bottom tab bar is shown and hidden at the appropriate times, rather than relying on the current implementation:

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

N/A

What alternative solutions did you explore? (Optional)