react-devtools and React Native issues solved

react-devtools is a great standalone way to debug component, layout and profiling issues with React Native applications.
It can easily be installed by running npx react-devtools and refreshing your React Native application with the dev menu.

Unfortunately sometimes it doesn’t work right especially now that React Native has completely rewritten dev tools for 0.76 and not everyone is on that version yet.

Fortunately if you are having issues with dev tools like:

  • Component tree not syncing up with inspect in the application
  • Profiler not working
  • etc.

There is an easy fix.

Click on the settings gear in the middle of the screen (above) and look at the general tab

Note how the backend and frontend versions are very similar. If you are having issues it might be because they are too far off (this has happens to me often)

Simple look at the releases page for react-devtools and select a frontend version that is close, but likely a little behind the backend version and run that. For example here using devtools like this solved my issue.

Ex:

npx react-devtools@5.3.1

Enjoy and hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Cute Blog by Crimson Themes.