Description

Updates the Referral Rewards view, Rewards Settings view, and End of Season Claim bottom sheet to use the shared HeaderCompactStandard component and consistent safe-area handling, aligning with patterns used elsewhere in Rewards (e.g. Rewards Dashboard).

1. Reason for the change: Referral view used getNavigationOptionsTitle and stack header; Settings and End of Season Claim used different header primitives (BottomSheetHeader in the claim sheet). This was inconsistent and made safe-area behavior harder to reason about.
2. Improvement: Referral view now uses inline HeaderCompactStandard with SafeAreaView and headerShown: false for its stack screen. Settings view SafeAreaView uses edges={{ top: 'additive' }} and HeaderCompactStandard no longer uses includesTopInset. End of Season Claim bottom sheet uses HeaderCompactStandard instead of BottomSheetHeader, with the sheet title passed as the header title prop (custom header title render removed).

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/issues?jql=issueKey%20in%20(DSYS-555%2CDSYS-556)&selectedIssue=DSYS-556

Manual testing steps

Feature: Rewards headers and safe area

  Scenario: Referral Rewards view shows inline header
    Given the app is open and user has access to Rewards

    When user navigates to Referral Rewards
    Then the screen shows HeaderCompactStandard with "Referral" title and back button
    And content is wrapped in SafeAreaView and scrolls correctly

  Scenario: Rewards Settings view header and safe area
    When user navigates to Rewards Settings
    Then the header and content respect safe areas (top additive)
    And the back button and title display correctly

  Scenario: End of Season Claim bottom sheet header
    When user opens the End of Season Claim bottom sheet (when applicable)
    Then the sheet shows HeaderCompactStandard with the reward title and close button
    And the sheet content and keyboard behavior are unchanged

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.