feat(bridge): use native stack navigator with inline headers (#29829)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

**Reason:** The Bridge feature stack used JavaScript-based
`@react-navigation/stack`, which differs from native stack behavior
elsewhere and relied on `navigation.setOptions` plus compact header
helpers for several screens.

**Solution:** 
- Bridge and Bridge modal navigators now use
`@react-navigation/native-stack`. Stack screens hide the default React
Navigation header (`headerShown: false`). Titles and back actions are
rendered in-screen with `HeaderStandard` from the design system, wrapped
with `SafeAreaView` so top insets stay correct.
- `ScreenView` gains an optional `safeAreaEdges` prop (default
unchanged) so screens that already apply bottom/left/right safe area in
an outer wrapper can pass `safeAreaEdges={[]}` and avoid double padding.

**For reviews** please view the files with this link
https://github.com/MetaMask/metamask-mobile/pull/29829/changes?w=1
because a lot of changes in
app/components/UI/Bridge/Views/BridgeView/index.tsx are just formatting

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Updated Bridge navigation to use the native stack with
in-screen headers for Bridge, token selection, and quote selection.

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Bridge native stack and inline headers

  Scenario: Open Bridge and use the inline header
    Given the user is on a wallet account with Bridge available
    When the user opens Bridge from the app
    Then the Bridge screen shows the correct title (Bridge, Swaps, or combined per mode) and a working back control

  Scenario: Token selector header and safe area
    Given the user is on the Bridge screen
    When the user opens the source or destination token selector
    Then the token selector shows the "Select token" title, back returns to Bridge, and content is not clipped by device safe areas

  Scenario: Quote selector header
    Given the user is on Bridge with valid quotes
    When the user opens the quote selector
    Then the quote selector shows the "Select quote" title and back returns to the previous Bridge step

  Scenario: Bridge modals still present as overlays
    Given the user is on Bridge
    When the user opens a Bridge modal (e.g. slippage or network list, as applicable)
    Then the modal still presents with expected transparent overlay behavior
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/ce10fe39-db04-42dd-830e-4c908c38d76e


https://github.com/user-attachments/assets/72d0539f-d554-47e2-99a4-79f47df34f50

<!-- [screenshots/recordings] -->

### **After**


https://github.com/user-attachments/assets/b6f4c3ea-5e2e-4d77-92d6-a561ad4db79f


https://github.com/user-attachments/assets/3f2acc31-b4c4-4418-81e9-4da313f59ec5

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

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

#### Performance checks (if applicable)

- [x] 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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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]
> **Medium Risk**
> Navigation for Bridge screens is refactored to native-stack and moves
headers into screen layouts, which can subtly affect transitions,
safe-area insets, and back behavior across platforms. Risk is moderate
because changes are mostly UI/navigation but touch multiple entry
screens and modal presentation options.
> 
> **Overview**
> Bridge navigation is migrated from JS `@react-navigation/stack` to
`@react-navigation/native-stack`, hiding the default navigator header
and rendering in-screen headers via design-system `HeaderStandard` for
`BridgeView`, `BridgeTokenSelector`, and `QuoteSelectorView`.
> 
> To support this, `ScreenView` now accepts `safeAreaEdges` (defaulting
to bottom/left/right) so screens that wrap themselves in an outer
`SafeAreaView` can disable internal insets (`safeAreaEdges={[]}`) and
avoid double padding; Bridge screens also add wrapper styles to ensure
correct background/safe-area handling.
> 
> Tests are updated to assert inline header rendering (instead of
`navigation.setOptions`) and to adjust mocks/selectors to avoid
`ButtonIcon` testID collisions with the new back button.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
3a898d1. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: weitingsun

app/components/Base/ScreenView.tsx

@@ -1,7 +1,7 @@
 import type { ThemeColors } from '@metamask/design-tokens';
 import React from 'react';
-import { StyleSheet, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { StyleSheet, ScrollView, View, ScrollViewProps } from 'react-native';
+import { SafeAreaView, type Edge } from 'react-native-safe-area-context';
 import { useTheme } from '../../util/theme';
 
 const createStyles = (colors: ThemeColors) =>
@@ -12,16 +12,34 @@ const createStyles = (colors: ThemeColors) =>
     },
   });
 
-interface ScreenViewProps {
+interface ScreenViewProps extends ScrollViewProps {
   children: React.ReactNode;
+  /**
+   * Safe-area edges applied by the internal SafeAreaView wrapper.
+   * Defaults to `['bottom', 'left', 'right']` for backwards compatibility.
+   * Pass `[]` when an ancestor SafeAreaView already handles the insets to
+   * avoid double padding.
+   */
+  safeAreaEdges?: readonly Edge[];
 }
 
-const ScreenView: React.FC<ScreenViewProps> = (props) => {
+const ScreenView: React.FC<ScreenViewProps> = ({
+  safeAreaEdges = ['bottom', 'left', 'right'],
+  ...props
+}) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
+  if (safeAreaEdges.length === 0) {
+    return (
+      <View style={styles.wrapper}>
+        <ScrollView {...props} />
+      </View>
+    );
+  }
+
   return (
-    <SafeAreaView style={styles.wrapper} edges={['bottom', 'left', 'right']}>
+    <SafeAreaView style={styles.wrapper} edges={safeAreaEdges}>
       <ScrollView {...props} />
     </SafeAreaView>
   );

app/components/UI/Bridge/Views/BridgeView/BridgeView.styles.ts

@@ -10,6 +10,10 @@ export const createStyles = (params: { theme: Theme }) => {
     screen: {
       flex: 1,
     },
+    screenWrapper: {
+      flex: 1,
+      backgroundColor: theme.colors.background.default,
+    },
     inputsContainer: {
       paddingVertical: 12,
       paddingHorizontal: 16,