Release 34.0.0 by georgewrmarshall · Pull Request #1094 · MetaMask/metamask-design-system

georgewrmarshall · 2026-04-20T21:50:26Z

Release 34.0.0

This release adds new shared TitleHub and Checkbox type contracts, expands React 19 support for web and shared packages, and publishes a React Native release that aligns its supported runtime with the React Native 0.76 / Storybook 10 stack.

📦 Package Versions

@metamask/design-system-shared: 0.12.0
@metamask/design-system-react: 0.17.1
@metamask/design-system-react-native: 0.19.0
@metamask/design-system-twrnc-preset: 0.4.2

🔄 Shared Type Updates (0.12.0)

Shared contract additions and API cleanup (#1052, #1040, #1076, #1089)

What Changed:

Added TitleHubPropsShared and CheckboxPropsShared to @metamask/design-system-shared
Removed isReactNodeRenderable from the public shared API
Expanded the shared package react peer dependency range to support React 19

Impact:

Enables consistent TitleHub and Checkbox implementations across React and React Native
Consumers importing isReactNodeRenderable must replace that import with plain truthy checks
Shared consumers on React 19 can now satisfy peer dependency requirements without overrides

🌐 React Web Updates (0.17.1)

Changed

Expanded the react and react-dom peer dependency ranges to support React 19 consumers without changing the public component API (#1089)

📱 React Native Updates (0.19.0)

Added

Added TitleHub for stacked title, amount, and bottom-label layouts with optional accessory slots (#1052)

Changed

BREAKING: Raised the minimum supported peer dependency versions to React Native >=0.76.0, react-native-gesture-handler >=2.25.0, react-native-reanimated >=3.17.0, and react-native-safe-area-context >=5.0.0 (#844)
BREAKING: HeaderRoot now renders titleAccessory only when title is present; use children for fully custom accessory-only title rows (#1076)
BREAKING: IconProps now align with the underlying SVG component props instead of ViewProps; move View-specific props to a wrapper view if TypeScript flags them after upgrading (#1090)

🎨 TWRNC Preset Updates (0.4.2)

Changed

Expanded the react peer dependency range to >=18.2.0, allowing the preset to install alongside newer React Native 0.76 and React 19 app stacks (#844)

⚠️ Breaking Changes

`isReactNodeRenderable` removal (Shared)

What Changed:

Removed isReactNodeRenderable from @metamask/design-system-shared
Shared consumers should replace this helper with standard truthy checks

Migration:

// Before (0.11.0)
import { isReactNodeRenderable } from '@metamask/design-system-shared';

if (isReactNodeRenderable(title)) {
  return <Header title={title} />;
}

// After (0.12.0)
if (title) {
  return <Header title={title} />;
}

Impact:

Any import of isReactNodeRenderable will fail after upgrading to 0.12.0
See Shared Migration Guide

React Native 0.76 peer minimums (React Native)

What Changed:

Raised the minimum supported peer dependency versions to the React Native 0.76 family used by the Storybook 10 migration

Migration:

// Before (0.18.0)
// Compatible with older app stacks such as:
// react-native: 0.72.x
// react-native-gesture-handler: 2.12.x
// react-native-reanimated: 3.3.x
// react-native-safe-area-context: 4.x

// After (0.19.0)
// Consumers must be on at least:
// react-native: 0.76.x
// react-native-gesture-handler: 2.25.x
// react-native-reanimated: 3.17.x
// react-native-safe-area-context: 5.x

Impact:

Apps on older React Native stacks will no longer satisfy peer dependency requirements
See React Native Migration Guide

`HeaderRoot` accessory rendering and `IconProps` typing (React Native)

What Changed:

HeaderRoot no longer renders titleAccessory unless title is present
IconProps now align with SVG props instead of ViewProps

Migration:

// Before (0.18.0)
<HeaderRoot titleAccessory={<Icon name={IconName.Info} />} />
<Icon name={IconName.Lock} onLayout={handleLayout} />

// After (0.19.0)
<HeaderRoot title="Settings" titleAccessory={<Icon name={IconName.Info} />} />
<View onLayout={handleLayout}>
  <Icon name={IconName.Lock} />
</View>

Impact:

Accessory-only HeaderRoot title rows must switch to children or provide title
View-specific props on Icon must move to a wrapper View
See React Native Migration Guide

✅ Checklist

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've reviewed the Release Workflow cursor rule
All tests pass (yarn build && yarn test && yarn lint)
Changelog validation passes (yarn changelog:validate)

Pre-merge reviewer checklist

I've reviewed the Reviewing Release PRs guide
Package versions follow semantic versioning
Changelog entries are consumer-facing (not commit message regurgitation)
Breaking changes are documented in MIGRATION.md with examples
All unreleased changes are accounted for in changelogs

github-actions · 2026-04-20T21:51:32Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-20T22:01:27Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-20T22:05:41Z

+### Changed
+
+- **BREAKING:** Raised the minimum supported peer dependency versions to React Native `>=0.76.0`, `react-native-gesture-handler >=2.25.0`, `react-native-reanimated >=3.17.0`, and `react-native-safe-area-context >=5.0.0` to align the package with the React Native 0.76 and Storybook 10 stack. ([#844](https://github.com/MetaMask/metamask-design-system/pull/844))
+- **BREAKING:** `HeaderRoot` now renders `titleAccessory` only when `title` is present; use `children` for fully custom accessory-only title rows. See [Migration Guide](./MIGRATION.md#from-version-0180-to-0190). ([#1076](https://github.com/MetaMask/metamask-design-system/pull/1076))


HeaderRoot and IconProps are called out separately because they are distinct consumer-facing breakpoints beyond the dependency alignment. That gives reviewers a clearer model of the release: one install-time compatibility change and two direct API or behavior changes.

georgewrmarshall · 2026-04-20T22:05:41Z

 {
  "name": "@metamask/design-system-react",
-  "version": "0.17.0",
+  "version": "0.17.1",


This package is treated as a patch release because widening peer support to React 19 improves compatibility without adding new components, props, or runtime behavior. Reviewers should read this as an ecosystem-support release rather than a feature release.

georgewrmarshall · 2026-04-20T22:05:41Z

+
+### Changed
+
+- Expanded the `react` and `react-dom` peer dependency ranges to support React 19 consumers. ([#1089](https://github.com/MetaMask/metamask-design-system/pull/1089))


The design-system-react changelog is intentionally narrow here: the consumer-facing release note is just React 19 peer dependency support. Internal architectural changes like the shared checkbox type extraction are omitted because they do not change the public web API or add direct consumer value.

georgewrmarshall · 2026-04-20T22:05:41Z

+
+### Changed
+
+- **BREAKING:** Raised the minimum supported peer dependency versions to React Native `>=0.76.0`, `react-native-gesture-handler >=2.25.0`, `react-native-reanimated >=3.17.0`, and `react-native-safe-area-context >=5.0.0` to align the package with the React Native 0.76 and Storybook 10 stack. ([#844](https://github.com/MetaMask/metamask-design-system/pull/844))


The React Native peer minimum bump is called out explicitly because this package is being aligned with the same runtime stack used in MetaMask Mobile. That alignment matters for confidence in component behavior, Storybook coverage, and test reliability across the environments we actually validate against.

georgewrmarshall · 2026-04-20T22:05:41Z

+
+### Removed
+
+- **BREAKING:** Removed `isReactNodeRenderable` from the public API; replace imports with plain truthy checks instead. See [Migration Guide](./MIGRATION.md#from-version-0110-to-0120). ([#1076](https://github.com/MetaMask/metamask-design-system/pull/1076))


This is documented as breaking because isReactNodeRenderable was part of the published shared package surface, even though design-system-shared is primarily an internal package. The note explains the pre-1.0 minor bump without overstating likely downstream impact.

georgewrmarshall · 2026-04-20T22:05:41Z

+
+### Changed
+
+- Expanded the `react` peer dependency range to `>=18.2.0`, allowing the preset to install alongside newer React Native 0.76 and React 19 app stacks. ([#844](https://github.com/MetaMask/metamask-design-system/pull/844))


This stays a patch-level compatibility note because the preset only widens the supported React range for newer app stacks. It signals inclusion in the release without implying migration work for existing consumers.

## Release 34.0.0 This release adds new shared `TitleHub` and `Checkbox` type contracts, expands React 19 support for web and shared packages, and publishes a React Native release that aligns its supported runtime with the React Native 0.76 / Storybook 10 stack. ### 📦 Package Versions - `@metamask/design-system-shared`: **0.12.0** - `@metamask/design-system-react`: **0.17.1** - `@metamask/design-system-react-native`: **0.19.0** - `@metamask/design-system-twrnc-preset`: **0.4.2** ### 🔄 Shared Type Updates (0.12.0) #### Shared contract additions and API cleanup ([#1052](#1052), [#1040](#1040), [#1076](#1076), [#1089](#1089)) **What Changed:** - Added `TitleHubPropsShared` and `CheckboxPropsShared` to `@metamask/design-system-shared` - Removed `isReactNodeRenderable` from the public shared API - Expanded the shared package `react` peer dependency range to support React 19 **Impact:** - Enables consistent `TitleHub` and `Checkbox` implementations across React and React Native - Consumers importing `isReactNodeRenderable` must replace that import with plain truthy checks - Shared consumers on React 19 can now satisfy peer dependency requirements without overrides ### 🌐 React Web Updates (0.17.1) #### Changed - Expanded the `react` and `react-dom` peer dependency ranges to support React 19 consumers without changing the public component API ([#1089](#1089)) ### 📱 React Native Updates (0.19.0) #### Added - Added `TitleHub` for stacked title, amount, and bottom-label layouts with optional accessory slots ([#1052](#1052)) #### Changed - **BREAKING:** Raised the minimum supported peer dependency versions to React Native `>=0.76.0`, `react-native-gesture-handler >=2.25.0`, `react-native-reanimated >=3.17.0`, and `react-native-safe-area-context >=5.0.0` ([#844](#844)) - **BREAKING:** `HeaderRoot` now renders `titleAccessory` only when `title` is present; use `children` for fully custom accessory-only title rows ([#1076](#1076)) - **BREAKING:** `IconProps` now align with the underlying SVG component props instead of `ViewProps`; move `View`-specific props to a wrapper view if TypeScript flags them after upgrading ([#1090](#1090)) ### 🎨 TWRNC Preset Updates (0.4.2) #### Changed - Expanded the `react` peer dependency range to `>=18.2.0`, allowing the preset to install alongside newer React Native 0.76 and React 19 app stacks ([#844](#844)) ### ⚠️ Breaking Changes #### `isReactNodeRenderable` removal (Shared) **What Changed:** - Removed `isReactNodeRenderable` from `@metamask/design-system-shared` - Shared consumers should replace this helper with standard truthy checks **Migration:** ```tsx // Before (0.11.0) import { isReactNodeRenderable } from '@metamask/design-system-shared'; if (isReactNodeRenderable(title)) { return <Header title={title} />; } // After (0.12.0) if (title) { return <Header title={title} />; } ``` **Impact:** - Any import of `isReactNodeRenderable` will fail after upgrading to `0.12.0` - See [Shared Migration Guide](./packages/design-system-shared/MIGRATION.md#from-version-0110-to-0120) #### React Native 0.76 peer minimums (React Native) **What Changed:** - Raised the minimum supported peer dependency versions to the React Native 0.76 family used by the Storybook 10 migration **Migration:** ```tsx // Before (0.18.0) // Compatible with older app stacks such as: // react-native: 0.72.x // react-native-gesture-handler: 2.12.x // react-native-reanimated: 3.3.x // react-native-safe-area-context: 4.x // After (0.19.0) // Consumers must be on at least: // react-native: 0.76.x // react-native-gesture-handler: 2.25.x // react-native-reanimated: 3.17.x // react-native-safe-area-context: 5.x ``` **Impact:** - Apps on older React Native stacks will no longer satisfy peer dependency requirements - See [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0180-to-0190) #### `HeaderRoot` accessory rendering and `IconProps` typing (React Native) **What Changed:** - `HeaderRoot` no longer renders `titleAccessory` unless `title` is present - `IconProps` now align with SVG props instead of `ViewProps` **Migration:** ```tsx // Before (0.18.0) <HeaderRoot titleAccessory={<Icon name={IconName.Info} />} /> <Icon name={IconName.Lock} onLayout={handleLayout} /> // After (0.19.0) <HeaderRoot title="Settings" titleAccessory={<Icon name={IconName.Info} />} /> <View onLayout={handleLayout}> <Icon name={IconName.Lock} /> </View> ``` **Impact:** - Accessory-only `HeaderRoot` title rows must switch to `children` or provide `title` - `View`-specific props on `Icon` must move to a wrapper `View` - See [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0180-to-0190) ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (`0.11.0` → `0.12.0`) - pre-1.0 breaking shared API cleanup plus new shared type exports - [x] design-system-react: patch (`0.17.0` → `0.17.1`) - non-breaking compatibility update that widens React peer support to include v19 - [x] design-system-react-native: minor (`0.18.0` → `0.19.0`) - pre-1.0 breaking peer minimum and API behavior/type changes - [x] design-system-twrnc-preset: patch (`0.4.1` → `0.4.2`) - non-breaking peer range expansion - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've reviewed the [Release Workflow](./.cursor/rules/release-workflow.md) cursor rule - [x] All tests pass (`yarn build && yarn test && yarn lint`) - [x] Changelog validation passes (`yarn changelog:validate`) ## **Pre-merge reviewer checklist** - [ ] I've reviewed the [Reviewing Release PRs](./docs/reviewing-release-prs.md) guide - [ ] Package versions follow semantic versioning - [ ] Changelog entries are consumer-facing (not commit message regurgitation) - [ ] Breaking changes are documented in MIGRATION.md with examples - [ ] All unreleased changes are accounted for in changelogs

georgewrmarshall added 3 commits April 20, 2026 14:29

Initialize Release 34.0.0

7ea63de

Update Release 34.0.0

79b82e6

docs: polish release 34.0.0 changelogs

baf115d

georgewrmarshall requested a review from a team as a code owner April 20, 2026 21:50

chore: downgrade design-system-react release to patch

fe8eb3a

georgewrmarshall commented Apr 20, 2026

View reviewed changes

georgewrmarshall self-assigned this Apr 20, 2026

georgewrmarshall enabled auto-merge (squash) April 20, 2026 22:06

AndyMBridges approved these changes Apr 21, 2026

View reviewed changes

georgewrmarshall merged commit 225e64a into main Apr 21, 2026
44 checks passed

georgewrmarshall deleted the release/34.0.0 branch April 21, 2026 17:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 34.0.0#1094

Release 34.0.0#1094
georgewrmarshall merged 4 commits into
mainfrom
release/34.0.0

georgewrmarshall commented Apr 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

georgewrmarshall Apr 20, 2026

Uh oh!

georgewrmarshall Apr 20, 2026

Uh oh!

georgewrmarshall Apr 20, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Apr 20, 2026

Uh oh!

georgewrmarshall Apr 20, 2026

Uh oh!

georgewrmarshall Apr 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Changed

		- Expanded the `react` and `react-dom` peer dependency ranges to support React 19 consumers. ([#1089](https://github.com/MetaMask/metamask-design-system/pull/1089))


		### Changed

		- BREAKING: Raised the minimum supported peer dependency versions to React Native `>=0.76.0`, `react-native-gesture-handler >=2.25.0`, `react-native-reanimated >=3.17.0`, and `react-native-safe-area-context >=5.0.0` to align the package with the React Native 0.76 and Storybook 10 stack. ([#844](https://github.com/MetaMask/metamask-design-system/pull/844))


		### Removed

		- BREAKING: Removed `isReactNodeRenderable` from the public API; replace imports with plain truthy checks instead. See [Migration Guide](./MIGRATION.md#from-version-0110-to-0120). ([#1076](https://github.com/MetaMask/metamask-design-system/pull/1076))


		### Changed

		- Expanded the `react` peer dependency range to `>=18.2.0`, allowing the preset to install alongside newer React Native 0.76 and React 19 app stacks. ([#844](https://github.com/MetaMask/metamask-design-system/pull/844))

Uh oh!

Conversation

georgewrmarshall commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release 34.0.0

📦 Package Versions

🔄 Shared Type Updates (0.12.0)

Shared contract additions and API cleanup (#1052, #1040, #1076, #1089)

🌐 React Web Updates (0.17.1)

Changed

📱 React Native Updates (0.19.0)

Added

Changed

🎨 TWRNC Preset Updates (0.4.2)

Changed

⚠️ Breaking Changes

isReactNodeRenderable removal (Shared)

React Native 0.76 peer minimums (React Native)

HeaderRoot accessory rendering and IconProps typing (React Native)

✅ Checklist

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 20, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Apr 20, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Apr 20, 2026 •

edited

Loading

`isReactNodeRenderable` removal (Shared)

`HeaderRoot` accessory rendering and `IconProps` typing (React Native)

georgewrmarshall Apr 20, 2026 •

edited

Loading