The Dev Menu is a need for all React Native apps!
Tags: reactnative, testing, qa, codepush
Published: 2023-01-07 20:20:51

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwck8r8vuw1b31l6e86x.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3r3wgkf9bh3i5h6mc3o.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blwgv7t4xo80k4rrg4qr.png)


## [CodePush](https://learn.microsoft.com/en-us/appcenter/distribution/codepush/)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gogavoj8xc2b7kkh9745.png)

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.


{% embed https://vimeo.com/787196148 %}


> 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.

{% embed https://vimeo.com/787191137 %}

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxrg3myo2r65hn9a7dzh.png)


## Error tracking


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovng1idxvwhgeupdobed.png)

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

```tsx
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
```

## In-App Updates

Although [testing required](https://developer.android.com/guide/playcore/in-app-updates/test) a production build, [in-app updates](https://developer.android.com/guide/playcore/in-app-updates) allow users to receive fresh upgrades as soon as a new version is published.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyzfc1rufvg7udubguio.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2amgnkj3o7ovp9os1z6k.png)


## Device Info

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idljc09vul20o02c4z19.png)


## 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