Skip to content

chore(runway): cherry-pick fix(card): cp-7.81.0 restore slide-up entry without iOS modal presentation#31152

Merged
runway-github[bot] merged 1 commit into
release/7.81.0from
runway-cherry-pick-7.81.0-1780669782
Jun 5, 2026
Merged

chore(runway): cherry-pick fix(card): cp-7.81.0 restore slide-up entry without iOS modal presentation#31152
runway-github[bot] merged 1 commit into
release/7.81.0from
runway-cherry-pick-7.81.0-1780669782

Conversation

@runway-github

@runway-github runway-github Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

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

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.

[797534f](https://github.com/MetaMask/metamask-mobile/commit/797534ffe3923cf5ba5be195fcc58db19cd99106)

…y without iOS modal presentation (#31031)

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Card screens were opening with `presentation: 'modal'` on
`Routes.CARD.ROOT` in
[`MainNavigator.js`](app/components/Nav/Main/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**

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

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

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

### **Before**

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


https://github.com/user-attachments/assets/825a5c9e-5007-4603-8885-abf7ee30c1c0

### **After**

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


https://github.com/user-attachments/assets/b7ba587c-1bbe-4d99-a45d-03fec1f14de4

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

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

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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

<!-- Generated with the help of the pr-description AI skill -->



<!-- CURSOR_SUMMARY -->
---

> [!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`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
07a47c7. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
@runway-github runway-github Bot requested a review from a team as a code owner June 5, 2026 14:29
@github-actions

github-actions Bot commented Jun 5, 2026

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.

@mm-token-exchange-service mm-token-exchange-service Bot added the team-bots Bot team (for MetaMask Bot, Runway Bot, etc.) label Jun 5, 2026
@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - PR targets a release or stable branch (release/* or stable)

All E2E tests pre-selected.

View GitHub Actions results

@github-actions github-actions Bot added size-M risk:medium AI analysis: medium risk labels Jun 5, 2026
@runway-github runway-github Bot merged commit 4414dd2 into release/7.81.0 Jun 5, 2026
149 checks passed
@runway-github runway-github Bot deleted the runway-cherry-pick-7.81.0-1780669782 branch June 5, 2026 15:31
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

risk:medium AI analysis: medium risk size-M team-bots Bot team (for MetaMask Bot, Runway Bot, etc.)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants