Instructions: How to use React Native Debugger with RN 0.74+

[ilyausorov]

After upgrading my app from RN 0.72 to 0.74 I noticed that React Native Debugger stopped working for our team. We managed to fix it with a couple of patches. Note we're on 0.74.5 so if you already upgraded past that to 0.75 you may have different issues. Also note this works for us on iOS, we never really got it working well on Android before either.

In the react-native@0.74.5 package, we added this patch which stops the Invariant Error from showing. It wasn't blocking the use of the app with React Native Debugger, but it was annoying and always at the bottom of the screen.

index 07481e543fa8546b561093b6719852f8cab066cb..bc7d162efb631ceaaa4253bf12b1570b4054ae87 100644
--- a/Libraries/BatchedBridge/MessageQueue.js
+++ b/Libraries/BatchedBridge/MessageQueue.js
@@ -167,21 +167,14 @@ class MessageQueue {
   callNativeSyncHook(
     moduleID: number,
     methodID: number,
-    params: mixed[],
-    onFail: ?(...mixed[]) => void,
-    onSucc: ?(...mixed[]) => void,
-  ): mixed {
-    if (__DEV__) {
-      invariant(
-        global.nativeCallSyncHook,
-        'Calling synchronous methods on native ' +
-          'modules is not supported in Chrome.\n\n Consider providing alternative ' +
-          'methods to expose this method in debug mode, e.g. by exposing constants ' +
-          'ahead-of-time.',
-      );
-    }
+    params: any[],
+    onFail: ?Function,
+    onSucc: ?Function
+  ): any {
     this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
-    return global.nativeCallSyncHook(moduleID, methodID, params);
+    if (global.nativeCallSyncHook) {
+      return global.nativeCallSyncHook(moduleID, methodID, params);
+    }
   }
 
   processCallbacks(

If you're using Reanimated:
In the react-native-reanimated@3.15.0 package, we added this patch (note this should be fixed soon in a future release of React Native Reanimated as it has already gotten merged https://github.com/software-mansion/react-native-reanimated/pull/6437/files). This is related to the TypeError: Cannot convert undefined or null to object errors people have been reporting.

index 039f06eeb3c55dd4d1417984c0b65616fe418c02..e363b25bc1b96dc94f9ff894aa5ff9c7265c7b38 100644
--- a/src/createAnimatedComponent/createAnimatedComponent.tsx
+++ b/src/createAnimatedComponent/createAnimatedComponent.tsx
@@ -52,6 +52,7 @@ import { NativeEventsManager } from './NativeEventsManager';
 import type { ReanimatedHTMLElement } from '../js-reanimated';
 
 const IS_WEB = isWeb();
+const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 if (IS_WEB) {
   configureWebLayoutAnimations();
@@ -279,7 +280,7 @@ export function createAnimatedComponent(
         ? (this._component as AnimatedComponentRef).getAnimatableRef?.()
         : this;
 
-      if (IS_WEB) {
+      if (SHOULD_BE_USE_WEB) {
         // At this point I assume that `_setComponentRef` was already called and `_component` is set.
         // `this._component` on web represents HTMLElement of our component, that's why we use casting
         viewTag = this._component as HTMLElement;
@@ -489,7 +490,7 @@ export function createAnimatedComponent(
           (layout || entering || exiting || sharedTransitionTag) &&
           tag != null
         ) {
-          if (!shouldBeUseWeb()) {
+          if (!SHOULD_BE_USE_WEB) {
             enableLayoutAnimations(true, false);
           }

If you're using Expo / Expo Modules:
If you have expo-modules-core / expo in your app somewhere, you will also want to add this patch for expo-modules-core@1.12.23. This address an issue where it said it cannot find NativeModule or SharedObject.

diff --git a/build/NativeModule.js b/build/NativeModule.js
index df77f3a81f1181efe009efd2861d839d31da7042..76f4cf6cadce904da686c4b43e010c9f6221fbaf 100644
--- a/build/NativeModule.js
+++ b/build/NativeModule.js
@@ -1,4 +1,4 @@
 import { ensureNativeModulesAreInstalled } from './ensureNativeModulesAreInstalled';
 ensureNativeModulesAreInstalled();
- export default globalThis.expo.NativeModule;
+ export default globalThis.expo?.NativeModule;
 //# sourceMappingURL=NativeModule.js.map
\ No newline at end of file
diff --git a/build/SharedObject.js b/build/SharedObject.js
index 6dd6f1a705fbeb694584e772807965b040e777a4..a6ff6a893ec65f994795ebd9164234cdf95088e8 100644
--- a/build/SharedObject.js
+++ b/build/SharedObject.js
@@ -1,4 +1,4 @@
 import { ensureNativeModulesAreInstalled } from './ensureNativeModulesAreInstalled';
 ensureNativeModulesAreInstalled();
- export default globalThis.expo.SharedObject;
+ export default globalThis.expo?.SharedObject;
 //# sourceMappingURL=SharedObject.js.map

Also if you don't have it yet in your Dev Menu the option to Debug JS Remotely, you can install this package: https://github.com/gusgard/react-native-devsettings which will make it show up again.

Hope this helps folks who are currently unable to use React Native Debugger use it again. Good luck.

[phaniankur]

This is what worked for me for RN 0.74.1

• Install react-native-debugger in system.
• Install react-native-devsettings in the project devDependency yarn add react-native-devsettings --dev
• Add if (__DEV__) require('react-native-devsettings'); In App.tsx
• Reinstall the app yarn run android
• Open "react-native-debugger" app
• Open debug menu cmd + m
• Select "(*) Debug JS Remotely"

[Lakston]

Did not work on rn 75.4, still getting the "calling synchronous methods on native modules..." error.

[Samykills]

@Lakston did u add the reanimated changes? are u using the reanimated package?

[Samykills]

@ilyausorov are u able to use react-native-debugger's network inspector?
after i added changes u mentioned an able to use the debugger with reanimated, but network inspector just gets a list of "symbolicate" request, and no recorod of actual request

[tylercaceres]

Using RN 0.73.6 I'm running into this issue as well.

[tylercaceres]

This is what worked for me for RN 0.74.1

• Install react-native-debugger in system.
• Install react-native-devsettings in the project devDependency yarn add react-native-devsettings --dev
• Add if (__DEV__) require('react-native-devsettings'); In App.tsx
• Reinstall the app yarn run android
• Open "react-native-debugger" app
• Open debug menu cmd + m
• Select "(*) Debug JS Remotely"

Tried this, and not working with RN 0.73.6.

[Csutkas]

Any workaround or update on this topic?
I would like to use this awesome tool with RN 0.76

[datdt-026]

I found a way with react-native 0.75.4.
You need to import the react-native-devsettings.

You open React Native Debugger as usual, shake the device and choose Debug JS Remotely

[mdevs344]

I found a way with react-native 0.75.4. You need to import the react-native-devsettings.

You open React Native Debugger as usual, shake the device and choose Debug JS Remotely

Hello, could you tell more about your error and how you fixed that
we use react-native 0.75.4, imported react-native-devsettings in App.tsx, pressed Debug JS Remotely on an emulator, but we still have an issue

[datdt-026]

I found a way with react-native 0.75.4. You need to import the react-native-devsettings.
You open React Native Debugger as usual, shake the device and choose Debug JS Remotely

Hello, could you tell more about your error and how you fixed that we use react-native 0.75.4, imported react-native-devsettings in App.tsx, pressed Debug JS Remotely on an emulator, but we still have an issue

Can you show me the issue, i can't see your image.
You should turn on the RN-Debugger Client before press Debug JS Remotely

[mdevs344]

I found a way with react-native 0.75.4. You need to import the react-native-devsettings.
You open React Native Debugger as usual, shake the device and choose Debug JS Remotely

Hello, could you tell more about your error and how you fixed that we use react-native 0.75.4, imported react-native-devsettings in App.tsx, pressed Debug JS Remotely on an emulator, but we still have an issue

Can you show me the issue, i can't see your image. You should turn on the RN-Debugger Client before press Debug JS Remotely

@datdt-026 any thoughts?

[datdt-026]

I found a way with react-native 0.75.4. You need to import the react-native-devsettings.
You open React Native Debugger as usual, shake the device and choose Debug JS Remotely

Hello, could you tell more about your error and how you fixed that we use react-native 0.75.4, imported react-native-devsettings in App.tsx, pressed Debug JS Remotely on an emulator, but we still have an issue

Can you show me the issue, i can't see your image. You should turn on the RN-Debugger Client before press Debug JS Remotely

@datdt-026 any thoughts?

I did not have that error, you should research for the error. Have you pod install after import the library dev-settings?

[XiaoPiHong]

我找到了一个使用 react-native 0.75.4 的方法。你需要导入react-native-devsettings。
像往常一样打开 React Native Debugger，摇动设备并选择_Debug JS Remotely_

你好，能否详细介绍一下你的错误以及解决方法？我们使用 react-native 0.75.4，在 App.tsx 中导入了react-native-devsettings，在模拟器上按下了 Debug JS Remotely，但仍然有问题

你能给我看一下这个问题吗，我看不到你的图片。你应该先打开 RN-Debugger Client，然后再按 Debug JS Remotely

@datdt-026有什么想法吗？

I also encountered the same problem, how to solve it?

[XiaoPiHong]

Any workaround or update on this topic? I would like to use this awesome tool with RN 0.76

I also encountered the same problem, how to solve it?