React Native Android crashes on enabling debug mode

Question

Shaking the android device and hit Debug, and it crashes every time right away. From the Android Studio logcat, it shows No source URL loaded, have you initialised the instance?:

java.lang.AssertionError: No source URL loaded, have you initialised the instance?
    at com.facebook.infer.annotation.Assertions.assertNotNull(Assertions.java:35)
    at com.facebook.react.modules.debug.SourceCodeModule.getTypedExportedConstants(SourceCodeModule.java:39)
    at com.facebook.fbreact.specs.NativeSourceCodeSpec.getConstants(NativeSourceCodeSpec.java:35)
    at com.facebook.react.bridge.JavaModuleWrapper.getConstants(JavaModuleWrapper.java:129)
    at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
    at android.os.Looper.loop(Looper.java:223)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
    at java.lang.Thread.run(Thread.java:923)

The same react native codebase, turning on dubug mode on ios is working fine, but on Android it always crash when debug mode is turned on. I can't see what's causing it by the error log.

Here are the dependencies I have for the react native app, and I'm using redux and redux-devtools-extension for debugging. Am I missing any libraries?

"dependencies": {
  "@react-native-async-storage/async-storage": "^1.15.14",
  "@reduxjs/toolkit": "^1.7.0",
  "expo": "~42.0.1",
  "expo-permissions": "12.1.0",
  "expo-splash-screen": "~0.11.2",
  "expo-status-bar": "~1.0.4",
  "expo-updates": "~0.8.1",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-native": "0.64.1",
  "react-native-fast-image": "^8.5.11",
  "react-native-gesture-handler": "~1.10.2",
  "react-native-navigation": "^7.14.0",
  "react-native-reanimated": "~2.1.0",
  "react-native-screens": "3.2.0",
  "react-native-unimodules": "~0.13.3",
  "react-native-web": "0.16.3",
  "react-redux": "^7.2.6",
  "redux-persist": "^6.0.0",
  "tslint": "^6.1.3",
  "tslint-react": "^5.0.0"
},
"devDependencies": {
  "@babel/core": "^7.9.0",
  "@types/react": "17.0.5",
  "@types/react-native": "0.64.5",
  "babel-preset-expo": "~8.3.0",
  "jest-expo": "~41.0.0",
  "redux-devtools-extension": "^2.13.9",
  "typescript": "4.2.4"
}, 

Answer 1

After some more search arounds, found this is a known issue in react-native-reanimated. As their website points out

Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging.

Another github issue also pointed out this issue

This is expected, you can't use remote debugging with turbomodules (which Reanimated v2 is using). Check out Flipper to debug your app.

https://docs.swmansion.com/react-native-reanimated/docs/#known-problems-and-limitations

https://github.com/software-mansion/react-native-reanimated/issues/1990

Removing this library fixed the issue.

1. Remove the react-native-reanimated dependency in package.json
2. Remove related code in android's MainApplication.java
3. yarn install or npm install
4. Go to the ios folder and run pod install
5. Go the the android folder and run ./gradlew clean
6. Rebuild the app. yarn android and yarn ios

Another alternative is to use Flipper for debugging instead.