⚡ Development Workflow

Understanding Metro Bundler

When you run npx expo start, you start Metro — the JavaScript bundler for React Native. Think of Metro as the engine that powers your development experience. Understanding it helps you debug issues and optimize your workflow.

What Metro Does

flowchart LR
    subgraph Input["Your Code"]
        A[".tsx files"]
        B[".ts files"]
        C["Assets"]
        D["node_modules"]
    end
    
    subgraph Metro["Metro Bundler"]
        E["Transform
(Babel)"]
        F["Bundle
(Combine)"]
        G["Serve
(HTTP)"]
    end
    
    subgraph Output["To Device"]
        H["JavaScript
Bundle"]
    end
    
    A --> E
    B --> E
    C --> F
    D --> E
    E --> F
    F --> G
    G --> H
    
    style Metro fill:#fff3e0,stroke:#ff9800
                

Metro transforms, bundles, and serves your code to the device

Metro's responsibilities include:

The Metro Terminal Interface

When Metro is running, you have access to keyboard shortcuts:

Common Metro Issues

# Stop Metro (Ctrl+C), then:
npx expo start --clear

# Use a different port
npx expo start --port 8082

# Or find and kill the process using 8081
# Mac/Linux:
lsof -i :8081
kill -9 <PID>

# Windows:
netstat -ano | findstr :8081
taskkill /PID <PID> /F

The Developer Menu

The developer menu is your control center while running the app. It gives you access to debugging tools, reload options, and performance monitoring.

Opening the Developer Menu

Developer Menu Options

The developer menu provides quick access to debugging tools

Menu Options Explained

Debugging Techniques

Effective debugging is a crucial skill. React Native offers several approaches, from simple console logs to full-featured debuggers.

Technique 1: Console Logging

The simplest and often most effective debugging method:

function MyComponent() {
  const [count, setCount] = useState(0);
  
  // Log state changes
  console.log('Render with count:', count);
  
  const handlePress = () => {
    console.log('Button pressed!');
    console.log('Previous count:', count);
    setCount(count + 1);
  };
  
  // Debug object data
  const user = { name: 'John', id: 123 };
  console.log('User object:', JSON.stringify(user, null, 2));
  
  // Use different log levels
  console.info('Info message');
  console.warn('Warning message');  // Shows yellow box
  console.error('Error message');   // Shows red box
  
  return (
    <Pressable onPress={handlePress}>
      <Text>Count: {count}</Text>
    </Pressable>
  );
}

Where to see logs:

• Metro terminal (where you ran npx expo start)
• Browser console (if using JS debugger)
• Flipper or React Native Debugger

console.log('[MyComponent] State updated:', state);
console.log('[API] Response:', response);
console.log('[Navigation] Navigating to:', screen);

Technique 2: JavaScript Debugger

For more complex debugging, use the JavaScript debugger:

1. Press j in Metro terminal (or use developer menu)
2. A browser window opens with Chrome DevTools
3. Go to the Sources tab
4. Find your file and set breakpoints

sequenceDiagram
    participant App as 📱 App
    participant Metro as ⚡ Metro
    participant Browser as 🌐 Chrome DevTools
    
    App->>Metro: Press 'j' or "Open Debugger"
    Metro->>Browser: Open debugger session
    Browser->>Browser: Load source maps
    Note over Browser: Set breakpoints in Sources tab
    App->>Browser: Execution hits breakpoint
    Browser->>Browser: Inspect variables, step through code
    Browser->>App: Resume execution
                

The JavaScript debugger connects your app to Chrome DevTools

Using Breakpoints

function calculateTotal(items) {
  // You can also use 'debugger' statement
  debugger;  // Execution pauses here when debugger is open
  
  let total = 0;
  for (const item of items) {
    total += item.price;
  }
  return total;
}

Technique 3: React DevTools

Inspect your React component tree, props, and state:

# Install React DevTools globally
npm install -g react-devtools

# Run it (in a separate terminal)
react-devtools

Then shake your device and select "Debug with React DevTools".

Technique 4: Element Inspector

For layout and style debugging:

1. Open developer menu
2. Select "Show Element Inspector"
3. Tap any element on screen
4. View its styles, dimensions, and hierarchy

Reading Error Messages

React Native error messages can be intimidating, but they follow patterns. Learning to read them quickly will save you hours of debugging.

Anatomy of an Error

React Native errors show the message, location, and offending code

Common Errors and Fixes

// ❌ Wrong
<View>
  Hello World
</View>

// ✅ Correct
<View>
  <Text>Hello World</Text>
</View>

// ❌ user is undefined
<Text>{user.name}</Text>

// ✅ Use optional chaining
<Text>{user?.name}</Text>

// ✅ Or provide default
<Text>{user?.name ?? 'Guest'}</Text>

// ❌ Hook inside condition
if (someCondition) {
  const [state, setState] = useState();  // Wrong!
}

// ✅ Hook at top level
const [state, setState] = useState();
if (someCondition) {
  // use state here
}

// ❌ No key
{items.map(item => <Text>{item.name}</Text>)}

// ❌ Using index as key (not ideal)
{items.map((item, index) => <Text key={index}>{item.name}</Text>)}

// ✅ Using unique ID
{items.map(item => <Text key={item.id}>{item.name}</Text>)}

Red Box vs Yellow Box

Productivity Tips

These tips and shortcuts will significantly speed up your development workflow.

Keyboard Shortcuts

VS Code Snippets

If you installed the React Native snippets extension, use these shortcuts:

Development Best Practices

Workflow Diagram

flowchart TD
    A[Start Development] --> B[npx expo start]
    B --> C{Choose Target}
    C -->|Phone| D[Scan QR with Expo Go]
    C -->|Simulator| E[Press 'i' or 'a']
    D --> F[App Running]
    E --> F
    F --> G[Write Code]
    G --> H[Save File]
    H --> I{Hot Reload Works?}
    I -->|Yes| G
    I -->|No| J[Press 'r' to reload]
    J --> G
    G --> K{Error?}
    K -->|Yes| L[Read Error Message]
    L --> M[Fix Code]
    M --> G
    K -->|No| G
    
    style F fill:#e8f5e9,stroke:#4caf50
    style L fill:#ffebee,stroke:#f44336
                

The typical development loop — code, save, see changes, repeat

Summary

Quick Reference Card

🚀 What's Next?

You now have all the tools and knowledge to develop efficiently. In the final lesson of this module, we'll dive into TypeScript essentials for React Native — the types and patterns you'll use every day.