Development Workflow

Expo provides a streamlined development workflow with fast iteration, instant previews, and powerful debugging tools. This guide covers the complete development cycle from writing code to seeing it run on devices.

Development Cycle Overview

Starting Development

Launch Dev Server

Start the development server with:

npx expo start

What Happens When You Start

Metro Bundler Starts

Metro bundler launches on port 8081, ready to transform and bundle your JavaScript

Dev Server Starts

HTTP server starts to serve:

App manifest (configuration)
JavaScript bundles
Source maps
Assets (images, fonts)

QR Code Displayed

Terminal shows QR code and connection options:

› Metro waiting on exp://192.168.1.100:8081
› Scan the QR code above

› Press a │ open Android
› Press i │ open iOS simulator  
› Press w │ open web

Ready for Connections

Devices can now connect via:

QR code scan
Direct URL entry
Automatic launch (simulators)

Fast Refresh

Fast Refresh updates your app instantly when you save files, preserving component state.

How Fast Refresh Works

File Changes Detected

Watchman detects file modifications

Module Transformed

Metro transforms only the changed module

Hot Update Sent

Update is sent via WebSocket to connected devices

Component Re-renders

React re-renders the component, preserving state

What Gets Preserved

Preserved during Fast Refresh:

Component state (useState, useReducer)
Navigation state
Form inputs
Scroll position

Triggers Full Reload:

Changes to files outside app/ or src/
Native module changes
app.json modifications
New dependencies installed

Example: Fast Refresh in Action

app/index.tsx

import { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function HomeScreen() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      
      {/* Change this text and save - count state is preserved! */}
      <Text>Hello from Expo</Text>
    </View>
  );
}

When you edit the <Text> content and save, the change appears instantly without resetting count.

Development Server Features

Interactive Terminal

While the dev server is running, you can:

Key	Action
`a`	Open on Android emulator/device
`i`	Open on iOS simulator
`w`	Open in web browser
`r`	Reload app
`m`	Toggle developer menu
`c`	Show project QR code
`j`	Open React DevTools (web)
`o`	Open project in editor

Access the developer menu:

iOS Simulator: Cmd+D
Android Emulator: Cmd+M (Mac) or Ctrl+M (Windows/Linux)
Physical Device: Shake the device
Terminal: Press m

Menu Options:

Reload
Debug Remote JS (legacy)
Enable Fast Refresh
Toggle Element Inspector
Toggle Performance Monitor
Open React DevTools

Element Inspector

Inspect UI elements in your app:

Open developer menu
Select “Toggle Element Inspector”
Tap any element to see its properties

View > View > Text
Props: style, children
Position: x: 20, y: 100
Size: 200 x 50

Performance Monitor

Monitor app performance:

Open developer menu
Select “Toggle Performance Monitor”
View real-time metrics:
- JS thread FPS
- UI thread FPS
- RAM usage
- Bridge traffic

Metro Bundler

Metro is the JavaScript bundler that powers Expo development.

Metro Configuration

Customize Metro in metro.config.js:

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// Add support for additional file extensions
config.resolver.assetExts.push('db');

// Add custom source extensions
config.resolver.sourceExts.push('mjs');

// Configure transformer
config.transformer.minifierPath = 'metro-minify-terser';

module.exports = config;

Metro Commands

npx expo start --clear

Asset Handling

Metro automatically handles: Images:

import logo from './assets/logo.png';

<Image source={logo} />

Fonts:

import { useFonts } from 'expo-font';

const [fontsLoaded] = useFonts({
  'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});

Other Assets:

import data from './assets/data.json';
import doc from './assets/document.pdf';

Build Types

Development Builds

Development builds include your exact dependencies and allow for custom native code. When to use:

Need custom native modules
Using libraries not in Expo Go
Configuring native project settings
Testing production-like behavior

Creating a development build:

# Local build
npx expo prebuild
npx expo run:ios
npx expo run:android

# Cloud build with EAS
eas build --profile development

Expo Go Builds

Expo Go is a pre-built app with common SDK modules. When to use:

Learning Expo
Prototyping quickly
Only using Expo SDK modules
Sharing demos

Limitations:

No custom native code
Limited to included SDK modules
Some libraries incompatible

What's included in Expo Go?

Expo Go includes these SDK modules:

Camera, Location, Sensors
FileSystem, SQLite, SecureStore
Notifications, Updates
Image Picker, Document Picker
Video, Audio, AV
And 40+ more…

See full list.

Production Builds

Production builds are optimized for app stores.

# Export for production
npx expo export --platform ios
npx expo export --platform android

# Or use EAS Build
eas build --platform ios --profile production
eas build --platform android --profile production

Optimizations applied:

Code minification
Dead code elimination
Asset optimization
Source map generation
Bundle splitting

Debugging

React DevTools

Debug React components:

# Start dev server
npx expo start

# Press 'j' to open React DevTools

Features:

Component tree inspection
Props and state viewer
Performance profiling
Hook debugging

Console Logs

View console output in terminal:

console.log('Debug info:', data);
console.warn('Warning message');
console.error('Error details');

Logs appear in:

Terminal (where expo start is running)
React DevTools console
Browser console (web)

Debugging Native Code

iOS (Xcode):

Open ios/YourApp.xcworkspace in Xcode
Set breakpoints in Swift/Objective-C code
Run from Xcode with debugging

Android (Android Studio):

Open android/ folder in Android Studio
Set breakpoints in Kotlin/Java code
Run with debugger attached

Network Debugging

Inspect network requests:

import { Platform } from 'react-native';

if (__DEV__) {
  // Enable network inspector
  global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
}

Use React Native Debugger or Flipper for advanced network inspection.

Environment Configuration

Environment Variables

Use expo-constants for environment-specific config:

app.config.js

export default {
  expo: {
    extra: {
      apiUrl: process.env.API_URL || 'https://api.example.com',
      apiKey: process.env.API_KEY,
    },
  },
};

import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig?.extra?.apiUrl;
const apiKey = Constants.expoConfig?.extra?.apiKey;

Development vs Production

Check environment:

import { Platform } from 'react-native';

if (__DEV__) {
  // Development only
  console.log('Running in development');
}

const API_URL = __DEV__
  ? 'http://localhost:3000'
  : 'https://api.production.com';

Common Workflows

Adding a New Screen

Create file in app/ directory

touch app/profile.tsx

Implement screen

app/profile.tsx

import { View, Text } from 'react-native';

export default function ProfileScreen() {
  return (
    <View>
      <Text>Profile Screen</Text>
    </View>
  );
}

Navigate to screen

import { Link } from 'expo-router';

<Link href="/profile">Go to Profile</Link>

Test on device

Fast Refresh automatically shows the new screen

Installing a New Package

Install with expo install

npx expo install expo-image-picker

Import in your code

import * as ImagePicker from 'expo-image-picker';

Use the API

const result = await ImagePicker.launchImageLibraryAsync();

Rebuild if needed

If the package has native code not in Expo Go:

npx expo prebuild
npx expo run:ios

Testing on Physical Device

Connect to same network

Ensure your device and computer are on the same WiFi

Start dev server

npx expo start

Scan QR code

iOS: Use Camera app
Android: Use Expo Go app

App loads

Your app opens and connects to the dev server

Can't connect?

If scanning doesn’t work:

Try tunnel mode:
```
npx expo start --tunnel
```
Check firewall settings
Use USB connection:
```
npx expo start --localhost
```
Then connect via USB debugging

Performance Best Practices

Optimize Re-renders

Use React.memo and useMemo to prevent unnecessary re-renders:

import { memo, useMemo } from 'react';

const ExpensiveComponent = memo(({ data }) => {
  const processed = useMemo(() => processData(data), [data]);
  return <View>{/* render */}</View>;
});

Lazy Load Screens

Use dynamic imports for screens:

import { lazy, Suspense } from 'react';

const ProfileScreen = lazy(() => import('./ProfileScreen'));

<Suspense fallback={<Loading />}>
  <ProfileScreen />
</Suspense>

Optimize Images

Use optimized image formats and sizes:

import { Image } from 'expo-image';

<Image
  source={{ uri: url }}
  contentFit="cover"
  placeholder={blurhash}
  transition={200}
/>

Monitor Performance

Use React DevTools Profiler:

import { Profiler } from 'react';

<Profiler id="Screen" onRender={onRenderCallback}>
  <Screen />
</Profiler>

Troubleshooting

Metro bundler stuck

Clear cache and restart:

npx expo start --clear

Fast Refresh not working

Check for syntax errors
Ensure file is in app/ or src/
Manually reload: Press r in terminal

White screen on load

Check for:

JavaScript errors in terminal
Missing imports
Incorrect file paths
Network connectivity issues

Native module errors

Rebuild the app:

npx expo prebuild --clean
npx expo run:ios

Next Steps

Expo Go

Learn about the Expo Go app

Tutorial

Build a complete app

Build & Deploy

Ship your app to production

SDK Reference

Explore all SDK modules

Introduction

Core Concepts

Creating Your First App

​Development Cycle Overview

​Starting Development

​Launch Dev Server

​What Happens When You Start

​Fast Refresh

​How Fast Refresh Works

​What Gets Preserved

​Example: Fast Refresh in Action

​Development Server Features

​Interactive Terminal

​Developer Menu

​Element Inspector

​Performance Monitor

​Metro Bundler

​Metro Configuration

​Metro Commands

​Asset Handling

​Build Types

​Development Builds

​Expo Go Builds

​Production Builds

​Debugging

​React DevTools

​Console Logs

​Debugging Native Code

​Network Debugging

​Environment Configuration

​Environment Variables

​Development vs Production

​Common Workflows

​Adding a New Screen

​Installing a New Package

​Testing on Physical Device

​Performance Best Practices

​Troubleshooting

​Next Steps

Expo Go

Tutorial

Build & Deploy

SDK Reference

Development Cycle Overview

Starting Development

Launch Dev Server

What Happens When You Start

Fast Refresh

How Fast Refresh Works

What Gets Preserved

Example: Fast Refresh in Action

Development Server Features

Interactive Terminal

Developer Menu

Element Inspector

Performance Monitor

Metro Bundler

Metro Configuration

Metro Commands

Asset Handling

Build Types

Development Builds

Expo Go Builds

Production Builds

Debugging

React DevTools

Console Logs

Debugging Native Code

Network Debugging

Environment Configuration

Environment Variables

Development vs Production

Common Workflows

Adding a New Screen

Installing a New Package

Testing on Physical Device

Performance Best Practices

Troubleshooting

Next Steps