chore: migrate React Navigation to v6#26691
Conversation
|
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. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #26691 +/- ##
==========================================
+ Coverage 82.52% 82.59% +0.06%
==========================================
Files 4800 4829 +29
Lines 123748 123971 +223
Branches 27576 27614 +38
==========================================
+ Hits 102122 102391 +269
+ Misses 14567 14527 -40
+ Partials 7059 7053 -6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Resolved modify/delete conflict by accepting main's deletion of app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap Made-with: Cursor
Add mock for @metamask/geolocation-controller module which was causing multiple test suites across all shards to fail with "Cannot find module" error. This mock provides the GeolocationApiService class and Env enum required by geolocation-api-service-init.ts. Made-with: Cursor
Update snapshots for React Navigation v6 migration changes in shard 1. The navigation component structure has changed, requiring snapshot updates. Made-with: Cursor
Update snapshots for React Navigation v6 migration changes in shard 2. Also add performance tests to testPathIgnorePatterns to prevent Playwright tests from being run by Jest. Made-with: Cursor
Update snapshots for React Navigation v6 migration changes in shard 3. Also enhance GeolocationController mock with getDefaultGeolocationControllerState, GeolocationController class, and UNKNOWN_LOCATION constant. Made-with: Cursor
Update snapshots for React Navigation v6 migration changes in shard 4. Made-with: Cursor
Update snapshots and fix React Navigation v6 API changes: - UnsupportedRegionModal.test.tsx: Replace dangerouslyGetParent with getParent - NavbarTitle/index.test.js: Add useNavigation mock for React Navigation v6 Made-with: Cursor
Update snapshots and fix React Navigation v6 API changes: - Quotes.test.tsx: Replace dangerouslyGetParent with getParent Made-with: Cursor
- Exclude view tests (*.view.test.*) from regular unit tests in jest.config.js (they run with jest.config.view.js separately) - ConfigurationModal.test.tsx: Add nested getParent mock for React Navigation v6 Made-with: Cursor
Update snapshots for React Navigation v6 migration changes in shard 9. Made-with: Cursor
Update snapshots and fix GeolocationController mock: - Add complete state structure (status, lastFetchedAt, error) - Update initial-background-state.json with correct isEligible value for PerpsController Made-with: Cursor
…-v6-migration Made-with: Cursor # Conflicts: # app/components/UI/Rewards/Views/OndoCampaignDetailsView.tsx
…om/MetaMask/metamask-mobile into feat/react-navigation-v6-migration Made-with: Cursor # Conflicts: # app/components/UI/Rewards/Views/OndoCampaignDetailsView.tsx
| @@ -1,978 +0,0 @@ | |||
| import { act, fireEvent } from '@testing-library/react-native'; | |||
| @@ -28,25 +28,28 @@ const clearStackNavigatorOptions = { | |||
| animationEnabled: false, | |||
| }; | |||
|
|
|||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |||
| type ScreenComponent = React.ComponentType<any>; | |||
There was a problem hiding this comment.
@asalsys Is there a cleaner way to go about this instead of asserting in every routes file? If we absolutely want assertions in all routes files could we create a shared type instead of redefining it?
There was a problem hiding this comment.
Yes the I have a follow up PR for stake: #28108. Since this PR is getting too big I didn't want to have it do addition typing
mcmire
left a comment
There was a problem hiding this comment.
Core Platform team changes look good, let me know when you need another approval.
|
Are we not doing any before and after videos for such a big PR ? I would definitely like to see some for the Ramps flow before approving. |
…-v6-migration Made-with: Cursor # Conflicts: # app/components/Nav/Main/MainNavigator.js # app/components/Nav/Main/MainNavigator.test.tsx # app/components/UI/Predict/views/PredictBuyWithAnyToken/PredictBuyWithAnyToken.test.tsx # app/components/UI/Ramp/Aggregator/Views/Modals/Settings/__snapshots__/SettingsModal.test.tsx.snap # app/components/UI/Ramp/Deposit/Views/Modals/ConfigurationModal/ConfigurationModal.test.tsx # app/components/UI/Ramp/Deposit/Views/Modals/ConfigurationModal/__snapshots__/ConfigurationModal.test.tsx.snap # app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap # app/components/UI/Ramp/Views/Modals/ErrorDetailsModal/__snapshots__/ErrorDetailsModal.test.tsx.snap # app/components/UI/Ramp/Views/Modals/SettingsModal/__snapshots__/SettingsModal.test.tsx.snap # app/components/UI/Ramp/Views/Settings/RegionSelector/__snapshots__/RegionSelector.test.tsx.snap # app/components/UI/Ramp/Views/TokenSelection/__snapshots__/TokenSelection.test.tsx.snap # app/components/UI/Ramp/components/EligibilityFailedModal/__snapshots__/EligibilityFailedModal.test.tsx.snap # app/components/UI/Ramp/components/RampUnsupportedModal/__snapshots__/RampUnsupportedModal.test.tsx.snap
@amitabh94 I created a comparison PR that would run different flows of the app and do a visual regression test: https://github.com/MetaMask/metamask-mobile/pull/27385/changes In the above PR you can see all the screenshots throughout the flow. The reason we did not merge the visual regression pr was because the decision on whether or not to switch to maestro was not yet made. In the PR description under after I explain how the before images are to be the same as the after. This PR was also designed to just get an understanding of how the screens would look just for this PR. It can be useful to other PRs but it was not designed to be pushed to prod. |
Ramp-Upgraded-Nav.mov |
|
tylerc-consensys
left a comment
There was a problem hiding this comment.
Approve for screen code changes that is under web3auth
…-v6-migration Made-with: Cursor # Conflicts: # app/components/Views/ProtectWalletMandatoryModal/ProtectWalletMandatoryModal.test.tsx
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 6 total unresolved issues (including 5 from previous reviews).
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
| mode={'modal'} | ||
| initialRouteName={'Home'} | ||
| > | ||
| <Stack.Screen name="Home" component={HomeTabs} /> |
There was a problem hiding this comment.
Home screen reordered changes initial render in MainNavigator
Medium Severity
The Home screen was moved from after CollectiblesDetails/DeprecatedNetworkDetails to being the first Stack.Screen child. In React Navigation v6, the first screen in a stack is treated as the initial screen when no initialRouteName matches. While initialRouteName={'Home'} is set, the screen ordering change combined with the removal of mode={'modal'} means CollectiblesDetails and DeprecatedNetworkDetails now only get presentation: 'modal' individually, but many other screens in this navigator (like Send, Webview, AddBookmarkView, OfflineModeView, NftDetails, etc.) that previously inherited modal presentation from mode={'modal'} no longer present as modals.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
Since the TabBar and MainNavigator are shared infrastructure used by ALL tests, and multiple route files were changed across all feature areas, running all available test tags is the appropriate conservative approach. The navigation changes alone justify running all tags since any navigation regression would affect every test suite. Tag dependencies satisfied:
Performance Test Selection: |
|
|
✅ E2E Fixture Validation — Schema is up to date |
Description
This PR migrates React Navigation from v5 to v6. This is a significant infrastructure update that modernizes the navigation layer of the application to align with the latest React Navigation best practices and removes deprecated APIs.
Why this change?
@react-navigation/compatpackageWhat changed?
mode="modal"prop on NavigatorscreenOptions={{ presentation: 'modal' }}headerMode="screen"propheaderMode="none"propscreenOptions={{ headerShown: false }}dangerouslyGetParent()getParent()dangerouslyGetState()getState()NavigationContainerRefNavigationContainerRef<ParamListBase>Dependencies updated:
@react-navigation/bottom-tabs:^5.11.11→^6.6.1@react-navigation/native:^5.9.4→^6.1.18@react-navigation/stack:^5.14.5→^6.4.1@react-navigation/compat(deprecated v5 compatibility package)Changelog
CHANGELOG entry: null
Related issues
fixes: React Navigation v6 Migration
Manual testing steps
Screenshots/Recordings
Before
N/A - No visual changes expected
After
No visual changes expected. To ensure that the ui has not changed #27385 was created to view the comparison of ui through the flow via visual regression
Pre-merge author checklist
Pre-merge reviewer checklist
Note
High Risk
Touches core navigation structure and presentation settings across many stacks/modals, so regressions could break routing, back behavior, or modal/sheet presentation. Changes also alter theming/background handling, which can cause subtle UI layering issues.
Overview
Updates app navigation to React Navigation v6 patterns by removing deprecated navigator props like
modeand moving modal behavior toscreenOptions.presentation(and related per-screen options), while centralizingclearStackNavigatorOptionsand adjusting many flows (App, MainNavigator, RootModalFlow, rewards/browser/etc.) to set appropriatecardStylebackgrounds.Refactors navigation typings (e.g.,
TabBarProps/descriptors andNavigationContainerRef<ParamListBase>), hardensTabBaragainst missing descriptors, and expands unit tests/snapshots to cover tab visibility/callbacks/on-leave behavior plus broad route/screen registration validation. NavigationContainer theme background is set totransparentto support transparent modals, shifting responsibility for background color to screens.Written by Cursor Bugbot for commit b6a3bcb. This will update automatically on new commits. Configure here.