Skip to main content
Mapagam

Working with Development Client

1. Installing Dev Client

The Expo Development Client is a pre-built app that allows you to run your Expo projects on iOS and Android devices without needing to build a standalone app.

Platform Installation Method Notes
iOS expo dev-client:install Run this command in your project directory to install the Development Client on a physical device or simulator.
Android expo dev-client:install Similar to iOS, run this command in your project directory to install the Development Client on an Android device or emulator.

Example: Installing Dev Client

expo dev-client:install
Note: The Development Client is not available for web projects.
Warning: Make sure you have the latest version of Expo CLI installed before running the command.

2. Building Dev Client

Example: Configure dev client in app.json

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "platforms": ["android", "ios"],
    "devClient": {
      "permissions": ["CAMERA", "LOCATION"]
    }
  }
}
Property Description Values
devClient.permissions Permissions to request at build time CAMERA, LOCATION, PHOTOS
Note: Permissions must be declared in app.json or app.config.js to be included in the dev client build.

Example: Build dev client with EAS

eas build --platform android --profile development
eas build --platform ios --profile development

Build Process Overview

  • Use eas build with --profile development
  • Include devClient config in app.json
  • Permissions are bundled into the client at build time

3. Starting Dev Server

To start the development server for an Expo project, you can use the following command:

Example: Starting Dev Server

expo start

This command will:

  • Start the Metro bundler
  • Open the Expo DevTools in your browser
  • Provide a QR code for scanning with the Expo Go app

You can also use the following options to customize the behavior:

Option Description Default
--offline Start the dev server in offline mode false
--tunnel Use a tunnel to expose the dev server false
--lan Use LAN to expose the dev server false
--localhost Use localhost to expose the dev server false

For example, to start the dev server with a tunnel:

Example: Starting Dev Server with Tunnel

expo start --tunnel

To stop the dev server, you can use:

Example: Stopping Dev Server

expo start --offline

4. Using Dev Menu Extensions

Dev Menu Extensions allow you to add custom actions and tools to Expo's development menu, enhancing your development workflow.

Extension Description Usage Notes
expo-dev-client Enables development menu and extensions in standalone apps import 'expo-dev-client' Required for dev menu functionality

Example: Registering a Dev Menu Extension

import { registerDevMenuExtension } from 'expo-dev-client';\n\nregisterDevMenuExtension(\n  'My Custom Action',\n  () => {\n    console.log('Custom action triggered');\n  }\n);
Note: Extensions are only available in development builds and must be registered before the app starts.
Warning: Dev Menu Extensions are not available in production builds.

Key Points

  • Dev Menu Extensions enhance development workflows
  • Extensions must be registered in development builds
  • Extensions are not available in production builds

5. Adding Custom Menu Items

Custom menu items in Expo Development Client allow you to add custom actions or navigation options directly within the client's interface. These items can be useful for testing features, accessing debug tools, or providing quick access to specific parts of your app during development.

Property Description Values
name The name of the menu item to display in the client. string
action Function to execute when the menu item is selected. function
icon Optional icon to display next to the menu item (e.g., 'debug', 'settings'). string

Example: Adding a Custom Debug Menu Item

import { registerRootComponent } from 'expo';\nimport { Menu } from 'expo-menu';\n\nconst customMenuItems = [\n  {\n    name: 'Debug Info',\n    action: () => {\n      console.log('Debugging info');\n    },\n    icon: 'debug',\n  },\n];\n\nMenu.setCustomItems(customMenuItems);\nregisterRootComponent(App);
Note: Custom menu items are only available in the Expo Development Client and will not appear in production builds.

6. Debugging with Dev Client

Example: Enable Remote Debugging

// In your app's entry point (e.g., App.js)
import { Platform } from 'react-native';
import { DevSettings } from 'expo-dev-client';

if (Platform.OS === 'android' || Platform.OS === 'ios') {
  DevSettings.addMenuItem('Debug Remote JS', () => {
    // This enables remote debugging in the dev client
    console.log('Remote JS Debugging Enabled');
  });
}
Method Description Notes
DevSettings.addMenuItem() Adds a custom menu item to the dev client's debug menu Useful for debugging tools or custom actions
DevSettings.setIsDebuggingEnabled() Enables or disables debugging mode Can be toggled at runtime
Note: Remote debugging is enabled by default in Expo Dev Client. You can access the debugger via the "Debug Remote JS" option in the dev menu.

Example: Logging to Dev Client Console

console.log('Debug message from Dev Client');
console.error('Error occurred in Dev Client');
console.warn('Warning in Dev Client');

Debugging Tips

  • Use console.log to output debug information directly to the Dev Client console.
  • Enable remote debugging in the dev client menu for full JavaScript debugging capabilities.
  • Use console.error and console.warn for better visibility of errors and warnings.

7. Switching Environments

Expo Development Client allows you to switch between different development environments to test your app in various configurations. This is particularly useful for testing with different API endpoints, database configurations, or feature flags.

Environment Description Configuration
development Standard development environment with local API endpoints and debug tools enabled. { "env": "development" }
staging Staging environment with staging API endpoints and feature flags enabled. { "env": "staging" }
production Production environment with production API endpoints and all optimizations enabled. { "env": "production" }

Example: Environment Configuration

{
  "env": "development",
  "apiUrl": "http://localhost:3000",
  "debug": true
}

Example: Switching Environments in Code

const config = {
  development: {
    apiUrl: "http://localhost:3000",
    debug: true
  },
  staging: {
    apiUrl: "https://staging-api.expo.dev",
    debug: true
  },
  production: {
    apiUrl: "https://api.expo.dev",
    debug: false
  }
};

const currentEnv = process.env.EXPO_ENV || "development";
const appConfig = config[currentEnv];
Note: The environment switch is managed through the EXPO_ENV environment variable or configuration in your app's app.config.js file.
Warning: Ensure that sensitive configuration values (e.g., API keys) are not exposed in the client-side code when switching environments.

8. Loading Updates in Dev Client

Property Description Default Notes
updates.enabled Enables or disables the update system true Set to false to disable updates entirely
updates.checkAutomatically How often to check for updates ON_LOAD Options: ON_LOAD, ON_ERROR, NEVER
updates.timeout Timeout in milliseconds for update checks 30000 Defaults to 30 seconds

Example: Configure Updates

{
  "expo": {
    "updates": {
      "enabled": true,
      "checkAutomatically": "ON_LOAD",
      "timeout": 30000
    }
  }
}
Note: Updates in Dev Client are only available when running with expo start and not in production builds.

Workflow: Loading Updates

  1. Run expo start in your project directory
  2. Open the Dev Client on a device or simulator
  3. Make changes to your code
  4. Save and reload the app to see updates

9. Using Local Development

Local development with Expo allows you to test and iterate on your app quickly using the Expo Go client or a development build.

Command Description Usage
expo start Starts the Expo development server expo start
expo start --tunnel Starts the development server with a tunnel for remote access expo start --tunnel
expo start --offline Starts the development server in offline mode expo start --offline

Example: Starting Local Development Server

expo start

Example: Starting with Tunnel

expo start --tunnel
Note: The tunnel option is useful for testing on physical devices that are not on the same network.

10. Managing Multiple Dev Clients

Example: Configure multiple dev clients

{
  "expo": {
    "developmentClient": {
      "name": "MyApp-Dev",
      "scheme": "myappdev"
    },
    "extra": {
      "clientType": "development"
    }
  }
}
Property Description Default
name Name of the development client Expo Development Client
scheme URI scheme for the client exp+<project-slug>
icon Path to icon file (PNG or JPG) None
Note: The scheme must be unique per client to avoid conflicts when opening URLs.

Workflow: Setting up multiple dev clients

  1. Create a new app.json or app.config.js configuration file
  2. Add a developmentClient object with unique properties
  3. Run npx expo run:ios or npx expo run:android to build the client
  4. Install the built client on your device or emulator

11. Using Dev Client Plugins

Dev Client plugins allow you to extend the functionality of your Expo development client by adding custom native or JavaScript modules. These plugins can enhance features like push notifications, analytics, or custom UI components.

Plugin Type Description Usage
JavaScript Plugin JavaScript-based plugins that can be used to extend the behavior of the Expo client. Import and register in your app's configuration file.
Native Plugin Plugins that require native code integration (iOS/Android) to provide enhanced capabilities. Must be added to the native project and configured via Expo config.

Example: Registering a JavaScript Plugin

&#x2F;&#x2F; In app.json or app.config.js
{
  "expo": {
    "plugins": [
      ["@expo/config-plugins", { "name": "MyPlugin" }]
    ]
  }
}
Note: Ensure that plugins are compatible with the current version of Expo and your target platforms.
Warning: Native plugins require additional setup in your iOS and Android projects.

12. Configuring Dev Client Settings

Setting Description Default Value Notes
devClient Enables the development client false Set to true to use the dev client
scheme Custom URI scheme for the app exp Must be unique per project
splash.image Path to splash screen image null Supports PNG, JPG, and GIF
splash.resizeMode How to resize the splash image contain Options: cover, contain, stretch
splash.backgroundColor Background color of the splash screen #ffffff Hex color code
splash.showWhenCached Whether to show splash while cached false Set to true for better UX

Example: devClient configuration in app.json

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "platforms": ["ios", "android"],
    "devClient": {
      "scheme": "myapp",
      "splash": {
        "image": "./assets/splash.png",
        "resizeMode": "contain",
        "backgroundColor": "#ffffff",
        "showWhenCached": true
      }
    }
  }
}
Note: The dev client requires expo-dev-client to be installed.
Warning: Ensure that the scheme is unique to avoid conflicts with other apps.

Was this article helpful?

Related Cheat Sheets