[expo49, router v2] Metro error: requestAnimationFrame is not defined using drawer

[bhyoo99]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

Twitter thread

I recently installed a package following the guidelines on this link: https://expo.github.io/router/docs/migration/react-navigation/drawer.

(installed package versions "@react-navigation/drawer": "^6.6.3", "react-native-gesture-handler": "~2.12.0", and "react-native-reanimated": "~3.3.0".)

When I access the page using the expo start command, a certain log message appears. However, the web page does not crash.

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".
Error loading route "./(auth)/dashboard/_layout.tsx" ReferenceError: requestAnimationFrame is not defined
    at JSReanimated.scheduleOnUI (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:88940:9)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:90107:35
    at new FrameCallbackRegistryJS (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:96496:54)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:96417:31
    at loadModuleImplementation (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:328:7)
    at guardedLoadModule (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:227:14)
    at metroRequire (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:123:75)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:91291:27
    at loadModuleImplementation (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:328:7)
    at guardedLoadModule (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:227:14)
    at metroRequire (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:123:75)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:88390:15
    at loadModuleImplementation (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:328:7)
    at guardedLoadModule (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:227:14)
    at metroRequire (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:123:75)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:88287:21

The issue arises when I try to export. I receive an error message

Metro error: requestAnimationFrame is not defined

  20 |   scheduleOnUI(worklet) {
  21 |     // @ts-ignore web implementation has still not been updated after the rewrite, this will be addressed once the web implementation updates are ready
> 22 |     requestAnimationFrame(worklet);
     |     ^
  23 |   }
  24 |   registerEventHandler(_eventHash, _eventHandler) {
  25 |     // noop

Call Stack
  scheduleOnUI (node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/JSReanimated.js:22:5)
  <anonymous> (node_modules/react-native-reanimated/lib/module/reanimated2/threads.js:123:28)
  constructor (node_modules/react-native-reanimated/lib/module/reanimated2/frameCallback/FrameCallbackRegistryJS.js:9:22)
  <global> (node_modules/react-native-reanimated/lib/module/reanimated2/hook/useFrameCallback.js:3:31)
  loadModuleImplementation (node_modules/metro-runtime/src/polyfills/require.js:342:5)
  guardedLoadModule (node_modules/metro-runtime/src/polyfills/require.js:240:12)
  metroRequire (node_modules/metro-runtime/src/polyfills/require.js:127:7)
  <global> (node_modules/react-native-reanimated/lib/module/reanimated2/hook/index.js:10)
  loadModuleImplementation (node_modules/metro-runtime/src/polyfills/require.js:342:5)
  guardedLoadModule (node_modules/metro-runtime/src/polyfills/require.js:240:12)
  metroRequire (node_modules/metro-runtime/src/polyfills/require.js:127:7)
  <global> (node_modules/react-native-reanimated/lib/module/reanimated2/index.js:2)
  loadModuleImplementation (node_modules/metro-runtime/src/polyfills/require.js:342:5)
  guardedLoadModule (node_modules/metro-runtime/src/polyfills/require.js:240:12)
  metroRequire (node_modules/metro-runtime/src/polyfills/require.js:127:7)
  <global> (node_modules/react-native-reanimated/lib/module/index.web.js:3)

and the build fails.

Minimal reproducible example

yarn create expo --template tabs@beta

cd my-app

change app/(tab) folder to app/(auth)/dashboard

https://expo.github.io/router/docs/migration/react-navigation/drawer
npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

and change babel.config.js

module.exports = {
    presets: [
        ...
    ],
    plugins: [
        ...
        'react-native-reanimated/plugin',
    ],
};

than change app/(auth)/dashboard/_layout.tsx to

import { Drawer } from "expo-router/drawer";

export default function Layout() {
  return <Drawer />;
}

[bhyoo99]

PR: software-mansion/react-native-reanimated#4665
Patch: https://gist.github.com/javascripter/4e4e20e9024a33592437648b718c763d

Thanks to @javascripter

[EvanBacon]

This issue cannot be fixed by modifying the code in this repo

[arivanbastos]

HI guys, Any workaround to this problem?
Trying to use Drawer in a fresh expo project with no success.

[bhyoo99]

@arivanbastos
Here is my patch-package file
https://gist.github.com/bhyoo99/f4954316c498f3ca261197166855e21d

✅ expo-router checked
✅ SSG web build checked

[xRME-18]

Hi, I tried running this using patch -p1 < react-native-reanimated+3.3.0.patch but its giving me the following error patching file 'node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/JSReanimated.js' 2 out of 2 hunks failed--saving rejects to 'node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/JSReanimated.js.rej'

Also I'm new to this, what's causing this error and is this due to something being configured wrong?

[itsdenispavlovic]

Any updates?

[bhyoo99]

@rohit1804567 Which package manager are you using? (yarn or npm)
and plz send me your react-native-reanimated version too

[bhyoo99]

@itsdenispavlovic Did you try my patch-package gist?

[itsdenispavlovic]

@bhyoo99 It's working now on Expo ~49.0.7, I am using "react-native-reanimated": "~3.3.0"

[IordanisSap]

@bhyoo99 It's working now on Expo ~49.0.7, I am using "react-native-reanimated": "~3.3.0"

For me its not working with the exact same versions when i use the Drawer component

[marklawlor]

@IordanisSap Please create a new issue with a reproducible example. This could be a new issue, a problem with your lockfile, etc - we don't know without more information.

[philohelp]

Had this error using drawer. Resolved with deleting yarn.lock and yarn.

[tyrauber]

Note: to anyone finding this (including future me), this issue exists in react-native-reanimated 3.3.0, but is now resolved in 3.5.4.

[chidexebere]

@tyrauber , but now react-native-reanimated 3.5.4 is not compatible with any of the expo versions

Always get this warning:

Some dependencies are incompatible with the installed expo version: [email protected] - expected version: ~3.3.0 Your project may not work correctly until you install the correct versions of the packages. Fix with: npx expo install --fix

Also tried the latest version of react-native-reanimated (@3.6.1) ... same warning

[tyrauber]

@chidexebere, Only if you are using Expo Go. You'd need to use the Expo Dev Client and make a development build, or wait until SDK 50 Release (January 31st) and for the updated Expo Go Client sometime thereafter.