Argent React Native App Workflow
Run the correct React Native start, iOS/Android build, Metro, and test commands for an Argent-style repo without guessing defaults.
Overview
argent-react-native-app-workflow is an agent skill for the Build phase that runs step-by-step React Native start, build, Metro, and test workflows tuned to each project’s real scripts.
Install
npx skills add https://github.com/software-mansion/argent --skill argent-react-native-app-workflowWhat is this skill?
- Mandatory first step: read build/run config from argent-environment-inspector—never default to stock react-native CLI bl
- Prioritizes custom package.json scripts (start:local, flavors, build:ios) over npx react-native start / run-ios
- Pre-start checklist covers node_modules, CocoaPods install, metro.config.js ports, and .xcworkspace vs .xcodeproj
- Workflows for Metro debugging, build failures, runtime errors, and tests
- Instructs saving discovered project workflow to memory to avoid re-discovery each session
- Mandatory explore-configuration step before any run command
- Pre-start checklist with explicit node_modules and CocoaPods gates
Adoption & trust: 1.9k installs on skills.sh; 1.2k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You open a React Native repo and generic npx react-native commands fail because flavors, custom start scripts, or iOS workspace setup differ from the template.
Who is it for?
Indie developers on non-trivial RN codebases (especially Argent-ecosystem apps) who need a repeatable local run and debug ritual.
Skip if: Greenfield apps that truly match stock RN CLI with no custom scripts—though the inspector step still helps confirm that.
When should I use this skill?
Starting the React Native app, debugging Metro, fixing iOS/Android builds, diagnosing runtime errors, or running tests on simulator or emulator.
What do I get? / Deliverables
You run the project’s authoritative start and platform commands with pods and Metro configured, with the workflow saved for the next debug session.
- Documented project-specific start and run command sequence
- Running app on simulator or emulator with resolved Metro/native blockers
- Saved workflow notes in project memory for repeat sessions
Recommended Skills
Journey fit
Local app run and debug loops live in Build while you implement and verify mobile UI on simulators and emulators. Frontend is the shelf because the skill centers on running the RN client, Metro, pods, and device targets—not backend APIs or store release.
How it compares
Project-specific runbook for RN local dev—not a profiler or bundle-size optimization skill.
Common Questions / FAQ
Who is argent-react-native-app-workflow for?
Solo and indie builders shipping React Native apps who need reliable simulator/emulator startup and debugging when package.json scripts diverge from defaults.
When should I use argent-react-native-app-workflow?
During Build when starting the app, fixing Metro or native build errors, diagnosing runtime issues on iOS/Android, or running the project’s test suite before shipping changes.
Is argent-react-native-app-workflow safe to install?
It guides shell commands (install, pod install, run scripts)—review the Security Audits panel on this Prism page and run only in repos you trust.
Workflow Chain
Requires first: argent environment inspector
Then invoke: argent react native profiler, argent react native optimization
SKILL.md
READMESKILL.md - Argent React Native App Workflow
## 1. Starting the React Native App ### 1.1 Explore Configuration (MANDATORY — Do This First) **Before running commands**, read the project's build and run configuration from the `argent-environment-inspector` subagent result. Do NOT default to `npx react-native start` or `npx react-native run-ios` without first checking for custom scripts and workflows. **Manual fallback** (if neither the agent nor the tool is available): read ALL `package.json` scripts — look for custom scripts like `start:local`, `start:dev`, `ios`, `build:ios`, flavors, etc. Custom scripts take priority over default commands. Also check `metro.config.js` for non-default port or watchFolders. For iOS builds, prefer opening `.xcworkspace` over `.xcodeproj` (CocoaPods generates the workspace). **If the project structure is convoluted, ask the user before proceeding.** **Remember the workflow:** Once you discover the project's build/run workflow, save it to project memory so you don't need to re-discover it each time. **Checklist before start:** - [ ] `node_modules` present (if not: `npm install` or `yarn`) - [ ] For iOS: `ios/Podfile` exists; if `ios/Pods` missing or stale, run `cd ios && pod install && cd ..` - [ ] No conflicting Metro on default port (see 1.2) ### 1.2 Start Metro 1. Check whether metro is already running on port found in configuration and if it is - do not start another server. Refer to point 2.1. 1. **Use the project's custom start script if one exists** (e.g. `npm run start:local`, `yarn start:dev`). Fall back to default commands if no custom scripts are defined: ```bash npx react-native start ``` Optional: `npx react-native start --reset-cache` if cache issues are suspected. 1. **Verify Metro is ready**: use the `debugger-status` tool to verify Metro is running and reachable. 1. **Projects with flavors or custom configs**: Use project-specific start script if present (e.g. `npm run start:local`), and start Metro **before** running the app. ### 1.3 Run the App In a **separate** terminal (Metro keeps running in the first): **Use the project's custom build/run script if one exists** (e.g. `npm run ios`, `npm run android`, `yarn ios:debug`). Only fall back to the defaults below if no custom scripts are defined. **Pass the target device explicitly** — derive it from `list-devices` (see `<device_selection_rule>`): ```bash npx react-native run-ios --simulator="<name>" # iOS (or --udid <UDID>) npx react-native run-android --deviceId=<adb-serial> # Android ``` **Android only**: after install, run `adb -s <serial> reverse tcp:8081 tcp:8081` so the emulator/device can reach Metro on your host. Repeat if the device restarts or adb drops. **Agent checklist:** - [ ] Metro is already running and shows "ready" - [ ] Command run from project root - [ ] If the device isn't booted yet: use `boot-device` with the iOS `udid` or Android `avdName`. Refer to the `argent-ios-simulator-setup` / `argent-android-emulator-setup` skill. - [ ] Android: `adb -s <serial> reverse tcp:8081 tcp:8081` done. --- ## 2. Ensuring / Debugging Metro ### 2.1 Check for Existing Metro Before starting Metro, avoid "port already in use" errors. Default port to check is :8081, infer the port from documentation: ```bash lsof -i :PORT ``` - **No output** → Port free; safe to start Metro. - **Output with PID** → Another process is using the port. Use the `debugger-status` tool to check whether the process on that port is actually a Metro server. If not Metro — ask the user whether you may kill the process. To kill a Metro process, use the `stop-metro` tool (requires user confirmation). ### 2.2 Confirm Correct Server Connection - **App must point at the same host/port as