[Due for payment 2026-05-20] Web - Search - After closing "Search" RHP. chats are briefly visible on top of screen again.

[jponikarchuk]

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.3.73-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #90358
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11 / Chrome
App Component: Search

Action Performed:

1. Open the staging.new.expensify.com website,
2. Navigate to "Inbox"
3. Click on the search icon on the top right corner.
4. Close "Search" RHP by clicking outside of it or pressing "ESC" on keyboard.
5. Note that after RHP is closed, chats reappear briefly on top of screen where RHP was displayed.

Expected Result:

RHP modal should be dismissed correctly without any flickering after clicking outside of it or pressing "ESC" on keyboard.

Actual Result:

After closing "Search" RHP by clicking outside of it ot pressing "ESC" on keyboard, chats from list are briefly visible again on top of the screen where RHP was displayed.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @abzokhattab

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #90358

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #90358 - "Refactor ReanimatedModal/index.tsx to follow Rules of React and compile with React Compiler" by @roryabraham (High confidence)
Related Issues: #68765 (partial fix referenced in PR)

Recommendation: REVERT

The PR introduced a regression in the modal close animation by removing the isVisibleState state variable, which now causes the container children to be unmounted immediately when isVisible becomes false, while the modal shell remains visible during the exit animation — producing visible flickering on web.

Assigned: @roryabraham (PR author), @abzokhattab (approving reviewer), @carlosmiceli (approving reviewer)
Labels: DeployBlockerCash kept (frontend App PR caused this issue). No label changes made.

Detailed Analysis

Evidence

• The issue is staging-only (version 9.3.73-0), not reproducible on production — consistent with a staging-only PR regression.
• melvin-bot automatically assigned PR [Payment due @abzokhattab] Refactor ReanimatedModal/index.tsx to follow Rules of React and compile with React Compiler #90358 as the causing PR.
• PR [Payment due @abzokhattab] Refactor ReanimatedModal/index.tsx to follow Rules of React and compile with React Compiler #90358 is the only PR in the current StagingDeployCash that touches src/components/Modal/ReanimatedModal/index.tsx.
• The bug manifests as chat list content briefly appearing over the area where the Search RHP was displayed after dismissal — a classic modal close animation artifact.

Verification

• Affected file: src/components/Modal/ReanimatedModal/index.tsx
• PR [Payment due @abzokhattab] Refactor ReanimatedModal/index.tsx to follow Rules of React and compile with React Compiler #90358 modifies exactly this file (63 additions, 89 deletions — the only file changed).
• The PR merged at 2026-05-13T00:08:25Z and the issue was reported on 2026-05-13, consistent with the timeline.

Root Cause

The refactor eliminated isVisibleState (a one-render-lagged mirror of the isVisible prop) and replaced it with direct use of the isVisible prop throughout the render output.

In the old code, the container children were rendered conditionally on isVisibleState (not isVisible). When the modal was dismissed, isVisible became false first, then isVisibleState followed one render later after the exit animation had already been set in motion. This kept the children mounted during the exit animation.

In the new code, {isVisible && containerView} causes the container children to be unmounted immediately when isVisible flips to false. However, modalVisibility = isVisible || isTransitioning evaluates to true at the same moment (because isContainerOpen is still true, making isTransitioning = true). This means the React Native <Modal> wrapper remains visible={true} while the container content is already unmounted — leaving an empty, transparent modal shell briefly over the screen. The underlying LHN/chat list renders through this transparent shell, causing the flicker reported in the issue.

The fix direction is either:

1. Revert the PR to restore the previous behavior.
2. Roll forward with a targeted fix: change {isVisible && containerView} to {(isVisible || isTransitioning) && containerView} so the container stays mounted during the exit animation, matching the intent of the old isVisibleState logic.

Revert is recommended as the safest option given deploy blocker severity.