fix(perps): use native stack navigator to fix navigation jitter on navigation v6 cp-7.73.0 cp-7.74.0

[tommasini]

---

Description

React Navigation v6's JS-based @react-navigation/stack creates Reanimated shared values during render before the Fabric commit is finalized. Under the New Architecture (newArchEnabled=true, RN 0.76.9), this causes animations to fall back to the JS thread, producing a freeze-then-snap jitter when navigating into the Perps stack.

The fix replaces createStackNavigator with createNativeStackNavigator (from @react-navigation/native-stack@^6) for PerpsScreenStack. Native stack transitions run as pure UIKit (iOS) / Fragment (Android) animations with zero Reanimated/JS-thread involvement, eliminating the timing issue entirely.

Concretely:

• Added @react-navigation/native-stack@^6 as a dependency (compatible with the existing react-native-screens@3.37.0)
• Replaced createStackNavigator → createNativeStackNavigator for the inner Perps navigator in routes/index.tsx
• Updated screen option syntax for the two transparent-modal screens: cardStyle → contentStyle, animationEnabled: false → animation: 'none', and replaced JS-stack-only header/headerLeft callbacks with headerShown/headerBackVisible
• Updated the Perps ROOT entry in MainNavigator.js to use TransitionPresets.SlideFromRightIOS, replacing the hand-rolled cardStyleInterpolator that used Animated.Value.interpolate with layouts.screen.width (which can be 0 on first render under Fabric's async layout)

Changelog

CHANGELOG entry: Fixed jittery navigation transitions when opening Perps on devices running the New Architecture

Related issues

Fixes:

Manual testing steps

Feature: Perps navigation transition

  Scenario: User navigates to Perps from wallet home
    Given the user is on the Wallet home screen with the Perps tab visible
    And the device is running the New Architecture (newArchEnabled=true)

    When the user taps "New Trade" or any button that navigates to Perps
    Then the screen transitions immediately with a smooth slide-from-right animation
    And no freeze-then-snap jitter occurs during the transition
    And the Perps home screen content appears correctly after the transition

  Scenario: User navigates between Perps screens
    Given the user is on the Perps home screen

    When the user taps on a market to open market details
    Then the transition to the market details screen is smooth and immediate
    And navigating back to Perps home is also smooth

Screenshots/Recordings

Before

N/A

After

Screen.Recording.2026-04-17.at.03.06.54.mov

Screen.Recording.2026-04-17.at.03.10.02.mov

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.

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.

Made with Cursor

---

Note

Medium Risk
Changes navigation primitives and header behavior for the Perps flow, which can affect transitions, modal presentation, and confirmation screen UX if options are mis-mapped between stack implementations.

Overview
Fixes Perps navigation jitter under React Navigation v6 / RN New Architecture by switching the Perps inner navigator from JS @react-navigation/stack to @react-navigation/native-stack.

Updates Perps screen options to native-stack equivalents (contentStyle, animation: 'none', presentation: 'transparentModal') and adds a scoped NavigationContext override in PerpsConfirmScreen to prevent Confirm from re-enabling a header when showPerpsHeader is false. Also ensures the Perps root entry in MainNavigator explicitly disables the header.

Bumps mobile build numbers (versionCode / CURRENT_PROJECT_VERSION) and Bitrise VERSION_NUMBER to 4532, and adds the @react-navigation/native-stack dependency.

^{Reviewed by Cursor Bugbot for commit c92d05c. Bugbot is set up for automated code reviews on this repo. Configure here.}

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​react-navigation/​native-stack@​6.11.0

View full report

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations, SmokeTrade
• Selected Performance tags: @PerformancePreps
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The primary changes in this PR are:

1. Perps navigation stack migration (app/components/UI/Perps/routes/index.tsx): The Perps feature was migrated from createStackNavigator (JS-based) to createNativeStackNavigator (native). This is a significant navigation architecture change that affects all Perps screens. Navigation option properties were updated (cardStyle→contentStyle, animationEnabled→animation, detachPreviousScreen removed, etc.). A NavigationContext override was added to intercept setOptions calls and prevent header animation issues in the confirmation flow.

2. PayWithModal added to Perps stack (app/components/UI/Perps/routes/index.tsx): The PayWithModal (a confirmations component) is now registered as a screen within the Perps native stack. This is needed because transparent modal screens can't dispatch navigation actions to the parent App stack. This directly ties Perps navigation to the confirmations flow.

3. MainNavigator change (app/components/Nav/Main/MainNavigator.js): Added headerShown: false to the Perps root screen options to prevent double headers with the new native stack.

4. New dependency (package.json/yarn.lock): @react-navigation/native-stack added as a new package dependency.

5. Version bumps (android/app/build.gradle, ios/MetaMask.xcodeproj/project.pbxproj, bitrise.yml): Routine version code bumps (4138→4532), no functional impact.

Tag selection rationale:

• SmokePerps: Direct impact - entire Perps navigation stack refactored from JS to native stack. All Perps flows (add funds, positions, stop-loss, limit orders, tutorials) need validation.
• SmokeWalletPlatform: Required per SmokePerps tag description (Perps is a section inside Trending tab). Also, the MainNavigator change could affect how Perps integrates with the main navigation.
• SmokeConfirmations: Required per SmokePerps tag description (Add Funds deposits are on-chain transactions). Additionally, PayWithModal (a confirmations component) is now embedded in the Perps native stack with a NavigationContext override - this non-trivial pattern needs validation to ensure confirmations still work correctly within the Perps flow.
• SmokeTrade: The TradeWalletActions menu is the primary entry point to Perps. Navigation changes at the Perps root level could affect how users navigate from Trade into Perps.

Performance Test Selection:
The migration from createStackNavigator (JS-based) to createNativeStackNavigator (native) for the Perps stack is a performance-relevant change. Native stack navigators generally have better performance characteristics, but the migration could affect screen transition timing, rendering performance, and the Perps add funds flow. @PerformancePreps covers perps market loading, position management, add funds flow, and order execution - all of which go through the refactored navigation stack.

View GitHub Actions results

[cursor]

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 89b2e6e. Configure here.}

[sonarqubecloud]

Quality Gate failed

Failed conditions
6.7% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
10 value mismatches detected (expected — fixture represents an existing user).
View details

[Cal-L]

Lgtm!