rn-harness-screenshot

rn-harness-screenshot — Phase 9: Store Screenshots

Capture store screenshots by running the app on a real simulator/emulator with Maestro. Ads are hidden during capture via environment variable.

How It Works

This is NOT image generation. Maestro physically controls the simulator:

1. Launches the app on a real iOS Simulator or Android Emulator
2. Taps buttons, scrolls, navigates between screens
3. Takes PNG screenshots at each screen
4. You can watch it happen live on the simulator

Trigger

Called by the orchestrator as Phase 9.

Input

• docs/harness/plans/YYYY-MM-DD-prd.md (screen structure)
• Actual project code
• Development build installed on simulator/emulator

Prerequisites

• Maestro CLI (curl -Ls "https://get.maestro.mobile.dev" | bash)
• iOS Simulator or Android Emulator running
• Development build installed (from Phase 8)

Process

Step 0: Hide Ads for Screenshots

Store screenshots must NOT show ads. Before capturing, ensure the ad-hiding mechanism is in place.

0a. Verify AdBanner has EXPO_PUBLIC_HIDE_ADS support

Check src/features/ads/ui/AdBanner.tsx:

export function AdBanner({ size = BannerAdSize.ANCHORED_ADAPTIVE_BANNER }: IAdBannerProps) {
  // Hide ads during screenshot capture
  if (process.env.EXPO_PUBLIC_HIDE_ADS === 'true') return null;
  
  return (
    <BannerAd
      unitId={getAdUnitId('BANNER')}
      size={size}
      requestOptions={{ requestNonPersonalizedAdsOnly: true }}
    />
  );
}

If not present, add the EXPO_PUBLIC_HIDE_ADS check to:

• AdBanner.tsx — banner component
• use-interstitial.ts — interstitial hook (skip show())
• use-rewarded.ts — rewarded hook (skip show())
• use-app-open-ad.ts — app open ad hook (skip)

0b. Start app with ads hidden

EXPO_PUBLIC_HIDE_ADS=true npx expo start --dev-client

Or if using expo run:*:

EXPO_PUBLIC_HIDE_ADS=true npx expo run:ios
EXPO_PUBLIC_HIDE_ADS=true npx expo run:android

Step 1: Choose Screenshot Screens