or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

Expo Dev Menu

Expo Dev Menu is a React Native/Expo module that provides a developer menu interface for debug builds. It enables developers to access debugging tools and register custom menu items with callback functions. This package is intended to be included in projects through expo-dev-client and provides essential development workflow capabilities.

Package Information

  • Package Name: expo-dev-menu
  • Package Type: npm
  • Language: TypeScript
  • Installation: npx expo install expo-dev-menu (typically installed via expo-dev-client)

Core Imports

import { openMenu, hideMenu, closeMenu, registerDevMenuItems, ExpoDevMenuItem } from "expo-dev-menu";

For CommonJS:

const { openMenu, hideMenu, closeMenu, registerDevMenuItems } = require("expo-dev-menu");

Basic Usage

import { openMenu, registerDevMenuItems, ExpoDevMenuItem } from "expo-dev-menu";

// Open the developer menu programmatically
openMenu();

// Register custom menu items
const customItems: ExpoDevMenuItem[] = [
  {
    name: "Clear Cache",
    callback: () => {
      // Clear app cache
      console.log("Cache cleared");
    },
    shouldCollapse: true // Menu closes after selection
  },
  {
    name: "Debug Mode",
    callback: () => {
      // Toggle debug mode
      console.log("Debug mode toggled");
    }
    // shouldCollapse defaults to false
  }
];

await registerDevMenuItems(customItems);

Platform Support

  • Android: Full support
  • iOS: Full support
  • Web: Not supported - all methods throw WebUnsupportedError

Capabilities

Menu Control

Control the visibility and state of the developer menu.

/**
 * Opens the development client menu
 */
function openMenu(): void;

/**
 * Hides the development client menu
 */
function hideMenu(): void;

/**
 * Closes the development client menu
 */
function closeMenu(): void;

Custom Menu Items

Register custom entries in the developer menu with callback functions.

/**
 * Allows specifying custom entries in the development client menu
 * @param items
 * @returns Promise that resolves when items are registered
 */
function registerDevMenuItems(items: ExpoDevMenuItem[]): Promise<void>;

Usage Example:

import { registerDevMenuItems, ExpoDevMenuItem } from "expo-dev-menu";

const menuItems: ExpoDevMenuItem[] = [
  {
    name: "Reset App State",
    callback: () => {
      // Reset application state
      AsyncStorage.clear();
    },
    shouldCollapse: true
  },
  {
    name: "Show Performance",
    callback: () => {
      // Show performance overlay
      performanceMonitor.toggle();
    }
  }
];

try {
  await registerDevMenuItems(menuItems);
  console.log("Custom menu items registered successfully");
} catch (error) {
  console.error("Failed to register menu items:", error);
}

Types

/**
 * Configuration object for a custom developer menu entry
 */
interface ExpoDevMenuItem {
  /**
   * Name of the entry, will be used as the label in the menu
   */
  name: string;
  
  /**
   * Callback function to execute when user selects this menu item
   */
  callback: () => void;
  
  /**
   * Whether the menu should close after the user interaction
   * @default false
   */
  shouldCollapse?: boolean;
}

Error Handling

On web platforms, all expo-dev-menu functions will throw an error with the message "expo-dev-menu isn't supported on Expo Web."

Example:

import { openMenu } from "expo-dev-menu";
import { Platform } from "react-native";

if (Platform.OS !== "web") {
  openMenu(); // Safe on native platforms
} else {
  console.warn("Developer menu not available on web");
}

// Alternative: Handle errors when calling functions
try {
  openMenu();
} catch (error) {
  console.warn("Developer menu not available:", error.message);
}