Skip to content

Commit de13f1e

Browse files
authored
refactor(card onboarding): migrate to native stack (MetaMask#30707)
## **Description** Migrate the Card Onboarding flow off the JS stack navigator and react-navigation header in favor of native stack: - `app/components/UI/Card/routes/OnboardingNavigator.tsx` now uses `createNativeStackNavigator` from `@react-navigation/native-stack` instead of `createStackNavigator`. The navigator-level header is hidden for every screen (`headerShown: false`, `gestureEnabled: false`), so screens own their own header chrome. ## **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: ## **Manual testing steps** ```gherkin Feature: Card Onboarding header & navigation Scenario: Back navigation on early onboarding screens Given I am on the Card Onboarding "Sign Up", "Confirm Email", or "Complete" screen When I tap the back arrow in the header Then the navigator goes back to the previous screen Scenario: Exit with confirmation on post-email screens Given I am on "Set Phone Number", "Confirm Phone Number", "Verify Identity", "Personal Details", or "Physical Address" When I tap the close button in the header Then a confirmation alert appears asking me to confirm exiting onboarding When I confirm exit Then I am navigated to Wallet Home Scenario: Exit directly from KYC status screen Given I am on the "Verifying Veriff KYC" screen When I tap the close button in the header Then I am navigated directly to Wallet Home without a confirmation alert Scenario: Keyboard does not obscure inputs Given I am on any onboarding screen with a text input When I focus the input and the keyboard opens Then the input remains visible and the sticky action button (if any) stays above the keyboard Scenario: Resume incomplete onboarding (regression) Given I am a returning user with incomplete onboarding When I re-enter the Card flow Then the "Keep going" modal is shown and routes me to the correct resume step ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <img width="328" height="676" alt="card onboarding before" src="https://github.com/user-attachments/assets/81f6ec2d-e3a8-439a-9bf0-52ce4b47ae2b" /> ### **After** <img width="342" height="744" alt="Card Onboarding Navigation after" src="https://github.com/user-attachments/assets/26c198bb-d39c-40b0-ace0-3de1c467965e" /> Android https://github.com/user-attachments/assets/d85c4de6-514d-4186-a792-309a0e4452a2 <!-- [screenshots/recordings] --> ## **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 - [ ] 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 - [ ] 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`. --> - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 1dc693e. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent f7e1cce commit de13f1e

2 files changed

Lines changed: 8 additions & 8 deletions

File tree

app/components/UI/Card/routes/OnboardingNavigator.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ jest.mock('@react-navigation/native', () => {
5353
};
5454
});
5555

56-
// Mock @react-navigation/stack
57-
jest.mock('@react-navigation/stack', () => {
56+
// Mock @react-navigation/native-stack
57+
jest.mock('@react-navigation/native-stack', () => {
5858
const { View } = jest.requireActual('react-native');
5959
return {
60-
createStackNavigator: () => ({
60+
createNativeStackNavigator: () => ({
6161
Navigator: ({
6262
children,
6363
...props

app/components/UI/Card/routes/OnboardingNavigator.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useEffect, useMemo, useRef, useState } from 'react';
22
import {
3-
createStackNavigator,
4-
StackNavigationOptions,
5-
} from '@react-navigation/stack';
3+
createNativeStackNavigator,
4+
NativeStackNavigationOptions,
5+
} from '@react-navigation/native-stack';
66
import Routes from '../../../../constants/navigation/Routes';
77
import SignUp from '../components/Onboarding/SignUp';
88
import ConfirmEmail from '../components/Onboarding/ConfirmEmail';
@@ -27,10 +27,10 @@ import { CardUserPhase } from '../types';
2727
import Complete from '../components/Onboarding/Complete';
2828
import LockManagerService from '../../../../core/LockManagerService';
2929

30-
const Stack = createStackNavigator();
30+
const Stack = createNativeStackNavigator();
3131

3232
// All onboarding screens render HeaderStandard in-screen via OnboardingStep.
33-
const onboardingScreenOptions: StackNavigationOptions = {
33+
const onboardingScreenOptions: NativeStackNavigationOptions = {
3434
headerShown: false,
3535
gestureEnabled: false,
3636
};

0 commit comments

Comments
 (0)