EXPO + react-native-reanimated debug issue

Question

I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated@~2.1.0 and debugging worked just fine.

At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45.

After the upgrade I can no longer use remote debugging. When I turn on remote debugging, the app crashes with the following error

Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

and I can't do anything (I can't even turn off remote debugging without clearing expo app data).

The issue seems to be related to react-native-reanimated (current version is 2.8.0)

Expo docs state this:

The new APIs in react-native-reanimated@2 use React Native APIs that are incompatible with Remote JS Debugging. Consequently, you can only debug apps using these APIs using Flipper, which is not yet available in the Expo managed workflow. You will be unable to use Remote JS Debugging if you use the new APIs from Reanimated 2. Remote JS Debugging will continue to work if you only use the APIs that were also available in Reanimated 1.

Tried to downgrade to react-native-reanimated@~2.1.0 did not work either.

I must be missing something, because otherwise it seems a bit ridiculous that I'm forced to upgrade SDK which in combination with react-native-reanimated does not allow me to do debug anymore.

Please advise if there is anything I can do.

Thanks

Answer 1

This is what that link to Expo's docs show me at this time:

Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore. In order to use a debugger with your app with react-native-reanimated, you will need to use the Hermes JavaScript engine and > the JavaScript Inspector for Hermes.

Anyways, this appears to be an issue Reanimated themselves talk about in the docs

The workaround around this for some time has been this code shared in this answer here

It isn't even a reanimated problem particularly, but an inability of RN to develop using some synchronous features that pertain to debugging.

Anyways, hope this helps you

Answer 2

After posting a question on expo repository, I've got the following answer which actually does not solve the remote debugger issue, but gives the same alternative. Basically they suggested to use hermes engine

hi there! this is unfortunate and inconvenient for sure. it's a side effect of the direction the ecosystem is moving in - away from JavaScript Core and remote debugging in Chrome towards Hermes and attaching a debugger to the on-device Hermes engine. Reanimated no longer supports remote debugging in Chrome.

in order to debug JS using Reanimated in SDK 45+ we recommend using Hermes. you can set this up in your app.json as follows:

{
  "expo": {
    "// your other config here": "...",
    "android": {
      "jsEngine": "hermes"
    }
  }
}
now when you run expo start and launch your app press j and it will launch a Chrome Inspector that will attach directly to the app on your device (I suggest upgrading expo-cli to the latest to ensure you have this feature). be sure to refer to the "Using Hermes Engine" guide for more information