[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 [email protected] 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)

[melvin-bot]

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

[Ollyws]

I don't really like the idea of just setting the opacity to zero as the bar will still be there, I think the question is why are the child items seemingly re-rending again after the initial layout?

[linhvovan29546]

Proposal

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

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

What is the root cause of that problem?

When navigating to the workspace overview, the bottom tab is hidden, and it is redisplayed when returning to the workspace settings based on the following condition:

App/src/styles/index.ts

Line 575 in 22e7d27

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

This condition was introduced in software-mansion-labs#172 to fix the issue of the bottom tab blinking.

The flickering issue occurs because when the display style changes between flex and none, leading to the Icon source reloads, causing UI flickering.

App/src/components/ImageSVG/index.ios.tsx

Line 12 in 5a8a260

source={src as ImageSourcePropType}

I think this is a bug related to expo-image, as the issue does not occur when using Image from react-native.

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

I'm not sure whether this behavior in expo-image is expected or a bug. We may need to open an issue in the Expo GH repository.

For a fix, we can use the transform style from this PR to hide the bottom tab instead of using the display property.

Note

I have tested approach across the app and did not experience any flickering issues. We should confirm with the author of that PR what specific problem it resolved before proceeding with the fix.

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

No, UI bug

What alternative solutions did you explore? (Optional)

N/A

[Ollyws]

@linhvovan29546 I think that's going in the right direction but won't using the transform style again re-introduce the blinking that software-mansion-labs#172 fixed?

[linhvovan29546]

I’m not sure what issue that PR fixed, so we should confirm with the author which specific problem it addressed.

[thelullabyy]

I think the question is why are the child items seemingly re-rending again after the initial layout?

@Ollyws As I mentioned in my proposal, only the image is reloaded, the parent component is not re-rendered:

Note: The bottom navigation menu itself does not flicker, but its icons experience a flickering effect.

Toggling the display style from none to others, in this case is flex can cause the child images:
are reload. Causing a flickering effect where they momentarily disappear before reappearing. This behavior is visible in the OP’s video.

[Ollyws]

I’m not sure what issue that PR fixed, so we should confirm with the author which specific problem it addressed.

Well it seems to me that the removal of the transform was integral to fixing that issue, but maybe @adamgrzybowski could chime in here.

[huult]

My proposal has mentioned the PR that caused this issue, and I believe @adamgrzybowski will be able to confirm or ask C+. cc @Ollyws

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@Ollyws Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@Ollyws Eep! 4 days overdue now. Issues have feelings too...

[huult]

@Ollyws, Asking @adamgrzybowski @shubham1206agra , waiting for their response.

[melvin-bot]

@Ollyws Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 @thelullabyy 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.19-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Menu - The bottom menu flickers on tapping app's back button from overview page #58700

If no regressions arise, payment will be issued on 2025-04-03. 🎊

For reference, here are some details about the assignees on this issue:

• @Ollyws requires payment through NewDot Manual Requests
• @thelullabyy requires payment automatic offer (Contributor)

[melvin-bot]

@Ollyws @MitchExpensify @Ollyws The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[MitchExpensify]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment:

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

Test:

Do we agree 👍 or 👎

[MitchExpensify]

Payment summary

• $250 @Ollyws requires payment through NewDot Manual Requests
• $250 @thelullabyy requires payment automatic offer (Contributor)

[Ollyws]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/49539/files#r2026781106

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue: https://github.com/Expensify/Expensify/issues/488530

Regression Test Proposal

Precondition:

Test:

1. Launch app
2. Go to workspace settings
3. Tap overview/ members/ categories
4. Tap app's back button
5. Verify: The bottom menu inbox/reports/settings not flicker on tapping app's back button from overview/ members/ categories page

Do we agree 👍 or 👎

[Ollyws]

Requested in ND.

[MitchExpensify]

Paid! All that remains is @Ollyws 's ND payment so closing

[garrettmknight]

$250 approved for @Ollyws