feat: [DSRN] Added HeaderStandardAnimated

[brianacnguyen]

Description

This PR adds HeaderStandardAnimated to @metamask/design-system-react-native: a scroll-linked variant of HeaderStandard that fades and shifts the center title block as the user scrolls past the first content section, so the compact header title stays readable.

Motivation: Screens that use a large title area inside the scroll body often need the header center copy to transition smoothly once that section scrolls away—without ad‑hoc animation in every screen.

Solution:

• HeaderStandardAnimated — Same API shape as HeaderStandard for the bar (back/close, etc.), but children is omitted; the center is built from title / subtitle like HeaderStandard. It accepts Reanimated scrollY and titleSectionHeight shared values and animates opacity and vertical offset when scrollY reaches the measured title section height.
• useHeaderStandardAnimated — Initializes shared values, exposes setTitleSectionHeight (for onLayout on the first scroll section), and onScroll for Animated.ScrollView so scroll updates stay on the UI thread.

Also included: TypeScript types, unit tests for the component and hook, React Native Storybook stories (Default, Subtitle), component README, and public exports from the package.

---

Related issues

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

---

Manual testing steps

1. From the repo root, run the React Native Storybook app (e.g. yarn storybook:ios or yarn storybook:android per project docs).
2. Open Components → HeaderStandardAnimated.
3. In Default and Subtitle, scroll the list and confirm the center title animates in as the large title section scrolls away; confirm back behavior and subtitle story match expectations.

---

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-28.at.21.36.34.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: adds new components/hooks and refactors HeaderStandard center rendering without changing external behavior; main risk is regressions in header title/subtitle rendering and Reanimated-driven animation edge cases.

Overview
Adds HeaderStandardAnimated, a scroll-driven variant of HeaderStandard that fades/translates the centered title block based on scrollY and measured titleSectionHeight, plus a useHeaderStandardAnimated hook to provide shared values and an onScroll handler.

Refactors HeaderStandard to delegate its title/subtitle rendering to a new shared HeaderStandardCenterColumn temp component and updates HeaderStandardProps to reuse the shared title/subtitle field types.

Includes Storybook stories, README docs, unit tests for the new component/hook, public exports from components/index.ts, and relaxes Jest coverage thresholds for useHeaderStandardAnimated.ts due to Reanimated worklet mocking limitations.

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

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

There are 4 total unresolved issues (including 2 from previous reviews).

^{❌ 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 3daf77d. Configure here.}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

A few follow-ups before approval. The new component direction makes sense, but I think there are some cleanup items around Storybook wiring, duplicated implementation/test surface, and Jest coverage policy that would make this easier to maintain.

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

The current revision looks ready to merge. The earlier cleanup items around Storybook wiring, shared center-title rendering, animation constants, and Jest coverage policy all look addressed in the latest head, and the focused RN tests for the animated header, hook, and shared center-column pass locally.

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook