chore: upgrade design system libraries to v34 (#29149)

## **Description**

Upgraded the mobile design system dependencies to the latest MetaMask
design system release (`v34.0.0`).

This updates `@metamask/design-system-react-native` from `^0.17.0` to
`^0.19.0` and `@metamask/design-system-twrnc-preset` from `^0.4.1` to
`^0.4.2`, with the corresponding lockfile updates including
`@metamask/design-system-shared@0.12.0`.

I checked the release notes and migration guide for the April 21, 2026
release and verified that this repo already satisfies the new React
Native peer minimums. I also scanned for the release's documented
breaking-change touchpoints (`HeaderRoot`, `Icon` prop typing, and
`isReactNodeRenderable`) and did not find any required app code changes
for this dependency-only upgrade.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: design system dependency upgrade

  Scenario: app builds and existing design system usage remains compatible
    Given the app is using the upgraded design system package versions
    When the TypeScript checks and app validation are run
    Then the dependency update should not require additional source changes
```

## **Screenshots/Recordings**

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] 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](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
- [ ] I've tested with a power user scenario
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Upgrades `@metamask/design-system-react-native`/`twrnc-preset`, which
can introduce subtle UI/behavior changes and enforces higher React
Native-related peer minimums; primary risk is build/runtime
compatibility across platforms.
> 
> **Overview**
> Upgrades the MetaMask mobile design system dependencies
(`@metamask/design-system-react-native` `0.17.0` → `0.19.0`,
`@metamask/design-system-twrnc-preset` `0.4.1` → `0.4.2`) and updates
the lockfile (including `@metamask/design-system-shared` to `0.12.0` and
newer peer minimums for React
Native/gesture-handler/reanimated/safe-area-context).
> 
> Updates several deprecated in-repo component wrappers’ JSDoc to add
direct links to the upstream design system migration guide sections (no
functional code changes in these components).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
52076e6. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

app/component-library/components-temp/ButtonFilter/ButtonFilter.tsx

@@ -9,6 +9,7 @@ import { ButtonFilterProps } from './ButtonFilter.types';
  * @deprecated Please update your code to use `ButtonFilter` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonFilter/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#buttonfilter-component Migration docs}
  * @since @metamask/design-system-react-native@0.11.0
  */
 const ButtonFilter = ({

app/component-library/components-temp/Buttons/ButtonHero/ButtonHero.tsx

@@ -60,6 +60,7 @@ const ButtonHeroInner = ({
  * @deprecated Please update your code to use `ButtonHero` from `@metamask/design-system-react-native`.
  * The API may have changed - compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonHero/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#buttonhero-component Migration docs}
  */
 const ButtonHero = (props: ButtonBaseProps) => (
   <ThemeProvider theme={Theme.Light}>

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx

@@ -28,6 +28,7 @@ import {
  * @deprecated Please update your code to use `BannerBase` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerBase/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#bannerbase-component Migration docs}
  * @since @metamask/design-system-react-native@0.11.0
  */
 const BannerBase: React.FC<BannerBaseProps> = ({

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx

@@ -35,6 +35,7 @@ import BottomSheetDialog, {
  * @deprecated Please update your code to use `BottomSheet` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheet/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#bottomsheet-component Migration docs}
  * @since @metamask/design-system-react-native@0.11.0
  */
 const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(

app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx

@@ -22,6 +22,7 @@ import {
  * @deprecated Please update your code to use `BottomSheetFooter` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheets/BottomSheetFooter/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#bottomsheetfooter-component Migration docs}
  * @since @metamask/design-system-react-native@0.7.0
  */
 const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({

app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.tsx

@@ -23,6 +23,7 @@ import {
  * @deprecated Please update your code to use `BottomSheetHeader` from `@metamask/design-system-react-native`.
  * The API may have changed - compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheetHeader/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#bottomsheetheader-component Migration docs}
  */
 const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({
   style,

app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx

@@ -24,6 +24,7 @@ import {
  * @deprecated Please update your code to use `ButtonBase` from `@metamask/design-system-react-native`.
  * The API may have changed - compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonBase/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#buttonbase-component Migration docs}
  */
 const ButtonBase = ({
   label,

app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.tsx

@@ -34,6 +34,7 @@ import {
  *
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TextButton/README.md | TextButton}
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Button/README.md | Button}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#textbutton-component-buttonlink Migration docs}
  */
 const ButtonLink: React.FC<ButtonLinkProps> = ({
   style,

app/component-library/components/Buttons/ButtonIcon/ButtonIcon.tsx

@@ -21,6 +21,7 @@ import {
  * @deprecated Please update your code to use `ButtonIcon` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonIcon/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#buttonicon-component Migration docs}
  */
 const ButtonIcon = ({
   iconName,

app/component-library/components/Checkbox/Checkbox.tsx

@@ -25,6 +25,7 @@ import {
  * @deprecated Please update your code to use `Checkbox` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Checkbox/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#checkbox-component Migration docs}
  */
 const Checkbox = ({
   style,