MetaMask / MetaMask/metamask-mobile

Replace deprecated UI/Button component with Button from the component-library

Open
#8,108 1 comment 0 reactions 0 assignees View on GitHub
good first issue INVALID-ISSUE-TEMPLATE team-design-system
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### **Description**

There are many instances in the mobile codebase where the outdated `UI/Button` component (`app/components/UI/Button/`) is still in use. These should be replaced with the `Button` component from `@metamask/design-system-react-native`.

To keep changes small, safe, and reviewable across multiple contributors, **each pull request (PR) should focus on replacing a single instance** of the `UI/Button` component. This incremental approach ensures higher quality, easier testing, and faster approvals.

### **Technical Details**

- Identify and replace a single usage of the `UI/Button` component.
- Use the `Button` component from `@metamask/design-system-react-native`, making sure all necessary props and logic are updated.
- Reference: https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react-native/src/components/Button
- The APIs differ slightly, so ensure behavior and styling remain consistent.
- Validate the result for both functionality and visual alignment with the original.

### **Acceptance Criteria**

- Only one instance of `UI/Button` is replaced per PR.
- The new `Button` from `@metamask/design-system-react-native` is correctly implemented using the appropriate props and structure.
- No functional or visual regressions are introduced.
- Jest tests, e2e tests, linting, and Storybook must all pass.
- PR descriptions must follow the standard template and include before/after UI screenshots.

PRs that do not meet these requirements may be closed or returned for revision.

### **Difficulty**: Intermediate

**Good first issue for:** External contributors who can run mobile locally and are familiar with React Native, component-level migrations, testing, and maintaining UI consistency.

Contributor guide

Open the contributing guide

Research direction

Search the mobile codebase for a single usage of the component in app/components/UI/Button/ and review the Button API in the linked design-system-react-native reference. Update only that instance while preserving its behavior and styling, then run the requested Jest, e2e, lint, and Storybook checks and provide before/after screenshots.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.