[Due for payment 2026-06-30] [Due for payment 2026-06-29] Rules - Currency mismatch modal flickers

[applause-bot]

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.4.16-1
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #93063
Email or phone of affected tester (no customers): applausetester+bm889072@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: android
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Enable expensify cards & rules
3. Go to Rules
4. Add Spend Rules > Click on Permitted Currencies (might need to click a few times)

Expected Result:

The currency mismatch modal should open smoothly without flickering.

Actual Result:

The currency mismatch modal flickers.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7185726_1781893009256.1.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Nathan Lemma
Bug ID: 7185726

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/021ee6cc44cefc470ba27c3e99647efc9393e19ce81130a61f45d36219e708c8

[melvin-bot]

@luacmartins recently merged #93063, but they are OOO right now, so I'll auto-assign someone else.

[melvin-bot]

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

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

[MelvinBot]

Proposal

What is the root cause of that problem?

The "currency mismatch" modal is the global confirm modal opened by openCurrenciesCurrencyMismatchModal, triggered from the Permitted Currencies menu item via chooseCurrencies when no shared settlement currency is found (e.g. no cards selected yet).

The flicker is a modal remount on repeated taps, which is exactly why the repro note says "might need to click a few times":

1. The Permitted Currencies row is a MenuItemWithTopDescription with a plain onPress={chooseCurrencies} and no singleExecution/throttle — onPress fires on every tap.
2. showConfirmModal is called without an id, so each tap pushes a brand-new modal onto the global stack with a fresh incrementing id (modalID = id ?? String(modalIDRef.current++)).
3. The provider renders only the top modal, keyed by that id: key={modalToRender.id}. A second tap changes the key, so React unmounts the in-flight ConfirmModalWrapper and mounts a new one, re-running the entrance animation while the previous one is torn down → visible flicker (most noticeable on Android).

A single tap keeps the key stable ("1") and animates in smoothly; multiple taps are what produce the flicker. This is a regression introduced by #93063 (new feature). The same pattern also affects openMaxAmountCurrencyMismatchModal.

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

Pass a stable id to showConfirmModal for both currency-mismatch modals. The global modal system is designed to dedupe by id: when an id is supplied, showModal updates the existing modal in place instead of appending a new one, so the React key stays constant and the modal no longer remounts/flickers on repeated taps.

• Give openCurrenciesCurrencyMismatchModal a constant id (e.g. id: 'spendRuleCurrenciesCurrencyMismatch') and openMaxAmountCurrencyMismatchModal its own (e.g. id: 'spendRuleMaxAmountCurrencyMismatch').

What alternative solutions did you explore? (Optional)

• Guard re-entry by passing singleExecution/debouncing the menu item's onPress (or early-returning while a modal is already open). This also stops the flicker but the id approach is the system's intended dedup mechanism and is more localized.

Confidence & verification

Medium–High. The full chain is traced in code (no tap throttle → no id → incrementing modal id → keyed remount). Not yet runtime-verified that react-native-modal visibly re-animates on remount on Android, but the "click a few times" repro corroborates the remount mechanism. Worth a quick on-device confirmation after the fix.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/94116) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[Dip-G-Git]

hi