Description

After the React Navigation v5 → v6 migration (#26691) and the follow-up iOS overlap fix (#29020), the back arrow in the in-app SimpleWebview (used e.g. when tapping "View on block explorer" after a swap) renders behind the iOS status bar / Dynamic Island and is unclickable, leaving the user trapped on the screen.

Root cause:

• SimpleWebview was injecting its header through navigation.setOptions({ header: () => <HeaderCompactStandard …/> }).
• In @react-navigation/stack v6, custom header functions do not receive automatic paddingTop: headerStatusBarHeight (see node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx); the custom header must own its safe-area inset.
• The previous iOS overlap fix worked around that by setting includesTopInset: Device.isAndroid(), which on iOS resulted in no top safe-area inset at all, so the back button rendered at y = 0 underneath the status bar.

Solution (matches the pattern already used by WebviewModal.tsx in Deposit):

• Render HeaderCompactStandard directly inside SimpleWebview with includesTopInset always on, so useSafeAreaInsets() (already used by HeaderBase) drives the top padding consistently on both platforms.
• Hide the inner Stack.Navigator headers in both webview wrappers (MainNavigator.js and App.tsx) via screenOptions={{ headerShown: false }} so we don't double-render headers.
• Remove the brittle setOptions custom-header wiring; this also removes the need for the Device.isAndroid() platform branch and the rounded-t-2xl styling that was masking the issue.

The navigation contract used by callers (navigation.navigate(Routes.WEBVIEW.MAIN, { screen: Routes.WEBVIEW.SIMPLE, params: { url } })) is unchanged, so BridgeTransactionDetails, BlockExplorersModal, and other consumers keep working as-is.

Longer-term, the team has discussed routing all external links through a single service that selects between WebView and inAppReborn (Pedro / Joao in the originating Slack thread); that refactor is intentionally out of scope here — this PR just unblocks the user.

Changelog

CHANGELOG entry: Fixed an iOS bug where the back button in the in-app webview (e.g. "View on block explorer") was rendered behind the status bar and could not be tapped.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MCWP-572

bug surfaced in the #metamask-core-mobile-ux Slack thread on 2026-04-28 (browser back button unclickable after swap → "View on block explorer")

Manual testing steps

```gherkin
Feature: In-app webview back button is reachable on iOS

Scenario: User exits the in-app webview opened from a swap transaction
Given the user has completed a swap on iOS
And the user is on the swap transaction details screen

When the user taps "View on block explorer"
Then the in-app webview opens with the block explorer page
And the header is rendered fully below the status bar / Dynamic Island
And the back arrow in the top-left of the header is tappable

When the user taps the back arrow
Then the user returns to the previous screen

Scenario: Header still renders correctly on Android
Given the user is on Android
When the user opens any flow that pushes Routes.WEBVIEW.MAIN / Routes.WEBVIEW.SIMPLE
Then the header is rendered with the correct top safe-area inset
And the share button on the right works
And the back button on the left works

Scenario: Header still renders correctly when the webview is presented as a modal during onboarding
Given the user is in the onboarding flow on iOS
When a screen pushes Routes.WEBVIEW.MAIN (modal presentation)
Then the in-app webview opens with the header below the status bar
And the back arrow is tappable and returns to the onboarding screen
```

Screenshots/Recordings

Before

iOS: back arrow rendered behind the status bar / Dynamic Island and not tappable — user is trapped on the webview screen (see Slack screenshot from Heyse Li, 2026-04-28).

After

iOS: header renders below the status bar with proper safe-area inset; back arrow is fully visible and tappable.

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.

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
  • See `trace()` for usage and `addToken` for an example

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.

Made with Cursor