fix(card): cp-7.81.0 restore slide-up entry without iOS modal presentation by Brunonascdev · Pull Request #31031 · MetaMask/metamask-mobile

Brunonascdev · 2026-06-03T17:50:31Z

Description

Card screens were opening with presentation: 'modal' on Routes.CARD.ROOT in MainNavigator.js. On iOS that stacks the entire Card flow as a system modal (scaled/dimmed background, card-style chrome), which was not the intended full-screen experience.

This change removes presentation: 'modal' and applies TransitionPresets.ModalSlideFromBottomIOS on the Card root screen instead. Card still slides in bottom-to-top when opened, but as a full-screen transition without the iOS modal card stack. Inner Card navigation is unchanged. Swipe-down-to-dismiss on the Card entry is preserved via the preset.

Note: If this branch was merged with main locally, rebase onto latest main before opening the PR so the diff only contains the Card navigation change (two commits: revert modal presentation, add slide-up preset).

Changelog

CHANGELOG entry: Fixed MetaMask Card opening as an iOS modal sheet; Card now opens full screen with a slide-up animation

Related issues

Fixes: Illegible status bar on the light theme when the welcome screen appears.

Manual testing steps

Feature: Card entry navigation animation

  Scenario: Card opens with slide-up on iOS without modal sheet chrome
    Given the user is on a screen that can navigate to MetaMask Card (e.g. Money home with Card enabled)
    And the app is running on iOS

    When the user opens MetaMask Card
    Then the Card flow slides up from the bottom
    And the previous screen is not shown as a scaled/dimmed card behind a modal sheet
    And inner Card screens (e.g. home to cashback) still push with the default horizontal transition

  Scenario: Card entry can be dismissed with swipe down on iOS
    Given the user has opened MetaMask Card from the main navigator entry

    When the user swipes down on the Card root screen
    Then the user returns to the previous screen

  Scenario: Card entry on Android
    Given the user is on a screen that can navigate to MetaMask Card
    And the app is running on Android

    When the user opens MetaMask Card
    Then Card opens without regressions compared to the prior slide-up behavior

Screenshots/Recordings

Before

ScreenRecording_06-03-2026.12-44-27_1.MP4

After

Simulator.Screen.Recording.-.iPhone.17.Pro.Max.-.2026-06-03.at.14.46.44.mov

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.

Performance checks (if applicable)

I've tested on Android
- Ideally on a mid-range device; emulator is acceptable
I've tested with a power user scenario
- Use these power-user SRPs to import wallets with many accounts and tokens
I've instrumented key operations with Sentry traces for production performance metrics
- See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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

Low Risk
Navigation and UI-only changes in the Card flow with added unit tests; no auth, payments, or data-layer changes.

Overview
Card entry no longer uses iOS presentation: 'modal' on Routes.CARD.ROOT. It now uses TransitionPresets.ModalSlideFromBottomIOS so Card still slides up from the bottom and keeps swipe-to-dismiss, but opens full screen without the scaled/dimmed modal sheet chrome.

Card welcome forces a light status bar while focused (including after non-closing transitionEnd events on the screen and parent navigators), then restores theme-appropriate bar style on blur. Buttons and typography move to @metamask/design-system-react-native (isFullWidth, updated text variants).

Tests add TransitionPresets mocking in MainNavigator and coverage for status bar focus/blur and transition listener behavior in CardWelcome.

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

…ard-screens-modal-presentation

github-actions · 2026-06-03T17:50:42Z

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.

…ard-screens-modal-presentation

CardWelcome renders on a dark purple background, so the theme's dark-content status bar was illegible in light mode. Apply light-content on focus and re-apply on transitionEnd across the whole navigator chain, since the slide-up animates on a parent navigator and the event does not bubble. Restore theme style on blur.

CardWelcome registered transitionEnd listeners across the navigator chain that unconditionally forced light-content. On a closing transition (dismissing the Card stack) this clobbered the status bar of the light-themed screen underneath. Guard on e.data.closing so only entering transitions reapply light-content.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ 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 173fb4c. Configure here.}

codecov-commenter · 2026-06-05T02:44:11Z

Codecov Report

❌ Patch coverage is 95.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 82.93%. Comparing base (da1f6eb) to head (07a47c7).
⚠️ Report is 78 commits behind head on main.

Files with missing lines	Patch %	Lines
...mponents/UI/Card/Views/CardWelcome/CardWelcome.tsx	95.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #31031   +/-   ##
=======================================
  Coverage   82.92%   82.93%           
=======================================
  Files        5604     5604           
  Lines      144517   144547   +30     
  Branches    33588    33596    +8     
=======================================
+ Hits       119835   119874   +39     
+ Misses      16606    16601    -5     
+ Partials     8076     8072    -4

☔ View full report in Codecov by Harness.
📢 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-06-05T13:25:08Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeMoney
Selected Performance tags: None (no tests recommended)
Risk Level: medium
AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes two focused changes:

MainNavigator.js: Changes the Card route (Routes.CARD.ROOT) navigation transition from { presentation: 'modal' } to TransitionPresets.ModalSlideFromBottomIOS. This is a visual/animation change for how the Card screen slides in/out. It could affect how the Card welcome screen appears and dismisses, which is directly covered by SmokeMoney Card tests.
CardWelcome.tsx:
- Migrates Button/Text components from internal component library to @metamask/design-system-react-native
- Adds StatusBar management via useFocusEffect to enforce light status bar while the Card Welcome screen is focused, and restore it on blur
- Updates TextVariant enum values (HeadingLG→HeadingLg, BodyMD→BodyMd) and button API (label prop→children, ButtonWidthTypes.Full→isFullWidth)

These changes are scoped entirely to the MetaMask Card feature — specifically the Card Welcome/onboarding screen. SmokeMoney covers Card home screen, navbar entry, Add Funds flows, and card analytics. The Card welcome screen is the entry point for Card onboarding, so SmokeMoney is the appropriate tag.

No additional tags are needed because:

The changes don't touch the Add Funds flow (which would require SmokeSwap + SmokeConfirmations)
The navigation change only affects Routes.CARD.ROOT, not ramps or other flows
No wallet home/actions entry points are modified (which would require SmokeWalletPlatform)

Performance Test Selection:
The changes are limited to UI component migration (design system library swap) and a navigation transition style change for the Card screen. While there is a minor animation change (TransitionPresets.ModalSlideFromBottomIOS), this is a standard React Navigation preset and does not introduce custom rendering logic or performance-sensitive code paths. The StatusBar management added is lightweight event listener registration. No performance-sensitive areas like account lists, asset loading, login flows, or app startup are affected.

View GitHub Actions results

Brunonascdev added 3 commits June 3, 2026 13:55

feat(card): revert changes on Card routes

4ea0c5f

feat(card): add animation on card pages

8f19ea4

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

2a8a0a0

…ard-screens-modal-presentation

Brunonascdev self-assigned this Jun 3, 2026

mm-token-exchange-service Bot added the team-card Card Team label Jun 3, 2026

github-actions Bot added the size-XS label Jun 3, 2026

klejeune previously approved these changes Jun 3, 2026

View reviewed changes

Brunonascdev enabled auto-merge June 3, 2026 17:53

github-actions Bot added the risk:medium AI analysis: medium risk label Jun 3, 2026

Brunonascdev added 2 commits June 4, 2026 16:25

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

a2a8e46

…ard-screens-modal-presentation

feat(card): switch StatusBar color on light theme

25035b4

Brunonascdev dismissed klejeune’s stale review via 25035b4 June 4, 2026 20:03

Brunonascdev requested a review from a team as a code owner June 4, 2026 20:03

mm-token-exchange-service Bot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Jun 4, 2026

github-actions Bot added size-M and removed size-XS labels Jun 4, 2026

cursor Bot reviewed Jun 4, 2026

View reviewed changes

Comment thread app/components/UI/Card/Views/CardWelcome/CardWelcome.tsx

mm-token-exchange-service Bot removed the INVALID-PR-TEMPLATE PR's body doesn't match template label Jun 4, 2026

cursor Bot reviewed Jun 4, 2026

View reviewed changes

Comment thread app/components/UI/Card/Views/CardWelcome/CardWelcome.tsx

Brunonascdev changed the title ~~fix(card): restore slide-up entry without iOS modal presentation~~ fix(card): cp-7.81.0 restore slide-up entry without iOS modal presentation Jun 4, 2026

test(card): add more coverage on CardWelcome

173fb4c

github-actions Bot added risk:high AI analysis: high risk and removed risk:medium AI analysis: medium risk labels Jun 5, 2026

cursor Bot reviewed Jun 5, 2026

View reviewed changes

Comment thread app/components/UI/Card/Views/CardWelcome/CardWelcome.tsx

klejeune approved these changes Jun 5, 2026

View reviewed changes

Brunonascdev added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Jun 5, 2026

Merge branch 'main' into fix/card-screens-modal-presentation

07a47c7

github-actions Bot added risk:medium AI analysis: medium risk and removed risk:high AI analysis: high risk labels Jun 5, 2026

Brunonascdev added this pull request to the merge queue Jun 5, 2026

Merged via the queue into main with commit 797534f Jun 5, 2026
93 of 95 checks passed

Brunonascdev deleted the fix/card-screens-modal-presentation branch June 5, 2026 14:22

github-actions Bot locked and limited conversation to collaborators Jun 5, 2026

metamaskbotv2 Bot added the release-7.82.0 Issue or pull request that will be included in release 7.82.0 label Jun 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(card): cp-7.81.0 restore slide-up entry without iOS modal presentation#31031

fix(card): cp-7.81.0 restore slide-up entry without iOS modal presentation#31031
Brunonascdev merged 9 commits into
mainfrom
fix/card-screens-modal-presentation

Brunonascdev commented Jun 3, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

codecov-commenter commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Brunonascdev commented Jun 3, 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

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov-commenter commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Jun 5, 2026

🔍 Smart E2E Test Selection

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Brunonascdev commented Jun 3, 2026 •

edited by cursor Bot

Loading

codecov-commenter commented Jun 5, 2026 •

edited

Loading