React Native: 3 ways to use Dev Settings API

I recently discovered that React Native has an API for DevSettings 🔥. I recommend giving docs a read before reading the rest of this story.

So I wonder, what can we possibly use this API for and so far I have three possible ways. 🤷‍♂

💡 Toggling custom dev tools

One possible way to use this API is to toggle extra logging when we are in remote debug mode.

In order to demonstrate this use, I added why-did-you-render package to my sample app and disabled trackAllPureComponents it by default. I then added Toggle whyDidYouRender a menu item to the dev settings menu to programmatically enable or disable trackAllPureComponents prop.

Now developers can toggle whyDidYouRender logs using the dev settings menu as shown below:

⭐️ Route specific dev setting

Another possible way to use this API is to trigger route-specific actions. In order to demonstrate this use, I added react-navigation to the sample project with two different routes. Each route adds a dev setting menu time with the same name Customer Action , however, the callback action is overridden onFocus .

Now developers can trigger a custom actions on a specific route in react navigation. This can be used to mock sample data on dev environments to speed up testing and many other use cases.

📖 Open-source devtools

Last possible use case I could think of, was having your open-source library use this API to add menu items. If you happen to be working on an open source project that is catered towards developers, it would be cool to have it appear in menu item automatically.

Tiny Details

• Using addMenuItem with the same name, doesn’t add many items with the same name. Instead, the callback function gets overridden. 👍
• The dev menu has a scroll bar when there are too many menu time. So add away without a care for breaking it. 😉
• You can’t seem to remove menu item as of now. So menu items just stay there until app reloads. 👎
• DevSettings API is only useful for Expo bare workflow and pure react native apps. Expo managed apps can’t seem to use it. ⛔️

I hope you find this story helpful, please like and share as you please. I would really love to hear what other use cases there can possibly be or you have been using this API for in your projects. Please share your thoughts for other to learn from 🙏.

Also, checkout the sample app for details.

GitHub - ximxim/samplerndevsettings