expo-dev-menu

What is expo-dev-menu?

The expo-dev-menu package provides a developer menu for React Native apps built with Expo. It allows developers to access various debugging and development tools directly within the app, making it easier to test and debug applications.

What are expo-dev-menu's main functionalities?

Access Developer Menu

This feature allows developers to open the developer menu programmatically. The developer menu provides various tools and options for debugging and testing the app.

import { DevMenu } from 'expo-dev-menu';

// Open the developer menu
DevMenu.show();

Custom Developer Menu Items

This feature allows developers to add custom items to the developer menu. These items can perform specific actions when selected, providing a way to extend the functionality of the developer menu.

import { registerDevMenuItem } from 'expo-dev-menu';

registerDevMenuItem({
  name: 'Custom Item',
  callback: () => {
    console.log('Custom item selected');
  }
});

Toggle Performance Monitor

This feature allows developers to toggle the performance monitor on and off. The performance monitor provides insights into the app's performance, such as frame rate and memory usage.

import { DevMenu } from 'expo-dev-menu';

// Toggle the performance monitor
DevMenu.togglePerformanceMonitor();

Other packages similar to expo-dev-menu

react-native-debugger

React Native Debugger is a standalone app for debugging React Native apps. It includes a range of tools for inspecting and debugging the app, such as a network inspector, Redux DevTools, and more. Unlike expo-dev-menu, it is a separate application that runs alongside the React Native app.

react-native-flipper

Flipper is a platform for debugging mobile apps, including React Native apps. It provides a range of plugins for inspecting and debugging various aspects of the app, such as network requests, layout, and more. Flipper is more comprehensive than expo-dev-menu, offering a wider range of debugging tools and integrations.

README

📦 expo-dev-menu

Expo/React Native module to add developer menu to Debug builds of your application. This package is intended to be included in your project through expo-dev-client.

Documentation

You can find more information in the Expo documentation.

Contributing

The expo-dev-menu repository consists of two different parts, the exported package, which includes the native functions, located in the android, ios and src folders and the Dev Menu interface, located under the app folder.

Local development is usually done through bare-expo.

First, make sure to yarn and yarn start in expo-dev-menu which will add the port for the dev menu packager to dev-menu-packager-host. This is bundled into the native code in bare-expo so need to be done first. When done with local development, you need to reset the contents of dev-menu-packager-host!

Making JavaScript changes inside the app folder

To update the JavaScript code inside the app folder, you need to run the dev-menu bundler locally.

1. Navigate to the dev-menu package: cd packages/expo-dev-menu
2. Start the Metro bundler: yarn start
3. To use your local bundler on Android, open DevMenuManager.kt and set useDeveloperSupport to true.

- val useDeveloperSupport = false
+ val useDeveloperSupport = true

1. Play with your changes on a simulator or device through bare-expo
2. Once you've made all the necessary changes run yarn bundle:prod:ios && yarn bundle:prod:android to update the embedded bundle