Issues while debugging with chrome

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

• Android
• iOS
• Web

Device used

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

[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”,

[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.