fix: Fix UI issue related to SafeAreaView top inset recalculation cp-7.73.0 by Cal-L · Pull Request #28622 · MetaMask/metamask-mobile

Cal-L · 2026-04-09T19:48:33Z

Description

We're experiencing an issue where the SafeAreaView top padding gets recalculated upon component mount, which results in bad UI. This PR reduces the blast radius of the changes by consolidating all SafeAreaView imports to react-native-safe-area-context. We then create a shim for the module, which handles applying top insets via style instead. Changes also includes:

Consolidate safe area context mocks in test setup file
Remove unused safe area mocks within test files
Update snapshots

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

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.

Note

Medium Risk
Touches SafeAreaView usage across many screens, so incorrect inset/edge handling could cause widespread layout regressions on iOS/Android despite being mostly mechanical changes.

Overview
Standardizes SafeAreaView usage by switching many components from react-native to react-native-safe-area-context (including adding explicit edges in a few places) to avoid incorrect top-inset recalculation on mount.

Refactors navigation/header configuration for DeFiProtocolPositionDetails by moving setOptions logic out of the component and into MainNavigator options via getDeFiProtocolPositionDetailsNavbarOptions (now explicitly sets headerShown: true).

Cleans up tests by removing per-file safe-area mocks in favor of the centralized jest mock in testSetupView.js, and updates snapshots/expectations accordingly.

^{Reviewed by Cursor Bugbot for commit f88a0cf. Bugbot is set up for automated code reviews on this repo. Configure here.}

github-actions · 2026-04-09T19:48:46Z

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.

…eact-navigation-safe-area-top-inset

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 2309d6d. Configure here.}

codecov-commenter · 2026-04-11T00:07:01Z

Codecov Report

❌ Patch coverage is 0% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.14%. Comparing base (9f195d0) to head (cda2e23).
⚠️ Report is 28 commits behind head on main.

Files with missing lines	Patch %	Lines
app/shims/SafeAreaViewWithHookTopInset.tsx	0.00%	30 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #28622      +/-   ##
==========================================
- Coverage   82.14%   82.14%   -0.01%     
==========================================
  Files        4949     4966      +17     
  Lines      130070   130550     +480     
  Branches    29004    29110     +106     
==========================================
+ Hits       106851   107239     +388     
- Misses      15923    15993      +70     
- Partials     7296     7318      +22

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2026-04-11T03:19:06Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeWalletPlatform, SmokeTrade, SmokeRamps, SmokeIdentity, SmokePerps, SmokePredictions, SmokeCard, FlaskBuildTests, SmokeSeedlessOnboarding
Selected Performance tags: @PerformanceLaunch, @PerformanceLogin
Risk Level: high
AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR is primarily a broad migration of SafeAreaView from React Native's built-in implementation to react-native-safe-area-context (via a custom shim at app/shims/react-native-safe-area-context.tsx). The shim applies top insets via useSafeAreaInsets hook instead of native padding to reduce post-mount header jumps.

Why high risk and broad coverage:

app/components/UI/Screen/index.js - The Screen component is a fundamental layout wrapper used across virtually all screens in the app. Changing its SafeAreaView implementation could affect layout on every screen.
app/components/UI/PermissionsSummary/PermissionsSummary.tsx - Used in dApp connection flows (SmokeNetworkAbstractions, SmokeMultiChainAPI, SmokeNetworkExpansion).
app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.tsx, AccountConnectMaliciousWarning.tsx, AddAccount.tsx - Core account connection UI components affecting SmokeAccounts, SmokeNetworkAbstractions, SmokeMultiChainAPI.
app/components/Views/AccountBackupStep1B/index.js - Onboarding/backup flow (SmokeAccounts, SmokeSeedlessOnboarding).
app/components/Base/InfoModal.tsx - Generic modal used across many flows.
app/components/UI/TurnOffRememberMeModal/TurnOffRememberMeModal.tsx - Security/settings flow.
app/component-library/components-temp/MultichainAccounts/MultichainAddWalletActions/MultichainAddWalletActions.tsx - Added edges={['bottom']} which changes the bottom safe area behavior for the add wallet actions sheet (SmokeAccounts, SmokeWalletPlatform).
app/components/Nav/Main/MainNavigator.js - Core navigator change for DeFiProtocolPositionDetails navbar options.
app/components/UI/CollectibleContractInformation/index.js and CollectibleOverview/index.js - NFT-related views.

The SafeAreaView shim applies top insets differently (via hook instead of native padding), which could cause visual layout differences on iOS (notch/Dynamic Island) and Android (status bar). Since the Screen component is used everywhere, virtually all E2E flows could be affected by layout regressions. The MultichainAddWalletActions change with edges={['bottom']} specifically changes bottom safe area behavior which could affect the add account sheet appearance.

Test cleanup (removing manual react-native-safe-area-context mocks from unit tests) indicates the global mock setup now handles this, which is a positive sign but the actual runtime behavior needs E2E validation.

All tags are selected because the Screen component and InfoModal are used across all feature areas, and the SafeAreaView behavior change could manifest differently on different device types/OS versions.

Performance Test Selection:
The SafeAreaView migration affects the Screen component (fundamental layout wrapper) and changes how top insets are applied via useSafeAreaInsets hook instead of native padding. This hook-based approach adds a React render cycle for inset calculation which could marginally impact app launch and login screen rendering times. The PerformanceLaunch and PerformanceLogin tests are most relevant since these are the first screens users see and the SafeAreaView change in Screen/layout components could affect time-to-interactive metrics. Other performance tests are less likely to be impacted as the change is primarily a layout/inset calculation approach change rather than a data loading or list rendering change.

View GitHub Actions results

github-actions · 2026-04-11T03:35:14Z

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

sonarqubecloud · 2026-04-11T03:37:22Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Cal-L added 2 commits April 9, 2026 12:34

Fix header transition to defi protocol details screen

57ad8f2

Consolidate SafeAreaView and add shim to fix top inset

6ee3461

Cal-L requested review from a team as code owners April 9, 2026 19:48

metamaskbot added the team-mobile-platform Mobile Platform team label Apr 9, 2026

github-actions Bot added size-M risk-high Extensive testing required · High bug introduction risk labels Apr 9, 2026

cursor Bot reviewed Apr 9, 2026

View reviewed changes

Comment thread app/shims/SafeAreaViewWithHookTopInset.tsx Outdated

Comment thread app/shims/SafeAreaViewWithHookTopInset.tsx Outdated

tommasini temporarily deployed to build-rc April 9, 2026 23:14 — with GitHub Actions Inactive

Cal-L added 2 commits April 9, 2026 19:40

Pass through mode

ef03d8f

Account for user specified padding or margin

5d1c4a2

github-actions Bot added risk-high Extensive testing required · High bug introduction risk and removed risk-high Extensive testing required · High bug introduction risk labels Apr 10, 2026

cursor Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread app/shims/SafeAreaViewWithHookTopInset.tsx Outdated

Only set bottom inset for wallet actions

8d50181

github-actions Bot added risk-high Extensive testing required · High bug introduction risk and removed risk-high Extensive testing required · High bug introduction risk labels Apr 10, 2026

Cal-L added 2 commits April 9, 2026 20:28

Account for max mode for top

111408c

Format files

6645095

github-project-automation Bot added this to PR review queue Apr 10, 2026

github-project-automation Bot moved this to Needs dev review in PR review queue Apr 10, 2026

Merge branch 'main' of github.com:MetaMask/metamask-mobile into fix/r…

acc210f

…eact-navigation-safe-area-top-inset

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-high Extensive testing required · High bug introduction risk labels Apr 10, 2026

cursor Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread app/components/Views/DataCollectionModal/index.test.tsx Outdated

Fix formatting issues

aa9bc7e

Cal-L added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Apr 10, 2026

Fix snapshot

fda7a22

cursor Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 10, 2026

Update snapshots

2309d6d

cursor Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread app/components/Views/AesCryptoTestForm/Form.tsx

Comment thread app/components/UI/CollectibleOverview/index.js

Merge from main

f3cb26b

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 10, 2026

Fix snapshot

cda2e23

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 10, 2026

weitingsun previously approved these changes Apr 11, 2026

View reviewed changes

Add unit test for safe area view with hook top

f88a0cf

Cal-L dismissed weitingsun’s stale review via f88a0cf April 11, 2026 03:16

github-actions Bot added risk-high Extensive testing required · High bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 11, 2026

Cal-L changed the title ~~fix: Fix UI issue related to SafeAreaView top inset recalculation - cp-7.73.0~~ fix: Fix UI issue related to SafeAreaView top inset recalculation cp-7.73.0 Apr 11, 2026

weitingsun approved these changes Apr 11, 2026

View reviewed changes

Cal-L merged commit d76192c into main Apr 11, 2026
106 of 111 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Fix UI issue related to SafeAreaView top inset recalculation cp-7.73.0#28622

fix: Fix UI issue related to SafeAreaView top inset recalculation cp-7.73.0#28622
Cal-L merged 28 commits into
mainfrom
fix/react-navigation-safe-area-top-inset

Cal-L commented Apr 9, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Apr 11, 2026

Uh oh!

github-actions Bot commented Apr 11, 2026

Uh oh!

github-actions Bot commented Apr 11, 2026

Uh oh!

sonarqubecloud Bot commented Apr 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

Cal-L commented Apr 9, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Apr 11, 2026

Codecov Report

Uh oh!

github-actions Bot commented Apr 11, 2026

🔍 Smart E2E Test Selection

Uh oh!

github-actions Bot commented Apr 11, 2026

Uh oh!

sonarqubecloud Bot commented Apr 11, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Cal-L commented Apr 9, 2026 •

edited by cursor Bot

Loading