Skip to content

chore(runway): cherry-pick fix: Updated root pages scrollable behavior with safeareaview cp-7.69.1 cp-7.70.0#27491

Merged
chloeYue merged 1 commit into
release/7.70.0from
runway-cherry-pick-7.70.0-1773675093
Mar 16, 2026
Merged

chore(runway): cherry-pick fix: Updated root pages scrollable behavior with safeareaview cp-7.69.1 cp-7.70.0#27491
chloeYue merged 1 commit into
release/7.70.0from
runway-cherry-pick-7.70.0-1773675093

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)

…r with safeareaview cp-7.69.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.
-->

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

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

## **Related issues**

Fixes: #27443 

## **Manual testing steps**

```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
```

## **Screenshots/Recordings**

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

### **Before**


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


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

### **After**


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


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

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

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

<!-- 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 15:31
@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.70.0)

All E2E tests pre-selected.

View GitHub Actions results

@sonarqubecloud

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown
Contributor

E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

@chloeYue chloeYue merged commit cf7e766 into release/7.70.0 Mar 16, 2026
193 of 195 checks passed
@chloeYue chloeYue deleted the runway-cherry-pick-7.70.0-1773675093 branch March 16, 2026 17:00
@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-S 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