Search code examples
react-nativereact-native-reanimated-v2

React Native App crashes when trying to debug remotely and does not work again unless re-installed

The Application was working fine until the installation of React-native-Reanimated library but has started to crash post installation when trying to debug remotely. It wouldn't even start again unless re-installed and shows this error:

Attempt to invoke interface method 'java.lang.String com.facebook.react.bridge.CatalystInstance.getSourceURL()' on a null object reference

Error message

The app was not starting but following the installation instructions in the React Reanimated docs got it to work but it now crashes every time I try to connect to a remote debugger.

 "dependencies": {
    "@react-native-community/cli": "^6.3.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "@reduxjs/toolkit": "^1.6.2",
    "axios": "^0.24.0",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-eject": "^0.1.2",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-image-pan-zoom": "^2.1.12",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-reanimated": "^2.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-vector-icons": "^9.0.0",
    "react-redux": "^7.2.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.66.4",
    "@types/react-native-vector-icons": "^6.4.10",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.4.4"
  },
Solution

  • It is mentioned in their documentation that remote debugging is no longer possible for react-native-reanimated.

    As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.

    ref : React Native Reanimated Known problems and limitations

    To use Flipper, refer this doc : Debugging React Native apps with Flipper