Web - Expense - Currency RHP opens without animation

[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.3.79-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #90212
Email or phone of affected tester (no customers): sdsdjoijdoisnjodis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Open FAB > Create expense > Manual.
3. Click Currency.

Expected Result:

Currency RHP will open with animation.

Actual Result:

Currency RHP opens without animation.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7160196_1779409191106.9.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7160196

Issue Owner

Current Issue Owner: @parasharrajat

Issue Owner

Current Issue Owner: @parasharrajat

[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/c3dc9f768906d04fd9c21a82a6a814ef6d1517cc08690bf6fb8a4c937eed4c04

[melvin-bot]

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

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

PR #90212 changed the default web animation timing (DEFAULT_IN) from 300ms to 1ms (src/libs/Animation/animationTiming/index.ts). The intent was for each navigator to explicitly opt into the new RHP_DURATION_IN_WEB (150ms) / RHP_DURATION_OUT_WEB (100ms) constants via a transitionSpec override.

The inner RHP modal stack screens correctly received the explicit transitionSpec in useModalStackScreenOptions.ts:58-61. However, the outer rightModalNavigator in useRootNavigatorScreenOptions.ts:43-51 only sets presentation: TRANSPARENT_MODAL and a custom cardStyleInterpolator in its web options — no transitionSpec. While animation: SLIDE_FROM_RIGHT resolves to a config with 150ms via slideFromRight/index.ts, the presentation: 'transparentModal' mode causes React Navigation to apply its own transition preset defaults which depend on the now-1ms DEFAULT_IN, effectively making the RHP appear instantly.

Additionally, the cardStyleInterpolator was changed from CardStyleInterpolators.forHorizontalIOS (full-width slide) to a slide-and-fade with only 60px travel — which would be far subtler even if the timing were correct.

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

Add an explicit transitionSpec to the rightModalNavigator's web options in useRootNavigatorScreenOptions.ts, matching the pattern already used in useModalStackScreenOptions.ts:

web: {
    presentation: Presentation.TRANSPARENT_MODAL,
    cardStyleInterpolator: ...,
    transitionSpec: {
        open: {animation: 'timing', config: {duration: CONST.MODAL.ANIMATION_TIMING.RHP_DURATION_IN_WEB}},
        close: {animation: 'timing', config: {duration: CONST.MODAL.ANIMATION_TIMING.RHP_DURATION_OUT_WEB}},
    },
},

This ensures the rightModalNavigator uses the intended 150ms/100ms durations instead of falling back to the 1ms web default.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[mjasikowski]

@adhorodyski I think this is one for you