feat: [DSRN] Add TitleSubpage

[brianacnguyen]

Description

Adds TitleSubpage to @metamask/design-system-react-native: a layout for subpage headers with a required identity row (leading titleAvatar in a 40×40 centered slot + title stack), optional subtitle, amount (display typography when a string), optional bottom label or bottom accessory, and end accessories on title, subtitle, amount, and bottom label rows.

---

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-583

---

Manual testing steps

1. From the repo root, run React Native Storybook (e.g. yarn storybook:ios or yarn storybook:android).
2. Open Components → TitleSubpage and review Default, Amount, accessory variants, BottomLabel / BottomAccessory, and controls for text fields where enabled.
3. Confirm layout: avatar slot, title/subtitle/amount stacking, and bottom row behavior matches expectations.

---

Screenshots/Recordings

If applicable, add screenshots and/or recordings to visualize the before and after of your change.

Before

N/A — new component (or attach Storybook before/after if replacing something in-app).

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-08.at.21.41.11.mov

---

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.

---

Note

Low Risk
Low risk: this is a new React Native UI component plus Storybook/docs/tests and export wiring, with no changes to existing business logic beyond adding new type exports.

Overview
Adds TitleSubpage to @metamask/design-system-react-native, providing a standardized subpage header layout with a required titleAvatar identity row and optional subtitle, amount, end-accessories, and a mutually-exclusive bottom label vs custom bottom accessory.

Wires the component into public exports (components/index.ts), adds shared prop types in @metamask/design-system-shared, and includes Storybook stories, comprehensive RN tests, and a README; Storybook’s auto-generated storybook.requires.js is updated to include the new stories.

^{Reviewed by Cursor Bugbot for commit b824c63. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit b824c63. Configure here.}

[cursor]

Root container missing base gap-1 vertical spacing

Medium Severity

The root Box in TitleSubpage only passes the user-supplied twClassName with no base styles. This means there's no vertical gap between the identity row, amount row, and bottom rows. The test expects gap-1 on the container, but the component never applies it — neither via a gap={1} prop nor a base twClassName string. The README also states classes will be "merged with the component's default classes," implying base styles were intended but omitted.

Additional Locations (1)

• packages/design-system-react-native/src/components/TitleSubpage/TitleSubpage.test.tsx#L457-L458

 

^{Reviewed by Cursor Bugbot for commit b824c63. Configure here.}