chore: align RN animation stack with metamask-mobile#32966

[georgewrmarshall]

Description

Aligns MetaMask Design System React Native dev dependencies with metamask-mobile#32966, which bumps the animation/gesture stack ahead of the RN 0.85 upgrade.

Dependency updates (in @metamask/design-system-react-native devDependencies and @metamask/storybook-react-native):

• react-native-reanimated ~4.3.0 → 4.5.1
• react-native-worklets 0.8.3 → 0.10.1
• react-native-gesture-handler ~2.28.0 → ~2.32.0

Other changes:

• Removed the react-native-worklets@0.8.3 yarn patch — upstream 0.10 no longer registers the legacy Hermes CDP debug target the patch was suppressing (same rationale as mobile).
• Updated Jest setup to globally mock Reanimated/Worklets before component imports (Reanimated 4.5+ ships ESM-only entrypoints that break parallel Jest workers).
• Inlined Toaster animated styles (mirrors mobile Toast fix for Reanimated 4.5 type compatibility).
• Adjusted design-system-react-native TypeScript config (module/moduleResolution: bundler) so builds resolve the new ESM-first packages.
• Updated Storybook README and MIGRATION.md version guidance.

Babel configs already use react-native-worklets/plugin as the last plugin; no change needed there.

Note: Reanimated 4.5.1 and Worklets 0.10.1 declare peer support for RN 0.83–0.86. Storybook native validation still uses a dev build on RN 0.81.5 until the broader RN platform bump lands; yarn will warn on peer ranges until then.

Related issues

Refs: metamask-mobile#32966

Manual testing steps

1. yarn install && yarn build
2. yarn workspace @metamask/design-system-react-native run test
3. After native rebuild (yarn storybook:ios:build / yarn storybook:android:build), smoke-test animated components (BottomSheet, Toaster, HeaderStandardAnimated, Slider) in Storybook native.

Screenshots/Recordings

N/A — dependency and test tooling changes only; no user-facing UI changes.

Before

After

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

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.

  

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	react-native-gesture-handler@​2.28.0 ⏵ 2.32.0			+1
	react-native-worklets@​0.8.3 ⏵ 0.10.1			+1
	react-native-reanimated@​4.3.1 ⏵ 4.5.1

View full report

[socket-security]

Caution

MetaMask internal reviewing guidelines:

• Do not ignore-all
• Each alert has instructions on how to review if you don't know what it means. If lost, ask your Security Liaison or the supply-chain group
• Copy-paste ignore lines for specific packages or a group of one kind with a note on what research you did to deem it safe.
  @SocketSecurity ignore npm/PACKAGE@VERSION

Action	Severity	Alert  (click "▶" to expand/collapse)
Block		Potential security risk (AI signal): npm react-native-worklets is 72.0% likely risky Notes: High-impact security risk due to intentional dynamic JavaScript execution of source text obtained from objectToUnpack.__initData.code (via eval/evalWithSourceMap/evalWithSourceUrl). If an attacker can influence that input or tamper with the global eval helpers, this becomes an arbitrary code execution primitive in the JS context. No explicit exfiltration/backdoor mechanisms are visible in this fragment, but the code-loader pattern is inherently dangerous when trust boundaries are not strict. Confidence: 0.72 Severity: 0.80 From: apps/storybook-react-native/package.json → npm/react-native-worklets@0.10.1 ℹ Read more on: This package | This alert | What are AI-detected potential security risks? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system identified potential security problems in this package. It is advised to review the package thoroughly and assess the potential risks before installation. You may also consider reporting the issue to the package maintainer or seeking alternative solutions with a stronger security posture. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/react-native-worklets@0.10.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Block		Potential security risk (AI signal): npm react-native-worklets is 70.0% likely risky Notes: This module is centered on reconstructing executable “worklet” functions from serialized object metadata and installing them into objects. The key risk is direct dynamic evaluation (eval/evalWithSourceMap/evalWithSourceUrl) of initData.code without validation or sandboxing; if untrusted input can reach objectToUnpack.__initData.code (or objectToUnpack.__init), it becomes an arbitrary code execution vector. The additional global exposure of the unpacker increases the attack surface. No overt malicious payload behavior (e.g., exfiltration/persistence) is evident from this snippet alone, but the eval-based design warrants strong trust/integrity guarantees and threat-model review. Confidence: 0.70 Severity: 0.78 From: apps/storybook-react-native/package.json → npm/react-native-worklets@0.10.1 ℹ Read more on: This package | This alert | What are AI-detected potential security risks? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system identified potential security problems in this package. It is advised to review the package thoroughly and assess the potential risks before installation. You may also consider reporting the issue to the package maintainer or seeking alternative solutions with a stronger security posture. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/react-native-worklets@0.10.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[github-actions]

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

• 🖥️ React
• 📱 React Native

🌳 Main Branch (Latest)

• 🖥️ React
• 📱 React Native

[github-actions]

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

• 🖥️ React
• 📱 React Native

🌳 Main Branch (Latest)

• 🖥️ React
• 📱 React Native

[georgewrmarshall]

@SocketSecurity ignore npm/react-native-worklets@0.10.1

Same package/version already accepted on metamask-mobile#32966. The eval-based worklet unpacker is inherent to the official Software Mansion react-native-worklets runtime (required peer of Reanimated 4); input is compiler-generated worklet bytecode from our own Babel transform, not untrusted external input.