chore: migrate design system to reanimated 4

[georgewrmarshall]

Description

Upgrade the design-system React Native package to the Reanimated 4 / worklets stack used by mobile, including the Babel plugin switch, worklets scheduling API migration, and the matching dependency bumps.

Related issues

Fixes:

Manual testing steps

1. Run the BottomSheetDialog and Toaster Jest suites with coverage disabled.
2. Verify the worklets mock initializes correctly in Jest.
3. Smoke test the animated component surfaces in Storybook / mobile integration.

Screenshots/Recordings

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
• 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

Medium Risk
Changes the animation bridge and Babel pipeline for bottom sheet and toast UI; dependency upgrades are broad but the code changes follow a consistent worklets API migration.

Overview
Migrates the React Native design system and Storybook app to Reanimated 4 with react-native-worklets 0.8.3 (from 0.5.x), bumping react-native-reanimated to ~4.3 and adding a root Yarn patch so the worklets Babel plugin can read source files whose paths include query/hash suffixes.

Runtime / API: Babel’s last plugin switches from react-native-reanimated/plugin to react-native-worklets/plugin. BottomSheetDialog and Toaster replace runOnJS with scheduleOnRN from worklets for animation completion callbacks. Jest adds a worklets mock (including scheduleOnRN). Package peer dependencies now require Reanimated ≥4 and worklets ≥0.8.3.

Storybook: On-device controls addon is disabled and the ondevice-controls ESM patch is removed. Device preview is simplified (drops extra gesture-handler / safe-area / token background wrapping). Web Storybook configures the worklets plugin with disableSourceMaps, uses Vite’s built-in resolve.tsconfigPaths, and drops vite-tsconfig-paths. Expo start scripts no longer run prestorybook; story discovery is a separate storybook-generate script.

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

[socket-security]

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

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​babel/​preset-typescript@​7.27.1 ⏵ 7.29.7
	@​babel/​plugin-transform-modules-commonjs@​7.28.6 ⏵ 7.29.7
	react-native-worklets@​0.5.1 ⏵ 0.8.3			+2
	react-native-reanimated@​4.1.7 ⏵ 4.3.1	+1		-1

View full report

[socket-security]

Warning

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)
Warn		Potential code anomaly (AI signal): npm @babel/helper-module-imports is 100.0% likely to have a medium risk anomaly Notes: The analyzed code is a Babel AST helper (ImportBuilder) used to construct import statements and interop-wrapped imports. It contains no indicators of malicious behavior, data exfiltration, backdoors, or runtime abuses. It operates within a compiler/transpiler context to produce code, not to execute arbitrary user data. Therefore, the code itself does not present security risks or malware indicators under normal usage. This is benign library behavior intended for code transformation. Confidence: 1.00 Severity: 0.60 From: ? → npm/@babel/core@7.29.0 → npm/@rolldown/plugin-babel@0.2.3 → npm/expo@54.0.34 → npm/@babel/plugin-transform-modules-commonjs@7.29.7 → npm/@babel/preset-env@7.26.0 → npm/@babel/preset-react@7.27.1 → npm/metro-react-native-babel-preset@0.76.9 → npm/@react-native/babel-preset@0.81.5 → npm/@babel/helper-module-imports@7.29.7 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? 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 found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/helper-module-imports@7.29.7. 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.
Warn		Potential code anomaly (AI signal): npm @babel/helper-module-transforms is 100.0% likely to have a medium risk anomaly Notes: The code is a legitimate, static-code transformation utility used in Babel to ensure proper behavior of ES module bindings after transforms. There is no evidence of malicious behavior, data leakage, or external communications within this fragment. It operates purely on AST-level transformations consistent with module import/export handling. Confidence: 1.00 Severity: 0.60 From: ? → npm/@babel/core@7.29.0 → npm/@babel/plugin-transform-modules-commonjs@7.29.7 → npm/@babel/preset-env@7.26.0 → npm/@babel/helper-module-transforms@7.29.7 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? 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 found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/helper-module-transforms@7.29.7. 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.
Warn		Potential code anomaly (AI signal): npm react-native-worklets is 100.0% likely to have a medium risk anomaly Notes: The primary security concern in this module is deliberate dynamic evaluation of JavaScript code provided via objectToUnpack.__initData.code (eval/evalWithSourceMap/evalWithSourceUrl), along with execution of a caller-provided initializer function (__init). While consistent with worklet/function serialization runtimes, this creates a high-impact code-injection/remote code execution risk if upstream trust boundaries are not strictly enforced. No explicit malware behaviors (exfiltration/persistence/stealth) are evident in this snippet alone. Confidence: 1.00 Severity: 0.60 From: apps/storybook-react-native/package.json → npm/react-native-worklets@0.8.3 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? 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 found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. 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.8.3. 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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Worklets import missing peer
  • Added react-native-worklets as a peerDependency and raised react-native-reanimated peer to �>=4.0.0 to align with component usage.

Or push these changes by commenting:

@cursor push c3f8f7716f

Preview (c3f8f7716f)

diff --git a/packages/design-system-react-native/package.json b/packages/design-system-react-native/package.json
--- a/packages/design-system-react-native/package.json
+++ b/packages/design-system-react-native/package.json
@@ -96,8 +96,9 @@
     "react": ">=18.2.0",
     "react-native": ">=0.76.0",
     "react-native-gesture-handler": ">=2.25.0",
-    "react-native-reanimated": ">=3.17.0",
-    "react-native-safe-area-context": ">=5.0.0"
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-worklets": ">=0.8.3"
   },
   "engines": {
     "node": ">=20"

_{You can send follow-ups to the cloud agent here.}

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

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook