Android remote debugging: Calling synchronous methods on native modules is not supported in Chrome

fadi-quader-mox commented 2 years ago

Description

Android remote debugging was supposed to be fixed in a previous version, however, I updated reanimated to 2.70 and I'm still having some issue when I enable remote debugging as shown in the screenshot.

I believe this part of react-native is causing the issue
https://github.com/facebook/react-native/blob/main/Libraries/BatchedBridge/MessageQueue.js#L168

Expected behaviour

Remote debugging should work fine on Android

Actual behaviour & steps to reproduce

Open dev menu on Android and press Debug

Snack or minimal code example

Package versions

2.7.0

name	version
react-native	67.3
react-native-reanimated	2.7.0
NodeJS	16.14.2
Java	openjdk 11.0.11 2021-04-20

Affected platforms

[X] Android
[ ] iOS
[ ] Web

github-actions[bot] commented 2 years ago

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

github-actions[bot] commented 2 years ago

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or minimal code example section.

pdd1984 commented 2 years ago

Hi, I'm having the same issue, in my case, I'm using @react-navigation/drawer. I'm using React-Native 0.68 and React-Native-Reanimated 2.7.0. For some reason, the line const DrawerNavigator = createDrawerNavigator(); throws this error: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome. If the line is commented the app starts.

wanschi commented 2 years ago

I have the same issue. This is my package.json:

        "@expo/react-native-action-sheet": "^3.8.0",
        "@react-native-async-storage/async-storage": "^1.16.1",
        "@react-native-community/checkbox": "^0.5.8",
        "@react-native-community/progress-bar-android": "^1.0.4",
        "@react-native-community/progress-view": "^1.3.1",
        "@react-native-community/push-notification-ios": "^1.8.0",
        "@react-native-community/segmented-control": "^2.0.0",
        "@types/jsonwebtoken": "^8.3.9",
        "@types/react-native-push-notification": "^7.3.0",
        "@types/react-native-video": "^5.0.3",
        "@types/react-redux": "^7.1.7",
        "@types/redux-api-middleware": "^3.2.2",
        "@types/string-format": "^2.0.0",
        "@types/uuid": "^8.3.4",
        "axios": "^0.26.0",
        "fbjs": "^3.0.4",
        "formik": "^2.2.9",
        "jsonwebtoken": "^8.5.1",
        "jwt-decode": "^2.2.0",
        "lodash": "^4.17.21",
        "moment": "^2.29.1",
        "npm": "^6.14.4",
        "pinar": "^0.12.1",
        "prettier": "^2.5.1",
        "react": "17.0.2",
        "react-content-loader": "^6.1.0",
        "react-native": "0.67.2",
        "react-native-blob-util": "^0.14.0",
        "react-native-device-info": "^8.1.3",
        "react-native-geolocation-service": "^5.3.0-beta.4",
        "react-native-get-random-values": "^1.7.2",
        "react-native-idle-timer": "^2.1.6",
        "react-native-image-pan-zoom": "^2.1.12",
        "react-native-iphone-x-helper": "^1.2.1",
        "react-native-keychain": "^6.0.0",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-livechat": "^2.0.0-6",
        "react-native-maps": "0.30.1",
        "react-native-navigation": "7.25.0",
        "react-native-navigation-hooks": "^6.3.0",
        "react-native-pdf": "^6.4.0",
        "react-native-permissions": "^3.3.0",
        "react-native-push-notification": "^7.2.3",
        "react-native-rate": "^1.2.1",
        "react-native-reanimated": "^2.6.0",
        "react-native-svg": "^12.1.1",
        "react-native-twilio-video-webrtc": "^2.1.0",
        "react-native-video": "^5.1.0-alpha8",
        "react-native-webview": "^11.17.2",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-api-middleware": "^3.2.1",
        "redux-flipper": "^2.0.1",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "string-format": "^2.0.0",
        "swr": "^1.2.1",
        "uuid": "^8.3.2",
        "yup": "^0.32.11"

fenglang0203 commented 2 years ago

I have then same issue , when I used ~2.4.1 then can work fine.

casellac1 commented 2 years ago

I have then same issue , when I used ~2.4.1 then can work fine.

I tried 2.4.1 and 2.8.0 and neither of them worked for me.

sridhard commented 2 years ago

have then same issue. any update on this?

abdoutech19 commented 2 years ago

I'm facing the same issue with react-native version 0.68.0 and reanimated version 2.7.0

abdoutech19 commented 2 years ago

~2.4.1

Thanks mate, this worked for me.

danias commented 2 years ago

I have then same issue , when I used ~2.4.1 then can work fine.

2.4.1 worked after also running:

yarn add -D @babel/preset-typescript

justin-tay commented 2 years ago

Just a note. If your application is running on Hermes and not JSC the best option is to see if directly debugging on Hermes works for you instead of debugging code that is running on Chrome V8.

The React Native Tools on VSCode has experimental support for debugging directly on Hermes, for instance using the Debug Android Hermes - Experimental launch configuration.

Alternatively you can just try to use Google Chrome's DevTools as documented at https://reactnative.dev/docs/hermes/#debugging-js-on-hermes-using-google-chromes-devtools.

psaikali commented 2 years ago

Fixed it temporarily by editing the /node_modules/react-native-reanimated/src/reanimated2/NativeReanimated/NativeReanimated.ts following this commit: https://github.com/sunnylqm/react-native-reanimated/commit/77dcf4a80f95216a348aab1b94677f652f5199fc