The native module for Flipper seems unavailable. Please verify that `react-native-flipper` is installed

🐛 Bug Report

I have updated React Native from v0.61.4 to v0.62.2 to try and use Flipper.

When I build and run the app The Metro Bundler throws the warning:

The native module for Flipper seems unavailable. Please verify that react-native-flipper is installed as yarn dependency to your project and, for iOS, that pod install is run in the ios directory.

I have installed it using npm.

My package.json looks like this:

  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.62.2",
    "react-native-flipper": "^0.45.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4",
    "redux-flipper": "^1.2.0",
    "redux-thunk": "^2.3.0",
 ...

In Flipper, React DevTools can connect to the app but when I try to use the Hermes Debugger or plugins they cannot be used:

When I run this: adb shell am start -n com.app/com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity

I get this error:

Error type 3 Error: Activity class {com.app/com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity} does not exist.

What could be the reason for the modules not installing correctly?

To Reproduce

Environment

“react”: “16.13.1”, “react-native”: “0.62.2”, “react-native-flipper”: “^0.45.0”, Mac OSX 10.14 Android 10, physical Pixel 2XL

Update

So I created a new React Native app just to see if I could get Flipper working and I could but without the redux-flipper plug-in. I also got Hermes debugger working. If I remove all reference and use of the redux-flipper plug in, I don’t get the warning anymore saying that is can’t find the package because I am not using this code in the redux store anymore:

// if (__DEV__) {
//   const createDebugger = require('redux-flipper').default;
//   middlewares.push(createDebugger());
// }

I do however get this error in Flipper developer tools console opened from the view menu:

Error: Feature not implemented
    at getUser (bundle.js:597)
    at e.default (bundle.js:2281)
    at bundle.js:1577
    at Array.map (<anonymous>)
    at _default (bundle.js:1577)
    at bundle.js:3
    at Object.rehydrate (bundle.js:707)
    at _rehydrate (bundle.js:699)
    at bundle.js:699

I also don’t get any of these options in the left hand side of Flipper (databases, images etc):

I am not using devTools v3 and a I keep having to do adb reverse.

Flipper still only connects to the device, not the app.

[Epick362]

I found the culprit. Package identifier in ReactNativeFlipper.java was com.rndiffapp and I didn’t notice it. Everything works now, thank you for the help 😃

[redbluenat]

I had the same problem, for me, directory structure in debug folder wasn’t the same as in the main folder so it couldn’t find it, check your folder structure and check this line: Class<?> aClass = Class.forName("YOUR_PACKAGE_NAME.ReactNativeFlipper");

I am just dropping this reply if somebody has the same problem 😃