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 intoJun 5, 2026
Conversation
…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 -->
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. |
Contributor
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - PR targets a release or stable branch (release/* or stable) All E2E tests pre-selected. |
sleepytanya
approved these changes
Jun 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Card screens were opening with
presentation: 'modal'onRoutes.CARD.ROOTinMainNavigator.js. On iOSthat 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 appliesTransitionPresets.ModalSlideFromBottomIOSon the Card root screeninstead. 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
mainlocally, rebase ontolatest
mainbefore opening the PR so the diff only contains the Cardnavigation 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
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
Docs and MetaMask Mobile
Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Performance checks (if applicable)
SRPs
to import wallets with many accounts and tokens
performance metrics
trace()for usage andaddTokenfor an example
For performance guidelines and tooling, see the Performance
Guide.
Pre-merge reviewer checklist
app, test code being changed).
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'onRoutes.CARD.ROOT. It now usesTransitionPresets.ModalSlideFromBottomIOSso Card still slides up fromthe 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
transitionEndevents on the screen andparent 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
TransitionPresetsmocking inMainNavigatorand coveragefor 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.