Skip to content

chore(runway): cherry-pick fix: Updated root pages scrollable behavior with safeareaview#27502

Merged
joaoloureirop merged 2 commits into
release/7.69.1from
cherry-pick-7-69-1-3c1ee48
Mar 16, 2026
Merged

chore(runway): cherry-pick fix: Updated root pages scrollable behavior with safeareaview#27502
joaoloureirop merged 2 commits into
release/7.69.1from
cherry-pick-7-69-1-3c1ee48

Conversation

@runway-github

@runway-github runway-github Bot commented Mar 16, 2026

Copy link
Copy Markdown
Contributor

Description

Standardizes safe area and header inset behavior across the main tab
views (Wallet, Explore, Activity, Rewards).

  1. Reason for the change: These views used edges={{ bottom: 'additive' }} on SafeAreaView and includesTopInset on headers,
    which was inconsistent with the desired layout and could cause double
    insets or incorrect safe area handling.
  2. Improvement: Switched to edges={{ top: 'additive' }} on
    SafeAreaView and removed includesTopInset from header components so
    the top safe area is handled by the screen container and headers align
    consistently.

Changelog

CHANGELOG entry: null

Related issues

Fixes: #27443

Manual testing steps

Feature: Safe area and header insets on main tabs

  Scenario: Wallet, Explore, Activity, and Rewards use consistent safe area
    Given the app is open on a device or simulator with a notch/safe area

    When the user switches to each main tab (Wallet, Explore, Activity, Rewards)
    Then the top safe area is applied by the screen (no double inset)
    And the header (title + accessories) aligns correctly below the safe area
    And the bottom of each view respects the tab bar / device safe area as before

Screenshots/Recordings

Before

ScreenRecording_03-12-2026.10-48-07_1.MP4

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-03-12.at.10.12.15.mov

Pre-merge author checklist

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.

Note

Medium Risk
Layout-only changes to core tab screens
(Wallet/Explore/Activity/Rewards) that can affect safe-area padding and
scroll behavior across devices, plus removal of Wallet’s bottom
fade/scroll tracking logic which could subtly change UX on the homepage.

Overview
Standardizes safe-area handling across the main tab views by switching
root SafeAreaView usage from edges={{ bottom: 'additive' }} to
edges={{ top: 'additive' }} and removing header includesTopInset so
the top inset is applied consistently by the screen container.

In Wallet, removes the bottom fade LinearGradient overlay and its
associated scroll/size tracking state, simplifying scroll handling to
just notify homepage section subscribers via handleHomepageScroll.

Written by Cursor
Bugbot
for commit
c4b0e41. This will update automatically
on new commits. Configure
here.

[3c1ee48](https://github.com/MetaMask/metamask-mobile/commit/3c1ee4809d3a6c1a39e091c7240880234902a120)

….1 cp-7.70.0 (#27446)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

Standardizes safe area and header inset behavior across the main tab
views (Wallet, Explore, Activity, Rewards).

1. **Reason for the change:** These views used `edges={{ bottom:
'additive' }}` on `SafeAreaView` and `includesTopInset` on headers,
which was inconsistent with the desired layout and could cause double
insets or incorrect safe area handling.
2. **Improvement:** Switched to `edges={{ top: 'additive' }}` on
`SafeAreaView` and removed `includesTopInset` from header components so
the top safe area is handled by the screen container and headers align
consistently.

<!--
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: null

Fixes: #27443

```gherkin
Feature: Safe area and header insets on main tabs

  Scenario: Wallet, Explore, Activity, and Rewards use consistent safe area
    Given the app is open on a device or simulator with a notch/safe area

    When the user switches to each main tab (Wallet, Explore, Activity, Rewards)
    Then the top safe area is applied by the screen (no double inset)
    And the header (title + accessories) aligns correctly below the safe area
    And the bottom of each view respects the tab bar / device safe area as before
```

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

https://github.com/user-attachments/assets/0eda5978-7bd5-4428-86ea-f62637fb06ed

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

https://github.com/user-attachments/assets/a8ff8e19-a49e-41f4-9056-7c2271da8c66

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

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

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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Layout-only changes to core tab screens
(Wallet/Explore/Activity/Rewards) that can affect safe-area padding and
scroll behavior across devices, plus removal of Wallet’s bottom
fade/scroll tracking logic which could subtly change UX on the homepage.
>
> **Overview**
> Standardizes safe-area handling across the main tab views by switching
root `SafeAreaView` usage from `edges={{ bottom: 'additive' }}` to
`edges={{ top: 'additive' }}` and removing header `includesTopInset` so
the top inset is applied consistently by the screen container.
>
> In `Wallet`, removes the bottom fade `LinearGradient` overlay and its
associated scroll/size tracking state, simplifying scroll handling to
just notify homepage section subscribers via `handleHomepageScroll`.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c4b0e41. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
@runway-github runway-github Bot requested a review from a team as a code owner March 16, 2026 19:33
@github-actions

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot metamaskbot added the team-bots Bot team (for MetaMask Bot, Runway Bot, etc.) label Mar 16, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - base branch is not main (base: release/7.69.1)

All E2E tests pre-selected.

View GitHub Actions results

@joaoloureirop joaoloureirop enabled auto-merge (squash) March 16, 2026 20:14
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ E2E Fixture Validation — Structural changes detected

Category Count
New keys 68
Missing keys 11
Type mismatches 0
Value mismatches 6 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

@joaoloureirop joaoloureirop added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Mar 16, 2026
@joaoloureirop joaoloureirop merged commit e5f965c into release/7.69.1 Mar 16, 2026
187 of 191 checks passed
@joaoloureirop joaoloureirop deleted the cherry-pick-7-69-1-3c1ee48 branch March 16, 2026 22:03
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 16, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

size-XS skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. team-bots Bot team (for MetaMask Bot, Runway Bot, etc.)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants