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

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

Android
iOS
Web

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 12
Comments: 15 (1 by maintainers)

Commits related to this issue

Fix Android remote debugging failure due to calling synchronous methods on native modules in Chrome (#3227) ## Description This fixes the remote debugging failure on Android using Chrome as instal... — committed to software-mansion/react-native-reanimated by justin-tay 2 years ago
Fix Android remote debugging failure due to calling synchronous methods on native modules in Chrome (#3227) ## Description This fixes the remote debugging failure on Android using Chrome as instal... — committed to software-mansion/react-native-reanimated by justin-tay 2 years ago
Fix Android remote debugging failure due to calling synchronous methods on native modules in Chrome (#3227) ## Description This fixes the remote debugging failure on Android using Chrome as instal... — committed to sunnylqm/react-native-reanimated by justin-tay 2 years ago

Most upvoted comments

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

fenglang0203 on Apr 22, 2022

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

psaikali on Jul 19, 2022

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.

pdd1984 on Apr 12, 2022

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

abdoutech19 on Apr 24, 2022

2.8.0 is borked, but 2.9.0 is definitely fixed: https://github.com/software-mansion/react-native-reanimated/blob/2.9.0/src/reanimated2/NativeReanimated/NativeReanimated.ts

tomasswood on Oct 7, 2022

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"

wanschi on Apr 12, 2022