MetaMask / MetaMask/metamask-mobile

Replace deprecated CheckBox component with Checkbox from the component-library

Open
#6,882 5 comments 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 `CheckBox` component (`@react-native-community/checkbox`) is still being used. These need to be gradually replaced with the `Checkbox` component from `@metamask/design-system-react-native`.

To keep reviews manageable and reduce the risk of unintended regressions, **each pull request (PR) should focus on replacing a single instance** of the outdated component. This allows for clear tracking of changes and a smoother migration process.

### **Technical Details**

- Identify and replace a single instance of the deprecated `CheckBox` component.
- Use the `Checkbox` component from `@metamask/design-system-react-native` and ensure all relevant props are correctly mapped.
- Reference: https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react-native/src/components/Checkbox
- APIs differ slightly—verify any behavioral or visual differences are handled.
- Confirm the replacement maintains existing functionality and design integrity.

### **Acceptance Criteria**

- Only one instance of `CheckBox` is replaced in each PR.
- The new `Checkbox` from `@metamask/design-system-react-native` is correctly implemented with the appropriate props.
- No functional changes or visual regressions are introduced.
- Jest tests, e2e tests, linting, and Storybook must all pass.
- PR includes before and after UI screenshots for visual validation.

PRs not following this guidance may be closed or requested for revision.

### **Difficulty**: Intermediate

**Good first issue for:** External contributors who are familiar with React Native, component APIs, and maintaining UI consistency in mobile apps.

Contributor guide

Open the contributing guide

Research direction

Search the mobile codebase for a single use of the deprecated CheckBox from @react-native-community/checkbox, then read the Checkbox component reference in packages/design-system-react-native/src/components/Checkbox. Compare the existing props with the new API and verify the replacement preserves behavior and appearance. Done means one instance is migrated, with Jest, e2e tests, linting, Storybook, and before/after screenshots completed.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.