DEV Community

Cover image for The Dev Menu is a need for all React Native apps!
Davyd NRB
Davyd NRB

Posted on

The Dev Menu is a need for all React Native apps!

For each React Native application, I made a dev menu. In this article, I’ll try to clarify why you also require this.

As a quality, it plays a significant role in the development process. The key benefit is that it gives testers access to more abilities as features.

What may be on the Dev Menu there? I can think of everything, for example:

Environment/Backend switcher

The most frequent practice may be switching quickly between several backend environments.

Image description

Push Notifications

Tester or developer can easyly copy a FCM of APMs tokens to send a test push notification for this device using a Firebase Console

Image description

Image description

CodePush

Oh, this is one of my favorites; you can apply PRs changes and test those JS changes with only one click.

Image description

You won’t have to bother with enrolling test devices in the Apple Developer Portal, downloading a beta version of an app from Firebase Distribution, or keeping track of how long it will take for your iOS build to be available.

You can see in the movies how the developer installed a custom codepush release that randomly changes the app’s colors.

I18n

People who are in charge of translating an app into different languages want to see the results of their efforts right away. They can enable a float button to quickly switch languages from any screen in the app, and it’s incredibly simple and useful.

Feature flags

The advantages of feature flags are many, including quicker development, A/B testing, enhanced safety and migration, etc. Therefore, having the option to manually modify them in the app is fundamental!

Image description

Error tracking

Image description

You can verify uploading source-maps/dSYM and stack-stack encoding using the buttons above.

global.__testCrash();  // Crash JS (invoke an undefined function)

Sentry.captureException(new Error('This is a test error')); // Report error

new Promise(() => { // Reject promise
    throw new Error('This is a test unhandled promise rejection');
});

Sentry.nativeCrash(); // Native crash
Enter fullscreen mode Exit fullscreen mode

In-App Updates

Although testing required a production build, in-app updates allow users to receive fresh upgrades as soon as a new version is published.

Image description

We print an update status in the dev menu so that logic may be verified. For iOS, we use our own original code to mimic this behavior.

Image description

Device Info

This data may be used to identify analytical events or errors using your device ID.

Image description

Also others

  • Premium toggle (security is risky, therefore make sure that the code isn’t used in production builds.)
  • Auto create of records/items (will add or generate test data presets)
  • Remote Config (view and refetch remove config values)
  • Async Storage & MMKV (it may just be a read-only list of all the saved values or a basic editor.)

What new items should be in the development menu? Please left a response in the comments

Top comments (1)

Collapse
 
jeffngugi profile image
jeff ngugi

Can you give an example where you implement the above.