feat(design-system-react-native): add Switch component

[brianacnguyen]

Description

Add a new Switch component to @metamask/design-system-react-native that wraps React Native's native Switch with platform-specific fixes and proper accessibility support.

Key Features:

• iOS alignment fix: Applies marginRight: 4 on iOS to correct visual misalignment when placed in flex containers with justifyContent: 'space-between'. This addresses the issue where iOS Switch appears shifted compared to Android due to invisible built-in trailing padding.
• Proper accessibility support: Sets accessibilityRole="switch", accessibilityState (checked/disabled), and accessibilityLabel
• Optional label prop: Renders text beside the switch using the Text component with proper styling
• Controlled component pattern: Uses isOn and onValueChange props for state management
• Disabled state: isDisabled prop with opacity styling applied to the container
• Shared types: Types defined in @metamask/design-system-shared following ADR-0004 centralized types architecture

Files Added:

• packages/design-system-shared/src/types/Switch/ - Shared types (ADR-0004)
• packages/design-system-react-native/src/components/Switch/ - Component, types, tests, stories, README

Related issues

Fixes: DSYS-659

Manual testing steps

1. Run yarn storybook:ios or yarn storybook:android
2. Navigate to Components > Switch
3. Test the Default story with controls
4. Verify IsOn, IsDisabled, Label, and WithoutLabel stories
5. On iOS, verify the switch aligns correctly with content in flex containers

Screenshots/Recordings

Before

N/A - New component

After

The Switch component provides a consistent API and visual alignment across iOS and Android platforms.

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• 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.

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.

Slack Thread

  

[github-actions]

📖 Storybook Preview

• View PR Storybook