MetaMask / MetaMask/metamask-mobile
Replace deprecated StyledButton component with Button from the component-library
- 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 `StyledButton` component (`app/components/UI/StyledButton/`) is still in use. These should be replaced with the `Button` component from `@metamask/design-system-react-native`.
To support a smooth migration process across multiple contributors and maintain manageable PR sizes, **each pull request (PR) should focus on replacing a single instance** of the `StyledButton` component. This makes it easier to review, test, and prevent regressions.
### **Technical Details**
- Replace one instance of `StyledButton` with the `Button` component from `@metamask/design-system-react-native`.
- Reference: https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react-native/src/components/Button
- Ensure all relevant props are updated to match the new API.
- Component APIs differ slightly—carefully review each usage to preserve behavior and appearance.
- Verify the replacement introduces no functional or visual regressions.
### **Acceptance Criteria**
- Only a single instance of `StyledButton` is replaced in each PR.
- New `Button` component from `@metamask/design-system-react-native` is correctly integrated with proper props and logic.
- No visual or functional regressions are introduced.
- All Jest tests, e2e tests, linting, and Storybook must pass.
- PR descriptions must follow the provided template and include before/after UI screenshots.
PRs that do not meet these criteria may be closed or requested for revision.
### **Difficulty**: Intermediate
**Good first issue for:** External contributors who can run the mobile app locally and have experience with React Native, component APIs, and maintaining consistent UI and test coverage.
Contributor guide
Research direction
Search the mobile codebase for one usage of app/components/UI/StyledButton/ and inspect the Button API in the referenced @metamask/design-system-react-native component-library path. Replace only that instance, preserving its behavior and appearance, then run the relevant Jest, e2e, lint, and Storybook checks and include 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
- 38/100