React Native / Expo Android visual test
Interactive, on-device verification of a React Native or Expo Android app — the
"did my last change actually render correctly" check. Starts Metro and the
native build, runs the app on a device or emulator, captures real screenshots
via adb, reads the logs, and gives a concrete verdict.
Covers bare React Native (npx react-native run-android) and Expo
(npx expo run:android / dev client). Android only — iOS needs a Mac and
xcrun simctl, which is out of scope here.
When to use
- "Test the app / run it on Android / see the visual changes."
- "Did my UI fix work? Does this screen render correctly now?"
- "Compare this screen to the Figma design." (optional Figma add-on)
- Any request for empirical, on-device confirmation of a visual or runtime
change — even without the words "screenshot" or "logs".
How it works
- Follow
references/capture-loop.md — the universal procedure: preflight,
launch in the background, wait for the first real frame, screenshot, capture
logs, analyze the PNG against the change, report a verdict.
- For the RN/Expo specifics — the exact run command (bare RN vs Expo), the
Metro bundler, the "bundle complete + first frame" signal, where RN logs
(
ReactNative/ReactNativeJS, Hermes, red-box), Fast Refresh, and the dev
menu — read references/react-native.md.
- To navigate the UI before screenshotting, see
references/driving-the-ui.md.
- When something looks off, see
references/troubleshooting.md.
- (Optional) compare to a Figma design →
references/figma-comparison.md
(requires the Figma MCP server; skip entirely if you don't use Figma).
- Reached here with a non-RN Android app? See
references/other-frameworks.md or use the matching skill.
Bundled scripts
scripts/check-devices.sh, launch.sh, snap.sh, capture-logs.sh,
stop.sh wrap the common adb/run commands with device disambiguation.
capture-loop.md shows how they fit together. Note that Metro runs as part of
the launched command's process group, so stop.sh tears it down too.
1---2name: react-native-test-android-visually3description: Run a React Native or Expo app on a connected Android device or emulator, capture real screenshots via adb, read the Metro + logcat logs, and verify the visible UI and runtime behavior match what a recent code change intended. Use whenever the user asks to "test the app", "run it on Android", "see the visual changes", "verify a UI fix", "check if my change works/renders", or otherwise wants empirical on-device confirmation that a React Native / Expo change rendered correctly — even when they don't say "screenshot" or "logs". Handles starting Metro and the native build, waiting for the bundle + first frame, navigating with adb input, capturing the screen, reading Metro/logcat output (ReactNative / ReactNativeJS, Hermes, red-box errors), and reporting a concrete verdict with evidence. Covers bare React Native and Expo (dev client + run:android). Optionally diffs against a Figma reference when one is provided. Android only (iOS needs a Mac).4license: Apache-2.05---67# React Native / Expo Android visual test89Interactive, on-device verification of a React Native or Expo Android app — the10"did my last change actually render correctly" check. Starts Metro and the11native build, runs the app on a device or emulator, captures real screenshots12via `adb`, reads the logs, and gives a concrete verdict.1314Covers **bare React Native** (`npx react-native run-android`) and **Expo**15(`npx expo run:android` / dev client). Android only — iOS needs a Mac and16`xcrun simctl`, which is out of scope here.1718## When to use1920- "Test the app / run it on Android / see the visual changes."21- "Did my UI fix work? Does this screen render correctly now?"22- "Compare this screen to the Figma design." (optional Figma add-on)23- Any request for empirical, on-device confirmation of a visual or runtime24 change — even without the words "screenshot" or "logs".2526## How it works27281. **Follow `references/capture-loop.md`** — the universal procedure: preflight,29 launch in the background, wait for the first real frame, screenshot, capture30 logs, analyze the PNG against the change, report a verdict.312. **For the RN/Expo specifics** — the exact run command (bare RN vs Expo), the32 Metro bundler, the "bundle complete + first frame" signal, where RN logs33 (`ReactNative`/`ReactNativeJS`, Hermes, red-box), Fast Refresh, and the dev34 menu — read `references/react-native.md`.353. **To navigate the UI** before screenshotting, see `references/driving-the-ui.md`.364. **When something looks off**, see `references/troubleshooting.md`.375. **(Optional) compare to a Figma design** → `references/figma-comparison.md`38 (requires the Figma MCP server; skip entirely if you don't use Figma).396. Reached here with a **non-RN** Android app? See40 `references/other-frameworks.md` or use the matching skill.4142## Bundled scripts4344`scripts/check-devices.sh`, `launch.sh`, `snap.sh`, `capture-logs.sh`,45`stop.sh` wrap the common `adb`/run commands with device disambiguation.46`capture-loop.md` shows how they fit together. Note that Metro runs as part of47the launched command's process group, so `stop.sh` tears it down too.
lukas-hinterleitner