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

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

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

Co-authored-by: metamaskbot metamaskbot@users.noreply.github.com cf10d95