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 [email protected] 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 [email protected] 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 [email protected]. 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

[thoughtworks-tcaceres]

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

[thoughtworks-tcaceres]

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