Rn Visual Testing

React Native Visual Testing for iPhone

Test React Native apps visually across iPhone 11–17 families.

iPhone Screen Reference

Logical Dimensions (Points) — Use These for Layout Testing

Unique Logical Sizes to Test (Minimum Coverage)

For comprehensive testing, cover these 8 unique logical dimensions:

375×667  — iPhone SE (smallest, no notch, home button)
375×812  — iPhone 11 Pro, 12/13 mini (notch)
390×844  — iPhone 12/13/13 Pro (notch)
393×852  — iPhone 14/14 Pro/15/15 Pro/16/16e (Dynamic Island on Pro)
402×874  — iPhone 16 Pro/17/17 Pro (Dynamic Island)
414×896  — iPhone 11/11 Pro Max (notch, largest of this era)
428×926  — iPhone 12/13 Pro Max, 14 Plus (notch/Dynamic Island)
430×932  — iPhone 14 Pro Max/15 Pro Max/16 Plus (Dynamic Island)
440×956  — iPhone 16 Pro Max/17 Pro Max (largest current)
420×912  — iPhone Air (newest form factor)

Testing Workflow

1. Configure Simulators

List available simulators:

xcrun simctl list devices available | grep -i iphone

Create missing simulators if needed:

xcrun simctl create "iPhone 15 Pro" "iPhone 15 Pro"

Boot simulator:

xcrun simctl boot "iPhone 15 Pro"

2. Run App on Simulator

npx react-native run-ios --simulator="iPhone 15 Pro"

Or for specific device:

npx react-native run-ios --device="iPhone 14"

3. Capture Screenshots

Using simctl:

xcrun simctl io booted screenshot ~/screenshots/iphone15pro_home.png

For all booted simulators:

for UDID in $(xcrun simctl list devices booted -j | jq -r '.devices[][] | select(.state=="Booted") | .udid'); do
  NAME=$(xcrun simctl list devices -j | jq -r ".devices[][] | select(.udid==\"$UDID\") | .name" | tr ' ' '_')
  xcrun simctl io $UDID screenshot ~/screenshots/${NAME}_$(date +%s).png
done

4. Set Demo Mode (Consistent Status Bar)

xcrun simctl status_bar booted override \
  --time "9:41" \
  --batteryState charged \
  --batteryLevel 100 \
  --cellularMode active \
  --cellularBars 4 \
  --wifiBars 3

Reset to normal:

xcrun simctl status_bar booted clear

Visual Testing Tools

Detox (Recommended for E2E)

// e2e/visual.test.js
describe('Visual Tests', () => {
  beforeAll(async () => {
    await device.launchApp();
    await device.setStatusBar({
      time: '9:41',
      batteryLevel: 100,
      batteryState: 'full',
    });
  });

  it('should match home screen baseline', async () => {
    await device.takeScreenshot('home_screen');
  });
});

React Native Owl

// owl.config.json
{
  "ios": {
    "workspace": "ios/YourApp.xcworkspace",
    "scheme": "YourApp",
    "device": "iPhone 15 Pro"
  },
  "baseline": ".owl/baseline",
  "screenshots": ".owl/screenshots"
}

// __tests__/Home.owl.js
import { takeScreenshot } from 'react-native-owl';

describe('Home Screen', () => {
  it('matches baseline', async () => {
    const screen = await takeScreenshot('home');
    expect(screen).toMatchBaseline();
  });
});

Critical Checkpoints

Safe Area Validation

Verify content respects safe areas on all devices:

import { useSafeAreaInsets } from 'react-native-safe-area-context';

// Test that insets are applied correctly:
// - iPhone SE: no top inset (home button device)
// - iPhone 11/12/13: ~47pt top (notch)  
// - iPhone 14 Pro+: ~59pt top (Dynamic Island)

Dynamic Island / Notch Compatibility

Orientation Testing

Test both portrait and landscape:

xcrun simctl io booted screenshot --type=png ~/portrait.png
xcrun simctl spawn booted notifyutil -s com.apple.springboard.orientation 1
sleep 1
xcrun simctl io booted screenshot --type=png ~/landscape.png

Automated Multi-Device Script

#!/bin/bash
# test-all-iphones.sh

DEVICES=(
  "iPhone SE (3rd generation)"
  "iPhone 11"
  "iPhone 12 mini"
  "iPhone 13 Pro"
  "iPhone 14"
  "iPhone 14 Pro Max"
  "iPhone 15"
  "iPhone 15 Pro Max"
  "iPhone 16"
  "iPhone 16 Pro Max"
)

SCREENSHOTS_DIR="./visual-tests/$(date +%Y%m%d_%H%M%S)"
mkdir -p "$SCREENSHOTS_DIR"

for DEVICE in "${DEVICES[@]}"; do
  echo "Testing on $DEVICE..."
  
  # Boot and wait
  xcrun simctl boot "$DEVICE" 2>/dev/null || true
  sleep 5
  
  # Set demo mode
  xcrun simctl status_bar "$DEVICE" override --time "9:41" --batteryState charged --batteryLevel 100
  
  # Build and run
  npx react-native run-ios --simulator="$DEVICE" --no-packager &
  sleep 30
  
  # Capture screenshot
  SAFE_NAME=$(echo "$DEVICE" | tr ' ()' '_')
  xcrun simctl io "$DEVICE" screenshot "$SCREENSHOTS_DIR/${SAFE_NAME}.png"
  
  # Shutdown
  xcrun simctl shutdown "$DEVICE"
done

echo "Screenshots saved to $SCREENSHOTS_DIR"

Common Issues

Pixel-Perfect Checklist

1. ☐ Text readable at all sizes (no truncation)
2. ☐ Touch targets ≥44pt on all devices
3. ☐ Images scale correctly (use resizeMode)
4. ☐ Safe areas respected (top and bottom)
5. ☐ Horizontal scrolling only where intended
6. ☐ No content under notch/Dynamic Island
7. ☐ Home indicator area clear
8. ☐ Landscape mode functional (if supported)
9. ☐ Dark mode appearance correct
10. ☐ Dynamic Type/font scaling handled