feat: [DSRN] Added TitleHub

[brianacnguyen]

Description

This PR adds TitleHub to @metamask/design-system-react-native: a layout component for a title row, an optional amount line with optional amountAccessory, an optional bottom label row with bottomLabelAccessory, and an optional bottomAccessory when the bottom label row is not used.

Related issues

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

Manual testing steps

1. From the repo root, run React Native Storybook (e.g. yarn storybook:ios or yarn storybook:android per your setup).
2. Open Components → TitleHub and review Default, Amount, Title / TitleAccessory, BottomLabel / BottomLabelAccessory, BottomAccessory, and AmountAccessory.
3. Confirm layout and typography match expectations on light/dark backgrounds if applicable.

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-07.at.23.26.18.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
Adds a new, self-contained UI component with Storybook/docs/tests and only minor export surface changes; low risk outside of potential downstream typing/import adjustments.

Overview
Adds new TitleHub component to @metamask/design-system-react-native, providing a standardized left-aligned header block with a required title row plus optional amount, inline accessories, and either a bottom label row or a custom bottom accessory (mutually exclusive).

Exposes new shared prop type TitleHubPropsShared from design-system-shared, wires TitleHub exports through the React Native component index, and registers a new Storybook story set. Includes a full README and comprehensive render/prop forwarding tests (including twClassName/style and slot renderability rules).

^{Reviewed by Cursor Bugbot for commit 0438865. 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 0438865. Configure here.}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[amandaye0h]

Spacing/Gap between the bottomLabel components here is a bit too big — can the default be updated to 8px?

[amandaye0h]

Added comments re: spacing and icon sizes

[amandaye0h]

Imo this testnet badge shouldn't be part of the docs, since it's visually dissimilar from the rest of the components in our library. We can include it temporarily, but it should be updated to a component with squareish borders.

[brianacnguyen]

Added a TODO comment

[brianacnguyen]

Spacing/Gap between the `bottomLabel` components here is a bit too big — can the default be updated to 8px?

This is a story, and ironically the gap is 8px right now. Removed the gap

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook