## **Description**

This PR migrates React Navigation from v5 to v6. This is a significant
infrastructure update that modernizes the navigation layer of the
application to align with the latest React Navigation best practices and
removes deprecated APIs.

Why this change?
- React Navigation v5 is no longer actively maintained
- v6 provides improved TypeScript support, better performance, and
simplified APIs
- Removes the deprecated `@react-navigation/compat` package

What changed?

| v5 API | v6 API |
|--------|--------|
| `mode="modal"` prop on Navigator | `screenOptions={{ presentation:
'modal' }}` |
| `headerMode="screen"` prop | Removed (default behavior in v6) |
| `headerMode="none"` prop | `screenOptions={{ headerShown: false }}` |
| `dangerouslyGetParent()` | `getParent()` |
| `dangerouslyGetState()` | `getState()` |
| `NavigationContainerRef` | `NavigationContainerRef<ParamListBase>` |

Dependencies updated:
- `@react-navigation/bottom-tabs`: `^5.11.11` → `^6.6.1`
- `@react-navigation/native`: `^5.9.4` → `^6.1.18`
- `@react-navigation/stack`: `^5.14.5` → `^6.4.1`
- Removed `@react-navigation/compat` (deprecated v5 compatibility
package)

## **Changelog**

CHANGELOG entry: null

## **Related issues**

fixes: [React Navigation v6
Migration](#23767)

## **Manual testing steps**

```gherkin
Feature: React Navigation v6 Migration

  Scenario: user navigates between main tabs
    Given the app is launched and user is logged in
    When user taps on each tab (Wallet, Browser, Activity, etc.)
    Then each tab screen renders correctly with proper animations

  Scenario: user opens a modal screen
    Given the user is on the Wallet screen
    When user triggers a modal (e.g., WalletActions, NetworkSelector)
    Then the modal presents with correct slide-up animation
    And the modal dismisses correctly when closed

  Scenario: user navigates with back button
    Given the user has navigated deep into a stack (e.g., Settings > Security)
    When user presses the back button or swipes back
    Then navigation returns to the previous screen correctly

  Scenario: user opens bottom sheets
    Given the user is on any screen with bottom sheet functionality
    When user triggers a bottom sheet (e.g., Account Connect, Token Sort)
    Then the bottom sheet presents correctly over the current screen
    And background content remains visible behind transparent areas
```

## **Screenshots/Recordings**

### **Before**

N/A - No visual changes expected

### **After**

No visual changes expected. To ensure that the ui has not changed
#27385 was created to
view the comparison of ui through the flow via visual regression

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **High Risk**
> Touches core navigation structure and presentation settings across
many stacks/modals, so regressions could break routing, back behavior,
or modal/sheet presentation. Changes also alter theming/background
handling, which can cause subtle UI layering issues.
> 
> **Overview**
> Updates app navigation to React Navigation v6 patterns by removing
deprecated navigator props like `mode` and moving modal behavior to
`screenOptions.presentation` (and related per-screen options), while
centralizing `clearStackNavigatorOptions` and adjusting many flows (App,
MainNavigator, RootModalFlow, rewards/browser/etc.) to set appropriate
`cardStyle` backgrounds.
> 
> Refactors navigation typings (e.g., `TabBarProps`/descriptors and
`NavigationContainerRef<ParamListBase>`), hardens `TabBar` against
missing descriptors, and expands unit tests/snapshots to cover tab
visibility/callbacks/on-leave behavior plus broad route/screen
registration validation. NavigationContainer theme background is set to
`transparent` to support transparent modals, shifting responsibility for
background color to screens.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
b6a3bcb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->