refactor(predict): use native stack navigators for Predict routes#30151
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. |
…om:MetaMask/metamask-mobile into wsun/change-predict-routes-to-native-stack
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
SmokePredictions: Directly covers the Predict feature — opening positions, cashing out, claiming winnings. The navigation stack refactor could affect how screens transition and whether modals/confirmations appear correctly. SmokeConfirmations: Required per SmokePredictions tag description ("opening/closing positions are on-chain transactions"). The confirmation screens (REDESIGNED_CONFIRMATIONS, NO_HEADER) are explicitly registered in the Predict route stack and their options changed from custom JS-based to hook-based native options. SmokeWalletPlatform: Required per SmokePredictions tag description ("also select SmokeWalletPlatform (Trending section)"). Predictions is a section inside the Trending tab. The risk is medium because this is a navigation refactor (not business logic), but navigation changes can cause subtle regressions in screen transitions, modal presentations, and back navigation behavior. Performance Test Selection: |
|



Description
POC: https://docs.google.com/document/d/1_oDELkGRLUgaAeMs2NSzG9w1UyjsD5VSKQlW7yW5oZU/edit?tab=t.0#heading=h.gba8s4wq9tzu
Android build: https://github.com/MetaMask/metamask-mobile/actions/runs/25829982981
Switches Predict’s main and modal navigators from @react-navigation/stack to @react-navigation/native-stack, aligns modal/confirmation options with other feature stacks (e.g. Money), and removes JS-stack-only transition customization that no longer applies.
What changed
PredictScreenStack: createNativeStackNavigator with screenOptions={{ headerShown: false }}; market list uses animation: 'none' instead of animationEnabled: false.
PredictModalStack: Uses clearNativeStackNavigatorOptions + transparentModalScreenOptions instead of clearStackNavigatorOptions + per-screen opacity interpolators.
Confirmations: REDESIGNED_CONFIRMATIONS uses useEmptyNavHeaderForConfirmations() (same pattern as Money); NO_HEADER uses headerShown: false.
Removed: getConfirmationTransitionSpec, PredictConfirmationRouteParams, getPredictConfirmationScreenOptions, slideFromRightInterpolator, and all cardStyleInterpolator blocks on modal screens.
Behavior notes
Push screens (buy/sell preview, market details): rely on native stack default push animation (slide from right on Android; system behavior on iOS) instead of the previous manual translateX interpolator.
Transparent modals (unavailable, GTM, add funds): no longer fade the route card via interpolator; modal/sheet UIs own their presentation; outer stack uses transparent modal + animation: 'none' from the shared preset.
Changelog
CHANGELOG entry:null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
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
Changes Predict navigation stacks and screen option presets, which can subtly alter transition behavior and header presentation across multiple screens/modals. Risk is moderate because it’s UI/navigation-only and doesn’t touch business logic, but regressions would impact user flow.
Overview
Migrates Predict’s main and modal navigators from
@react-navigation/stackto@react-navigation/native-stack, standardizing screen options viaclearNativeStackNavigatorOptionsandtransparentModalScreenOptions.Removes JS-stack-only transition customizations (custom interpolators and confirmation transitionSpec) and updates confirmation routes to use
useEmptyNavHeaderForConfirmations(orheaderShown: false) while relying on native-stack defaults for push/modal animations. Test mocks were updated to reflect the new navigation option exports and confirmations header hook.Reviewed by Cursor Bugbot for commit 80b0c82. Bugbot is set up for automated code reviews on this repo. Configure here.