React native perf monitor not showing up (solved)

React native per monitor is very useful while debugging performance-related issues. I use it mainly to monitor FPS of scroll performance, animations, etc.

react native perf monitor

It used to work fine but recently perf monitor was not showing up. Whenever I turn on perf monitor, it takes me to a new screen to enable Draw over other apps for the current app.

That’s fine, You can enable it if “Display over other app” permission is not enabled for the app. But the problem arises when the option to enable it is greyed out. If it is greyed out then you won’t be able to turn on the permission for this app.

It will be greyed out if your app’s AndroidManifest.xml file doesn’t have a permission named android.permission.SYSTEM_ALERT_WINDOW

All you need to do is add this line

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

Add this line before <application> in your AndroidManifest.xml

Re-build and Re-install the app. Open react native dev menu by shaking the device or CTRL + M for emulator > Click on Show Perf Monitor > If it takes to a new settings screen to enable “Display over other apps” then enable it for your app.

Now your perf monitor should start working. Cheers!

5 2 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments