fix: worklets bug

[Juliusohblen]

Summary

Problem: React Native Reanimated worklets were failing in the Next.js
browser environment because worklets require a special JavaScript
runtime that only exists in React Native, not in web browsers.

Solution: Created a custom Reanimated mock and configured webpack to use
it for web builds.

Changes Made

1. Added dependency (apps/docs/package.json)
   - Installed react-native-reanimated@~4.1.3 in the docs app
2. Created custom mock (apps/docs/src/lib/reanimated-mock.js)
   - Provides no-op implementations of all Reanimated hooks
   (useAnimatedStyle, useDerivedValue, withTiming, etc.)
   - Exports mock layout animations that won't throw errors
   - Uses regular React Native Web components instead of animated ones
   - Crucially: doesn't import from real Reanimated, preventing worklet
   initialization
3. Updated webpack config (apps/docs/next.config.mjs:95)
   - Added alias: 'react-native-reanimated$': path.resolve(__dirname,
   './src/lib/reanimated-mock.js')
   - Redirects all Reanimated imports to the custom mock on web

Result

• Worklets errors are eliminated in the browser
• Components using Reanimated (like Accordion) render without runtime
  errors
• Animations are gracefully disabled on web (expected behavior)
• No impact on native React Native builds

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-native-usmds-docs	Ready	Preview	Comment	Oct 30, 2025 10:35pm

The best way to resolve the issue is to simply remove the unused variable declaration for interpolateColor in this file. This means deleting lines 88–93, which declare and initialize interpolateColor. This avoids wasted memory and improves code readability by removing extraneous code elements. Only lines related to the declaration and assignment of interpolateColor need to be removed; no additional imports or function changes are required.

To fix the problem, the unused variable Easing should simply be removed. This means deleting the declaration and initialization of Easing entirely (lines 95–115, inclusive). Since there is no evidence in the shown code that Easing is used, this can be done safely without affecting the rest of the file's functionality. No additional imports, methods, or variable definitions are required as part of the fix—just the removal of the block that defines Easing.

To fix the issue, we should remove the unused variable declaration for platformFunctions in apps/docs/src/lib/reanimated-mock.js. Delete lines 117-120, which declare and initialize the platformFunctions object. There is no indication it is used elsewhere in the file, and removing it should have no effect on functionality.

---

To fix this issue, the unused variable Colors should be removed from the code. Specifically, the entire definition starting from const Colors = { ... } on line 122 through line 124 should be deleted. No additional imports, methods, or variable definitions are required, and no other code depends on Colors as per the information given. This change should be limited strictly to the provided snippet and not alter existing functionality.

---

To fix the unused variable error, we should remove the definition of commonTypes entirely from the file. The definition lies on lines 257 to 263 inclusive. Simply delete these lines. There is no need to replace uses, update imports, or preserve the object, since it is unused.

---

The best way to fix this problem is to remove the unused variable jestUtils, which consists of its declaration at line 265-271:

265: const jestUtils = {
266:   withReanimatedTimer: (callback) => callback(),
267:   advanceAnimationByTime: NOOP,
268:   advanceAnimationByFrame: NOOP,
269:   setUpTests: NOOP,
270:   getAnimatedStyle: () => ({}),
271: };

No other code depends on this variable within the given snippet. Therefore, delete lines 265-271. No imports, methods, or definitions are needed for the fix.

---