Skip to content

chore: add shared native-stack modal options#29694

Merged
weitingsun merged 1 commit into
mainfrom
wsun/replace-js-stack-with-native-stacks
May 7, 2026
Merged

chore: add shared native-stack modal options#29694
weitingsun merged 1 commit into
mainfrom
wsun/replace-js-stack-with-native-stacks

Conversation

@weitingsun

@weitingsun weitingsun commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR introduces two shared NativeStackNavigationOptions presets in clearStackNavigatorOptions.ts:

Perps already uses createNativeStackNavigator, but several screens repeated the same option blobs (presentation: 'transparentModal', transparent contentStyle, animation: 'none', headerShown: false) inline. That duplicated the JS-stack clearStackNavigatorOptions idea without a typed, reusable native-stack equivalent.

Changelog

CHANGELOG entry:null

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

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.

Note

Medium Risk
Moderate risk because it changes React Navigation option presets for native stacks, which can affect modal presentation, animations, and header behavior across Perps flows.

Overview
Standardizes Perps native-stack overlay behavior by replacing inline presentation: 'transparentModal'/transparent styling with shared presets (transparentModalScreenOptions, clearNativeStackNavigatorOptions).

Adds native-stack equivalents of the existing clear JS-stack options in clearStackNavigatorOptions.ts, and updates Perps screens (TP/SL, close-position/bottom-sheet stacks, and pay-with modal) to use these presets for consistent transparent modals without unwanted animations.

Reviewed by Cursor Bugbot for commit 3a0cec5. Bugbot is set up for automated code reviews on this repo. Configure here.

@weitingsun weitingsun requested a review from a team as a code owner May 5, 2026 00:20
@github-actions

github-actions Bot commented May 5, 2026

Copy link
Copy Markdown
Contributor

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.

@weitingsun weitingsun marked this pull request as draft May 5, 2026 00:21
@metamaskbotv2 metamaskbotv2 Bot added the team-mobile-platform Mobile Platform team label May 5, 2026
@github-actions github-actions Bot added the size-S label May 5, 2026
@github-actions

github-actions Bot commented May 5, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
  • Selected Performance tags: @PerformancePreps
  • Risk Level: medium
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes two related changes:

  1. clearStackNavigatorOptions.ts (additive only): Adds two new exported constants — clearNativeStackNavigatorOptions (native-stack equivalent of the existing JS-stack options) and transparentModalScreenOptions (encapsulates presentation: 'transparentModal'). No existing exports are modified, so all other importers (Ramp, Bridge, Earn, Stake, Predict, Card, Money, MainNavigator, App) are unaffected.

  2. app/components/UI/Perps/routes/index.tsx (refactoring): Replaces inline navigation options with the new shared constants across several Perps screens (TPSL, CLOSE_POSITION_MODALS, ROOT modal stack, PayWithModal, and confirmation header). The net behavior is functionally equivalent — same presentation: 'transparentModal', headerShown: false, contentStyle: { backgroundColor: 'transparent' }, animation: 'none' values. This is a code quality improvement.

Risk is medium because navigation presentation changes (especially transparentModal overlays) can have subtle platform-specific rendering differences on iOS vs Android, even when the options appear equivalent. The Perps modal stack and bottom sheet flows need validation.

Tags selected:

  • SmokePerps: Directly covers Perps flows affected by the navigation route refactoring (Add Funds, balance verification, multi-account setups)
  • SmokeWalletPlatform: Required by SmokePerps description — Perps is a section inside the Trending tab
  • SmokeConfirmations: Required by SmokePerps description — Add Funds deposits are on-chain transactions that go through confirmations

Performance Test Selection:
The Perps route changes affect modal presentation and navigation options for the Perps screen stack. While this is primarily a refactoring, changes to navigation presentation (transparentModal overlays, animation settings) can subtly affect rendering performance in the Perps flow. @PerformancePreps covers perps market loading, position management, add funds flow, and order execution — all of which go through the modified navigation routes.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented May 5, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@weitingsun weitingsun changed the title chore: replace js navigation stacks with native stacks chore: add shared native-stack modal options May 5, 2026
@weitingsun weitingsun marked this pull request as ready for review May 5, 2026 20:02
@weitingsun weitingsun added this pull request to the merge queue May 7, 2026
Merged via the queue into main with commit 73eaaf0 May 7, 2026
143 of 148 checks passed
@weitingsun weitingsun deleted the wsun/replace-js-stack-with-native-stacks branch May 7, 2026 01:18
@github-actions github-actions Bot locked and limited conversation to collaborators May 7, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 7, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@gambinish gambinish gambinish approved these changes

Assignees

No one assigned

Labels

release-7.77.0 Issue or pull request that will be included in release 7.77.0 size-S team-mobile-platform Mobile Platform team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@weitingsun @gambinish