fix: make in-app webview back button tappable on iOS (#29693)

## **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: No issue — bug surfaced in the `#metamask-core-mobile-ux` Slack
thread on 2026-04-28 (browser back button unclickable after swap → "View
on block explorer"). Andre Alves asked for a board entry but a Jira
ticket had not been created at the time this fix was opened.

## **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**


https://github.com/user-attachments/assets/78c9e271-6e58-4b9f-862a-b6b123df2915


### **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**

- [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
- [x] 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
- [x] 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**

- [ ] 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](https://cursor.com)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI/navigation change that primarily adjusts header rendering
for `SimpleWebview`; main risk is unintended header/spacing differences
or missing headers in the webview stacks.
> 
> **Overview**
> Fixes an iOS layout regression where the in-app `SimpleWebview` back
button could be obscured by the status bar/Dynamic Island by **rendering
`HeaderCompactStandard` directly inside `SimpleWebview`** (always
`includesTopInset`) instead of injecting a custom header via
`navigation.setOptions()`.
> 
> Updates the webview stack wrappers in `MainNavigator` and `App` to
**hide the React Navigation header** (`screenOptions={{ headerShown:
false }}`) to avoid double headers, and adjusts tests to validate the
new header rendering and callbacks (back + share).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
972444a. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: Andre Pimenta <andrepimenta7@gmail.com>

Author: tommasini

app/components/Nav/App/App.tsx

@@ -318,7 +318,7 @@ const OnboardingNav = () => {
  * child OnboardingNav navigator to push modals on top of it
  */
 const SimpleWebviewScreen = () => (
-  <Stack.Navigator>
+  <Stack.Navigator screenOptions={{ headerShown: false }}>
     <Stack.Screen name={Routes.WEBVIEW.SIMPLE} component={SimpleWebview} />
   </Stack.Navigator>
 );

app/components/Nav/Main/MainNavigator.js

@@ -891,7 +891,7 @@ const HomeTabs = () => {
 };
 
 const Webview = () => (
-  <Stack.Navigator>
+  <Stack.Navigator screenOptions={{ headerShown: false }}>
     <Stack.Screen name="SimpleWebview" component={SimpleWebview} />
   </Stack.Navigator>
 );

app/components/Views/SimpleWebview/index.test.tsx

@@ -4,30 +4,20 @@ import SimpleWebview from './';
 import { useNavigation } from '@react-navigation/native';
 import Share from 'react-native-share';
 import Logger from '../../../util/Logger';
-import getHeaderCompactStandardNavbarOptions from '../../../component-library/components-temp/HeaderCompactStandard/getHeaderCompactStandardNavbarOptions';
-import Device from '../../../util/device';
+import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 
 jest.mock(
-  '../../../component-library/components-temp/HeaderCompactStandard/getHeaderCompactStandardNavbarOptions',
+  '../../../component-library/components-temp/HeaderCompactStandard',
   () => ({
     __esModule: true,
-    default: jest.fn(() => ({
-      header: () => null,
-    })),
+    default: jest.fn(() => null),
   }),
 );
 
-jest.mock('../../../util/device', () => ({
-  __esModule: true,
-  default: {
-    isAndroid: jest.fn(() => false),
-  },
-}));
-
-const mockSetOptions = jest.fn();
+const mockGoBack = jest.fn();
 const mockNavigation = {
-  goBack: jest.fn(),
-  setOptions: mockSetOptions,
+  goBack: mockGoBack,
+  setOptions: jest.fn(),
 };
 
 jest.mock('@react-navigation/native', () => ({
@@ -48,64 +38,38 @@ describe('SimpleWebview', () => {
     (Share.open as jest.Mock).mockImplementation(() => Promise.resolve());
   });
 
-  it('renders correctly', () => {
+  it('renders the HeaderCompactStandard with safe area top inset', () => {
     render(<SimpleWebview />);
 
-    expect(getHeaderCompactStandardNavbarOptions).toHaveBeenCalled();
-  });
-
-  it('sets header options from HeaderCompactStandard and Device.isAndroid() for includesTopInset', () => {
-    render(<SimpleWebview />);
-
-    expect(getHeaderCompactStandardNavbarOptions).toHaveBeenCalledWith(
+    expect(HeaderCompactStandard).toHaveBeenCalledWith(
       expect.objectContaining({
         title: '',
-        includesTopInset: false,
-        twClassName: 'bg-default rounded-t-2xl',
+        includesTopInset: true,
         onBack: expect.any(Function),
         endButtonIconProps: expect.arrayContaining([
           expect.objectContaining({ onPress: expect.any(Function) }),
         ]),
       }),
-    );
-    expect(mockSetOptions).toHaveBeenCalledWith(
-      expect.objectContaining({
-        header: expect.any(Function),
-      }),
-    );
-    expect(mockSetOptions.mock.calls[0][0]).not.toHaveProperty('headerStyle');
-  });
-
-  it('passes includesTopInset true when Device.isAndroid() is true', () => {
-    jest.mocked(Device.isAndroid).mockReturnValueOnce(true);
-    render(<SimpleWebview />);
-
-    expect(getHeaderCompactStandardNavbarOptions).toHaveBeenCalledWith(
-      expect.objectContaining({
-        includesTopInset: true,
-      }),
+      expect.anything(),
     );
   });
 
   it('calls navigation.goBack when header onBack is invoked', () => {
     render(<SimpleWebview />);
 
-    const { onBack } = (getHeaderCompactStandardNavbarOptions as jest.Mock).mock
+    const headerProps = (HeaderCompactStandard as unknown as jest.Mock).mock
       .calls[0][0] as { onBack: () => void };
-    onBack();
+    headerProps.onBack();
 
-    expect(mockNavigation.goBack).toHaveBeenCalled();
+    expect(mockGoBack).toHaveBeenCalled();
   });
 
   it('calls Share.open when share button onPress is invoked', () => {
     render(<SimpleWebview />);
 
-    const { endButtonIconProps } = (
-      getHeaderCompactStandardNavbarOptions as jest.Mock
-    ).mock.calls[0][0] as {
-      endButtonIconProps: { onPress: () => void }[];
-    };
-    endButtonIconProps[0].onPress();
+    const headerProps = (HeaderCompactStandard as unknown as jest.Mock).mock
+      .calls[0][0] as { endButtonIconProps: { onPress: () => void }[] };
+    headerProps.endButtonIconProps[0].onPress();
 
     expect(Share.open).toHaveBeenCalledWith({ url: 'https://etherscan.io' });
   });
@@ -116,12 +80,9 @@ describe('SimpleWebview', () => {
 
     render(<SimpleWebview />);
 
-    const { endButtonIconProps } = (
-      getHeaderCompactStandardNavbarOptions as jest.Mock
-    ).mock.calls[0][0] as {
-      endButtonIconProps: { onPress: () => void }[];
-    };
-    endButtonIconProps[0].onPress();
+    const headerProps = (HeaderCompactStandard as unknown as jest.Mock).mock
+      .calls[0][0] as { endButtonIconProps: { onPress: () => void }[] };
+    headerProps.endButtonIconProps[0].onPress();
 
     await waitFor(() => {
       expect(log).toHaveBeenCalledWith(

app/components/Views/SimpleWebview/index.tsx

@@ -1,22 +1,25 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
 import { WebView } from '@metamask/react-native-webview';
-import getHeaderCompactStandardNavbarOptions from '../../../component-library/components-temp/HeaderCompactStandard/getHeaderCompactStandardNavbarOptions';
+import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import { IconName } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import Share from 'react-native-share'; // eslint-disable-line  import-x/default
 import Logger from '../../../util/Logger';
 import { baseStyles } from '../../../styles/common';
-import Device from '../../../util/device';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
 // TODO: This will be replaced with the actual route params type once navigation is refactored
 type RouteParams = {
   SimpleWebView: {
     url: string;
+    title?: string;
   };
 };
 
 const SimpleWebView = () => {
+  const tw = useTailwind();
   const navigation = useNavigation();
   const route = useRoute<RouteProp<RouteParams, 'SimpleWebView'>>();
   const url = route.params.url;
@@ -32,19 +35,17 @@ const SimpleWebView = () => {
     }
   }, [url]);
 
-  useEffect(() => {
-    navigation.setOptions({
-      ...getHeaderCompactStandardNavbarOptions({
-        title,
-        onBack: () => navigation.goBack(),
-        includesTopInset: Device.isAndroid(),
-        twClassName: 'bg-default rounded-t-2xl',
-        endButtonIconProps: [{ iconName: IconName.Share, onPress: share }],
-      }),
-    });
-  }, [navigation, share, title]);
-
-  return <WebView containerStyle={baseStyles.flexGrow} source={{ uri: url }} />;
+  return (
+    <View style={tw.style('flex-1 bg-default')}>
+      <HeaderCompactStandard
+        title={title}
+        onBack={() => navigation.goBack()}
+        includesTopInset
+        endButtonIconProps={[{ iconName: IconName.Share, onPress: share }]}
+      />
+      <WebView containerStyle={baseStyles.flexGrow} source={{ uri: url }} />
+    </View>
+  );
 };
 
 export default SimpleWebView;