Skip to content

refactor(predict): use native stack navigators for Predict routes#30151

Merged
weitingsun merged 5 commits into
mainfrom
wsun/change-predict-routes-to-native-stack
May 14, 2026
Merged

refactor(predict): use native stack navigators for Predict routes#30151
weitingsun merged 5 commits into
mainfrom
wsun/change-predict-routes-to-native-stack

Conversation

@weitingsun

@weitingsun weitingsun commented May 13, 2026

Copy link
Copy Markdown
Contributor

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

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

predict before part 1 predict before part 2 predict before part 3

After

Predict after part 1 predict after part 2 predict after part 3

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
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/stack to @react-navigation/native-stack, standardizing screen options via clearNativeStackNavigatorOptions and transparentModalScreenOptions.

Removes JS-stack-only transition customizations (custom interpolators and confirmation transitionSpec) and updates confirmation routes to use useEmptyNavHeaderForConfirmations (or headerShown: 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.

@github-actions

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.

@metamaskbotv2 metamaskbotv2 Bot added the team-mobile-platform Mobile Platform team label May 13, 2026
@weitingsun weitingsun marked this pull request as ready for review May 13, 2026 22:24
@weitingsun weitingsun requested a review from a team as a code owner May 13, 2026 22:24
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePredictions, SmokeConfirmations, SmokeWalletPlatform
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes migrate the Predict navigation stack from createStackNavigator (JS-based) to createNativeStackNavigator (native-based). This is a navigation infrastructure refactor that:

  1. Replaces clearStackNavigatorOptions with clearNativeStackNavigatorOptions and transparentModalScreenOptions
  2. Removes custom JS animation interpolators (slideFromRightInterpolator, cardStyleInterpolator) in favor of native stack defaults
  3. Introduces useEmptyNavHeaderForConfirmations hook for confirmation screen header options (already used in Earn, Stake, Money routes)
  4. Simplifies screen options significantly

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:
The migration from JS stack to native stack could improve navigation performance, but this is scoped to Predict routes only and doesn't affect the core performance-sensitive areas (account list, onboarding, login, swaps, app launch, asset loading). No performance tests are warranted for this navigation refactor.

View GitHub Actions results

@sonarqubecloud

Copy link
Copy Markdown

@MarioAslau MarioAslau left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@weitingsun weitingsun added this pull request to the merge queue May 14, 2026
Merged via the queue into main with commit 12790c0 May 14, 2026
183 of 185 checks passed
@weitingsun weitingsun deleted the wsun/change-predict-routes-to-native-stack branch May 14, 2026 16:47
@github-actions github-actions Bot locked and limited conversation to collaborators May 14, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.78.0 Issue or pull request that will be included in release 7.78.0 label May 14, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants