refactor: migrate NavigationProvider and MainFlow to native stack

[weitingsun]

Description

This PR continues the incremental migration from @react-navigation/stack (JS stack) to @react-navigation/native-stack, working from the outside in. It updates the two outermost navigators that wrap the rest of the app:

NavigationProvider — root navigation container wrapper
MainFlow (app/components/Nav/Main/index.js) — stack that hosts the main app shell and ReviewModal

Changelog

CHANGELOG entry:null

Related issues

Fixes:https://consensyssoftware.atlassian.net/browse/MCWP-631

Manual testing steps

Feature: Native stack migration for outer navigators
  
Scenario: App launches and main navigation works
    Given the app is built from this branch
    And the user is logged in with an existing wallet
    When the user opens the app
    Then the wallet home screen loads without navigation errors
    And the bottom tab bar is visible and tappable
    When the user switches between Wallet, Explore, Trade, Activity, and Rewards tabs
    Then each tab loads its expected screen
    And no visual glitches or blank screens appear during tab switches
  
Scenario: Deep navigation from wallet still works
    Given the user is on the Wallet tab
    When the user opens the account selector, settings, or send/receive flows
    Then screens push and dismiss normally
    And back navigation returns to the wallet home screen
  
Scenario: ReviewModal renders correctly on native stack (optional)
    Given the user can navigate to ReviewModal (e.g. via dev tooling or ReviewManager fallback path)
    When ReviewModal is presented
    Then the modal overlay covers the full screen including the status bar area
    And the underlying app content is visible through the dimmed overlay
    And the modal dismisses when the user closes it

Screenshots/Recordings

BEFORE	AFTER

Android after:
https://github.com/user-attachments/assets/2ce8fa2c-2c89-46cd-b9da-302adb09ee22

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.

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
  • See trace() for usage and addToken for an example

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.

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeIdentity, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeSwap, SmokeStake, SmokeWalletPlatform, SmokeMoney, SmokePerps, SmokeMultiChainAPI, SmokePredictions, SmokeSeedlessOnboarding, SmokeBrowser, SmokeSnaps
• Selected Performance tags: @PerformanceLaunch, @PerformanceLogin, @PerformanceOnboarding
• Risk Level: high
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
These changes migrate the root navigation infrastructure from createStackNavigator (JS-based) to createNativeStackNavigator (native-based) in two critical files:

1. NavigationProvider.tsx — This is the ROOT navigation container for the entire app. Every single screen, modal, and navigation flow passes through this component. Migrating it from JS stack to native stack changes fundamental navigation behavior (animations, gestures, back navigation, modal presentation, screen lifecycle).

2. Main/index.js — This is the MainFlow navigator that wraps the entire main app experience (post-login). It also changes how the ReviewModal is presented (using transparentModalScreenOptions with presentation: 'transparentModal').

Why all tags are selected:

• JS stack vs native stack have different behaviors for: screen transitions, gesture handling, modal overlays, back button behavior, header rendering, and screen mounting/unmounting lifecycle
• The NavigationProvider is the outermost navigator — any regression here breaks ALL navigation in the app
• The MainFlow navigator wraps all post-login screens — any regression here breaks ALL authenticated flows
• Modal presentation changes (ReviewModal) could affect overlay rendering across the app
• The initial route name fix ("NavigationProvider" → "NavigationChildren") in NavigationProvider could affect initial render behavior
• These are not cosmetic changes — they change the underlying navigation engine

Every feature area (accounts, confirmations, identity, networks, swaps, staking, browser, snaps, etc.) relies on navigation working correctly. A regression in the root navigator would manifest across all test suites. Conservative approach is warranted here.

Performance Test Selection:
Migrating from JS-based stack navigator to native stack navigator in the root NavigationProvider and MainFlow could impact app launch time, login/unlock flow performance, and onboarding flow performance. The native stack navigator has different rendering characteristics and screen lifecycle management compared to the JS stack, which could affect time-to-interactive metrics for these critical flows. @PerformanceLaunch is relevant because NavigationProvider is initialized at app start. @PerformanceLogin is relevant because the login flow navigates through the MainFlow navigator. @PerformanceOnboarding is relevant because onboarding flows pass through the NavigationProvider root.

View GitHub Actions results

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

❌ 1 test failed · 11 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

❌ Failed Tests (1)

@metamask-onboarding-team

Test	Platform	Device	Reason	Recording
Onboarding Import SRP with +50 accounts, SRP 3	Android	Google Pixel 8 Pro (v14.0)	Test error	📹 Watch

✅ Passed Tests (10)

Test	Platform	Device	Duration	Team	Recording
Cold Start: Measure ColdStart To Login Screen	Android	Google Pixel 8 Pro (v14.0)	3.22s	@metamask-mobile-platform	📹 Watch
Asset View, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	2.95s	@assets-dev-team	📹 Watch
Measure Warm Start: Login To Wallet Screen	Android	Google Pixel 8 Pro (v14.0)	1.39s	@metamask-mobile-platform	📹 Watch
Connect to Uniswap dapp, edit accounts, choose another account, and skip Solana popup	Android	Google Pixel 8 Pro (v14.0)	19.80s	@metamask-mobile-platform	📹 Watch
Measure Warm Start: Warm Start to Login Screen	Android	Google Pixel 8 Pro (v14.0)	0.73s	@metamask-mobile-platform	📹 Watch
Measure Cold Start To Onboarding Screen	Android	Google Pixel 8 Pro (v14.0)	3.45s	@metamask-mobile-platform	📹 Watch
Cold Start after importing a wallet	Android	Google Pixel 8 Pro (v14.0)	0.61s	@metamask-mobile-platform	📹 Watch
Account creation after fresh install	Android	Google Pixel 8 Pro (v14.0)	3.31s	@metamask-onboarding-team	📹 Watch
Seedless Onboarding: Apple Login New User	Android	Google Pixel 8 Pro (v14.0)	12.59s	@metamask-onboarding-team	📹 Watch
Seedless Onboarding: Google Login New User	Android	Google Pixel 8 Pro (v14.0)	10.56s	@metamask-onboarding-team	📹 Watch

---

Branch: wsun/migrate-NavigationProvider-to-native-stack · Build: Normal · Commit: 864cdbe · View full run