Description

This PR aligns the Contacts screen with the inline header pattern by replacing the stack navbar with an inline HeaderCompactStandard component.

Reason for change: The Contacts screen used getNavigationOptionsTitle and navigation.setOptions() in componentDidMount / componentDidUpdate to configure the stack header. Migrating to an inline header matches the app-wide header approach (see docs/header-alignment-plans.md) and keeps the Contacts Settings subpage consistent with other screens that use HeaderCompactStandard (e.g. General Settings, main Settings view).

What changed:

1. MainNavigator – The ContactsSettings screen now uses options={{ headerShown: false }} so the stack header is hidden and the header is fully inline.
2. Contacts – Renders inline HeaderCompactStandard at the top with title strings('app_settings.contacts_title'), back button calling navigation.goBack(), and includesTopInset. Removed the getNavigationOptionsTitle import and all updateNavBar logic (including from componentDidMount and componentDidUpdate). Removed marginTop: 16 from the wrapper style so the header sits at the top. The page remains wrapped in SafeAreaView with edges={{ bottom: 'additive' }}.
3. Tests – Switched from Enzyme shallow render to renderScreen for full rendering with navigation. Added tests for: inline header presence (via ContactsViewSelectorIDs.HEADER), "Contacts" title, and back button press. Added HEADER to ContactsView.testIds.ts and passed testID to HeaderCompactStandard. Updated snapshot.

User-visible behavior (back button, title, safe area) is unchanged; the header is now rendered inline.

Changelog

This PR is not end-user-facing (internal header implementation; same UI/UX, header is now inline).

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/DSYS/boards/1888?selectedIssue=DSYS-355

Manual testing steps

Feature: Contacts inline header

  Scenario: user opens Contacts from Settings
    Given the app is open and the user is on the main Settings screen

    When the user taps "Contacts"
    Then the Contacts screen is shown with a header that displays "Contacts" and a back arrow on the left

    When the user taps the back arrow
    Then the app navigates back to the main Settings screen

  Scenario: safe area and content layout
    Given the user is on the Contacts screen

    When the screen is displayed
    Then the header sits below the status bar (safe area respected)
    And the contact list and "Add contact" button are visible and not covered by the header

Screenshots/Recordings

Before

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.