chore: migrate direct TextField usages for design system 0.22

[georgewrmarshall]

Description

Upgrades @metamask/design-system-react-native to ^0.22.0 and updates the app's direct design-system TextField and TextFieldSearch usages to the new API.

This migration moves native TextInput props under inputProps, switches ref-based call sites to inputRef, and updates test selectors where the testID now belongs on the inner input instead of the outer wrapper. It keeps the scope limited to direct imports from the design-system package rather than touching the local compatibility wrapper.

Validated with targeted unit tests covering the migrated login, password, onboarding, card authentication, and search flows.

Changelog

CHANGELOG entry: null

Related issues

Fixes: No issue: maintenance-only design system migration.

Manual testing steps

Feature: design system TextField 0.22 migration

  Scenario: user interacts with migrated TextField screens
    Given a build that includes the design system 0.22 TextField migration
    When the user opens login, choose password, reset password, rewards onboarding, card authentication, and trending search flows
    Then each screen should render without crashing
    And text entry should still update the field value correctly
    And submit and focus behaviors should continue to work for password and authentication forms

Screenshots/Recordings

Before

N/A

After

N/A

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

Medium Risk
Medium risk because it changes how critical password/auth inputs wire through TextField (props/ref/testIDs), which can subtly break focus/submit behavior or automated tests despite being a mostly mechanical migration.

Overview
Upgrades @metamask/design-system-react-native to ^0.22.0 and migrates direct TextField/TextFieldSearch usages to the new API by moving native TextInput props under inputProps and switching refs to inputRef.

Updates multiple auth/password entry surfaces (card authentication incl. OTP, login, choose/reset password, manual backup password confirmation, OAuth rehydration, rewards referral input, explore search) and adjusts unit tests/mocks/selectors so testID/queries target the inner input element under the new contract.

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

[github-actions]

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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeSeedlessOnboarding, SmokeMoney, SmokeWalletPlatform
• Selected Performance tags: @PerformanceLogin, @PerformanceOnboarding
• Risk Level: high
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:

The PR bumps @metamask/design-system-react-native from 0.21.0 to 0.22.0 and migrates TextField component usage across multiple critical views to use the new inputProps API pattern. The key risk is that testID and accessibilityLabel props are now passed inside inputProps instead of directly on the TextField component. If the TextField component doesn't properly forward these to the underlying TextInput, E2E tests using these selectors will fail.

Affected flows and corresponding tags:

1. Login/ChoosePassword/ResetPassword (Login, ChoosePassword, ResetPassword views): Core authentication flows used in virtually every test. The password input testID is now inside inputProps. This affects SmokeAccounts (wallet creation/import), SmokeSeedlessOnboarding (login flows), and SmokeWalletPlatform (wallet lifecycle).
2. ManualBackupStep1: SRP backup password entry - affects SmokeAccounts (SRP backup flows).
3. OAuthRehydration: OAuth/seedless login rehydration - affects SmokeSeedlessOnboarding.
4. RevealPrivateCredential/PasswordEntry: SRP and private key reveal - affects SmokeAccounts (SRP export flows).
5. CardAuthentication: MetaMask Card OTP/email/password fields - affects SmokeMoney (Card flows).
6. OnboardingMainStep (Rewards): Referral code input - affects SmokeWalletPlatform (wallet platform features).
7. ExploreSearchBar (TrendingView): Search bar autoCapitalize moved to inputProps - affects SmokeWalletPlatform (Trending search).

The Login view change is particularly critical as it's used in almost every E2E test flow. However, since the change is a refactor (same props, different nesting), and the design system version bump likely introduced this new API, the risk is primarily that the TextField component correctly forwards these props. The testID/accessibilityLabel being inside inputProps is the main concern for test selector resolution.

Tags NOT selected:

• SmokeConfirmations, SmokeSwap, SmokeStake, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeBrowser, SmokeSnaps, SmokePerps, SmokePredictions, SmokeIdentity: These flows don't directly use the modified TextField components in their critical paths, and the changes are a refactor rather than logic changes.

Performance Test Selection:
The Login and ChoosePassword views have been modified with the new TextField inputProps API. The @PerformanceLogin test covers password entry and unlock flows which use the modified Login view. The @PerformanceOnboarding test covers wallet creation flows which use the modified ChoosePassword view. These performance tests will validate that the TextField API change doesn't introduce any rendering regressions in these critical flows. The design system version bump (0.21 -> 0.22) could potentially affect render performance of TextField components.

View GitHub Actions results

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​metamask/​design-system-react-native@​0.21.0 ⏵ 0.22.0				+1

View full report

[socket-security]

Caution

MetaMask internal reviewing guidelines:

• Do not ignore-all
• Each alert has instructions on how to review if you don't know what it means. If lost, ask your Security Liaison or the supply-chain group
• Copy-paste ignore lines for specific packages or a group of one kind with a note on what research you did to deem it safe.
  @SocketSecurity ignore npm/PACKAGE@VERSION

Action	Severity	Alert  (click "▶" to expand/collapse)
Block		Network access: npm @metamask/design-system-react-native in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: package.json → npm/@metamask/design-system-react-native@0.22.0 ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@metamask/design-system-react-native@0.22.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[sonarqubecloud]

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