Issues while debugging with chrome

[cglacet]

Description

The same code behaves differently when debug mode is active (Android). I haven't tested iOS yet. The debugger is React Native Debugger 0.12.1.

The example is based on reanimated-2-playground, where I simply:

• changed the app name
• updated to react-native 0.67.2
• updated to reanimated 2.4.1
• and added @react-navigation/drawer and @react-navigation/native.

The App code simply is a mix of the navigation drawer MWE and the reanimated2 initial playground content.

Clean up step

rm -rf node_modules yarn.lock && yarn install && cd android && ./gradlew clean && cd - && yarn android

I also removed ~/.gradle completely several times to make sure nothing strange happens here.

Expected behavior

In both normal and debug mode, the app should render this:

and this:

In the original playground screen, I expect animations to happen if I click toggle

Actual behavior & steps to reproduce

Saddly, when the debugger is active, I get a white screen.

If I remove the Drawer navigator, the app shows as expected BUT there are no animation when I click "TOGGLE", the black bar blinks to its next width directly.

The code for this second test is basically the playground one:

export default function App() {
  return <AnimatedStyleUpdateExample />;
}

Snack or minimal code example

This repo:

git clone https://github.com/cglacet/reanimated2-issue-demo.git

Package versions

name	version
react-native	0.67.2
react-native-reanimated	2.4.1
NodeJS	16.13.0
Java	11.0.11 2021-04-20
Gradle	7.2

Affected platforms

• [x] Android
• [ ] iOS
• [ ] Web

Device used

• Emulator (qemu) with a Pixel 5 (api 30)

[cglacet]

A collegue also reproduced the same on a physical device (Moto G5s) with:

name	version
react-native	0.67.2
react-native-reanimated	2.4.1
NodeJS	16.13.0
Java	17.0.1 2021-10-19
Gradle	7.2

Host OS is windows for him and I'm on mac OS.

[sanjay628]

Hello Team ,

I am facing multiple issue like debugger is not working , on android when app is in debug mode it works but in release it wont work with updates as well as older version are also having the same issue now.

"@react-navigation/drawer": "^6.1.8",

[fatlinesofcode]

same issue here in ios simulator,

name	version
react-native	0.64.2
react-native-reanimated	2.4.1
NodeJS	14.15.4
Xcode 13.2.1

[tomgreco]

Same issue with latest

[Soliy0u]

Same issue with react-native-animated 2.10.0. Working fine in normal but when the debugger is active, I get a white screen. I have read in docs: https://docs.swmansion.com/react-native-reanimated/docs/ **Known problems and limitations Reanimated 2 is in an early version. As we wanted to share it with the community as soon as we could, the library still has some rough edges and limitations that we plan to address soon. Unfortunately some of the limitations come from maturity of React Native's TurboModule architecture that Reanimated 2 relies on. As a consequence we won't be able to support older versions of React Native and some issues that we yet plan to resolve may require full support of TurboModules which is not yet available to the public.

Below we highlight some of the problems that we are aware of (in most of the cases we actively work on improving these):

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. I have try with Flipper but get more bugs: https://github.com/facebook/flipper/issues/4205. Does anyone have a recommendation on how to fix these?

[mutablestudio]

The reanimated docs state that v2.x is compatible with Chrome Debugger aka React Native Debugger - https://docs.swmansion.com/react-native-reanimated/docs/next/guide/debugging/ - however I get similar issues with the app just freezing up on launch screen when enabling debugging. RN Debugger 0.13.0 with RN 0.68.5 and reanimated 2.13.0. Happens in iOS Simulator (iOS 14 Pro). Problem is gone when debugging is disabled or reanimated is reverted to 1.13.2.

Would be great if someone from reanimated team could look at this. With so many issues w v2 I did not want to update but there are now critical security issues identified in versions lower than 2.10.0 (ReDoS)

[mutablestudio]

UPDATE: for my specific issue with iOS, it was resolved by enabling Hermes in the pod file, then doing pod install. Without this the network requests to localhost:8081/debugger-proxy will be in pending state and never resolve (you can view this in the network tab of the chrome debugger). This also switched my debugger to Flipper. I could find no mention anywhere in any of the reanimated 2.x docs about whether Hermes is required or not.

[yangalav]

same issue here on both ios simulator and android. Also seeing white screen on iOS. Not working for the debugger in Chrome nor the React Native Debugger. Had to downgrade to get my RN app to work and be debuggable.

name	version
react-native	0.63.2
react-native-reanimated	2.13.0
NodeJS	>=12.15.0
Xcode 14.2

[szydlovsky]

Hey everyone, do the debugging issues persist on 3.x versions? I am doing a review of older issues and was wondering if any of you are still having problems. (And a small reminder that debugging with Flipper is deprecated since React Native 0.73).

[szydlovsky]

And a reminder that as of now, only chrome dev tools work with react-native debugging