refactor(MainNavigator): migrate multi-screen leaf flows to native-stack + HeaderStandard#30956
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. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #30956 +/- ##
=======================================
Coverage 82.77% 82.77%
=======================================
Files 5584 5585 +1
Lines 144075 144088 +13
Branches 33332 33348 +16
=======================================
+ Hits 119254 119276 +22
+ Misses 16874 16859 -15
- Partials 7947 7953 +6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit e711f66. Configure here.
| /> | ||
| </Stack.Navigator> | ||
| <NativeStack.Screen name="OptinMetrics" component={OptinMetrics} /> | ||
| </NativeStack.Navigator> |
There was a problem hiding this comment.
ManualBackupStep3 loses native header
Medium Severity
SetPasswordFlow now uses NativeStack.Navigator with screenOptions={{ headerShown: false }}, but ManualBackupStep3 still configures its MetaMask logo bar only via navigation.setOptions(getTransparentOnboardingNavbarOptions(...)), which never sets headerShown: true. The step’s top branding header no longer appears in the password/backup flow.
Reviewed by Cursor Bugbot for commit e711f66. Configure here.
There was a problem hiding this comment.
This branding header was never there before due to the following code in OnboardingSuccess
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [navigation]);
…om:MetaMask/metamask-mobile into wsun/main-navigator-multi-screen-leaf-flow
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: This PR is a navigation architecture migration (PR3 of a native-stack migration series) that touches several critical navigation flows:
The navigation stack migration is high-risk because NativeStack behaves differently from Stack (different gesture handling, header rendering, animation behavior), and these changes span multiple critical user flows. Back navigation, header visibility, and screen transitions could all be affected. Tags NOT selected:
Performance Test Selection: |
Description
This PR migrates the multi-screen leaf flow navigators in MainNavigator from JS Stack to NativeStack, and replaces the old JS-navbar (getOnboardingNavbarOptions / getEditableOptions via navigation.setOptions) on their screens with in-screen HeaderStandard headers from the design system.
Navigators migrated to NativeStack:
Screens moved to in-screen HeaderStandard:
Other:
Each screen now owns its header (includesTopInset, SafeAreaView edges={{ bottom: 'additive' }}), so behavior is identical whether the screen is reached via the migrated NativeStack flow or the legacy SettingsFlow JS stack (which now passes headerShown: false).
Changelog
CHANGELOG entry:null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Notifications
Explore
Browser
Password
Android test build: https://github.com/MetaMask/metamask-mobile/actions/runs/26853788206
Android screen recordings:
https://github.com/user-attachments/assets/4037a245-1ad3-412f-9415-e9e49804559a
https://github.com/user-attachments/assets/225ea7b8-f08a-4d34-8324-7bac724397d2
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an exampleFor performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Medium Risk
Touches wallet backup, password, and SRP flows where header/back behavior and safe-area layout matter; changes are mostly presentational but span onboarding and settings entry points.
Overview
This PR continues the native-stack migration for multi-screen leaf flows in
MainNavigatorand moves headers off React Navigation’s JS stack into in-screenHeaderStandard(and related safe-area tweaks).Navigators
BrowserFlow,ExploreHome,NotificationsModeView, andSetPasswordFlownow useNativeStack(cardStyle→contentStyle,animationEnabled: false→animation: 'none'where needed). Flow-levelheaderShown: falseis set so screens own their chrome; backup routes in Settings and onboarding stacks also hide the native header for the same screens.Screens drop
navigation.setOptions/ onboarding navbar helpers in favor ofHeaderStandard:ChoosePassword(back disabled while loading),AccountBackupStep1B(MetaMask logo, no back), conditional header onManualBackupStep1(settings/backup only), headers onManualBackupStep2, navbar removal onManualBackupStep3, andContactForm(title, back viapop(), Edit/Cancel inendAccessory).AccountBackupStep1simplifies safe area (no manual status-bar padding).TrendingViewusesHeaderRootwithincludesTopInsetand bottom safe-area edges to fix double top inset.Dev/QA:
NavigationDevPaneladds PR3 flow groups and mock nestedSetPasswordFlowparams (including a valid 12-word test mnemonic). Tests assert in-screen headers instead ofsetOptions.Reviewed by Cursor Bugbot for commit 009549c. Bugbot is set up for automated code reviews on this repo. Configure here.