React Native: Unable to inspect contents in React Dev Tools/Layout Inspector

[micnguyen]

🐛 Bug Report

• When I start a bare React Native project and I select the React Dev Tools, whenever I select an element, it stays as Loading forever on the side panel:

and in the app I get this error:

To Reproduce

• Start brand new React Native Project
• Open Flipper
• Select React Dev Tool and select a Text element to change
• View iPhone Simulator and it has the error

Environment

iOS: 14.4
macOS: 11.2.3
"react": "17.0.1",
"react-native": "0.64.0"
Flipper: 0.86.0

[mweststrate]

This means the react-devtools-core is out of sync with the DevTools in Flipper. This has recently been addressed in facebook/react#21331

But in the mean time you an address the issue by specifying which version of the devtools are needed in your package.json, for example (the version used in Flipper is shown at the top of the plugin):

"resolutions": {
   "react-devtools-core": "4.10.3"
}

[mweststrate]

The next version of Flipper will support connecting to the React DevTools of older versions.