I'm tasked with an already-started project that has React Native Reanimated library as a dependency.

Whenever I debug my app with Vscode/Chrome debugger, when I navigate to any screen that has components depending on Reanimated, I keep getting global.performance.now is not a function.

I've already seen TypeError: global.performance.now is not a function in react native but in the latest version it is already changed to what the accepted answer to the question suggests.

I've tried downgrading react-native-reanimated to 2.2.4 and patch as suggested in the answer, yet then I start getting all sorts of errors like Property ' stopObservingProgress' doesn't exist.

I've also tried 2.3.1, also different yet blocker errors.

I've also tried with and without Hermes.

Disabling debugging gets rid of the error, but I (obviously) can't debug. Debugging with Flipper works yet debugging with Flipper is extremely slowing my workflow (e.g. switching between Vscode and Flipper and trying to find files to put breakpoints, unable to edit at the same place where I debug etc. Flipper is just not my thing) and I want to debug with Vscode, which works perfectly without Reanimated.

I want to get rid of Reanimated library but unfortunately there is already a lot of code that relies on it, including a library with no other alternative that directly depends on Reanimated.

How can I debug an app containing React Native Reanimated with Vscode?

CodePudding user response：

It's still a known and open issue when we are using reanimated version 2.., you can find this in reanimated documation. As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported. For now only flipper is the way of debugging react native apps that using JSI for syncronous native module calls.

CodePudding user response：

Okay after further investigation I've found out that this is indeed possible. There were some other problems with latest versions of some of the dependencies that I've been using, which was masking the original issue. With the right combination of dependencies and following https://fbflipper.com/docs/extending/debugging/ and https://thinhtran3588.medium.com/make-professional-mobile-apps-with-react-native-and-typescript-debug-your-application-with-vscode-fba067f77445 I was able to debug my app correctly using Vscode debugger.