chore(runway): cherry-pick fix(navigation): use transparentModal presentation for all feature modal stacks cp-7.73.0

[runway-github]

• fix(navigation): use transparentModal presentation for all feature modal stacks cp-7.73.0 (fix(navigation): use transparentModal presentation for all feature modal stacks cp-7.73.0 #28630)

Description

The EarnModalStack was recently updated to use
clearStackNavigatorOptions spread with presentation: 'transparentModal' in both the route file screenOptions and the
MainNavigator.js screen options. This PR applies the same consistent
pattern to the remaining feature modal stacks:

• BridgeModalStack (app/components/UI/Bridge/routes.tsx):
  presentation: 'modal' → 'transparentModal'
• StakeModalStack (app/components/UI/Stake/routes/index.tsx):
  presentation: 'modal' → 'transparentModal'
• PerpsModalStack (app/components/UI/Perps/routes/index.tsx):
  replaced inline custom screenOptions (with bespoke
  cardStyleInterpolator) with the shared clearStackNavigatorOptions
  spread + presentation: 'transparentModal'; also added missing
  presentation: 'transparentModal' to the MainNavigator.js screen
  entry
• PredictModalStack
  (app/components/UI/Predict/routes/index.tsx): replaced inline
  headerShown/cardStyle options with the shared
  clearStackNavigatorOptions spread; reordered MainNavigator.js screen
  entry so presentation overrides the spread (consistent with Earn)

This ensures all feature modal stacks use the same transparent overlay
presentation style and reduces per-stack boilerplate in favour of the
shared clearStackNavigatorOptions constant.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Feature modal stacks transparent overlay presentation

  Background:
    Given I am logged into MetaMask Mobile

  Scenario: Bridge modal overlays render transparently
    Given I am on the Bridge screen

    When a modal (e.g. slippage, network list, price impact) is triggered
    Then the modal appears as a transparent overlay over the existing screen
    And the background content remains visible behind the modal

  Scenario: Stake modal overlays render transparently
    Given I am on the Stake screen

    When a modal (e.g. learn more, max input, gas impact) is triggered
    Then the modal appears as a transparent overlay
    And the background content remains visible

  Scenario: Perps modal overlays render transparently
    Given I am on the Perps screen
    And the Perps feature flag is enabled

    When a modal (e.g. quote expired, GTM, close all positions) is triggered
    Then the modal appears as a transparent overlay
    And the background content remains visible

  Scenario: Predict modal overlays render transparently
    Given I am on the Predict screen
    And the Predict feature flag is enabled

    When a modal (e.g. unavailable, GTM, add funds) is triggered
    Then the modal appears as a transparent overlay
    And the background content remains visible

Screenshots/Recordings

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor
  Docs and MetaMask Mobile
  Coding
  Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format
  if applicable
• I've applied the right labels on the PR (see labeling
  guidelines).
  Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the
  app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described
  in the ticket it closes and includes the necessary testing evidence such
  as recordings and or screenshots.

Made with Cursor

---

Note

Medium Risk
Changes React Navigation modal presentation across multiple feature
stacks; risk is mainly UI/UX regressions (overlay behavior, gestures,
stacking) in Bridge/Stake/Perps/Predict flows.

Overview
Standardizes feature modal navigation to use transparent overlays.
Bridge, Stake, Earn, Perps, and Predict modal stacks now use
presentation: 'transparentModal' (instead of 'modal') and
consistently apply shared clearStackNavigatorOptions.

Reduces per-stack boilerplate and aligns MainNavigator options.
Inline modal screenOptions in Perps/Predict are replaced with the
shared options, MainNavigator sets transparentModal for the
corresponding modal-root screens, and snapshots are updated accordingly.

^{Reviewed by Cursor Bugbot for commit
edc0046. Bugbot is set up for automated
code reviews on this repo. Configure
here.}

[495414e](https://github.com/MetaMask/metamask-mobile/commit/495414e68e261dbc344edb3ed89dffa42a1d27db)

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[chloeYue]

LGTM

[github-actions]

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - skip-smart-e2e-selection label found

All E2E tests pre-selected.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details