GitHub Copilot CLI with React Native: A Practical Guide

GitHub Copilot CLI can do useful React Native work from the terminal, but it needs the same context you would give a new teammate. This guide covers how to set up an Expo or bare React Native project for GitHub Copilot CLI, write repo instructions, and run a safe loop of small changes, checks, and diff review.

Why Copilot CLI works well in a React Native codebase

React Native work mixes TypeScript, platform-specific files, Metro, and occasional native iOS/Android changes. GitHub Copilot CLI suits this because it runs in the same terminal where you already run npm test, npx expo start, and git diff. The agent can read tsconfig.json, app.config.ts, jest.config.js, and the native folders without leaving the project root. It is most useful when you keep changes small and let it run the same checks you would run. Unlike an IDE-only assistant, a CLI agent can also execute the exact package manager and bundler commands from the prompt, which makes it easier to verify a React Native change in one session.

Prepare your React Native repo for Copilot CLI

Create either .github/copilot-instructions.md or AGENTS.md at the repo root. Keep it short and declarative: the agent will treat ambiguous commands like a new intern. For React Native, include install, typecheck, lint, test, and start commands, plus folder conventions and rules about native files, Metro, and platform-specific code.

# AGENTS.md

## Commands
- Install: `npm ci`
- Typecheck: `npx tsc --noEmit`
- Lint: `npm run lint`
- Test: `npx jest --runInBand`
- Expo start: `npx expo start`
- iOS (bare): `npm run ios`
- Android (bare): `npm run android`

## Folders
- `src/` for app code; `src/components`, `src/screens`, `src/navigation`
- `__tests__/` next to source files
- `ios/` and `android/` are managed native folders; do not reformat blindly.

## React Native rules
- Do not edit `ios/Podfile.lock` or `android/gradle.lockfile` by hand; suggest `npx pod-install` or a rebuild.
- Platform-specific files end in `.ios.tsx`, `.android.tsx`, `.native.tsx`.
- When changing navigation, keep types in `src/navigation/types.ts` in sync.
- Metro does not watch `node_modules` changes; restart with `npx expo start -c` or `npx react-native start --reset-cache` for cache issues.
- Prefer `Pressable` over `TouchableOpacity` and keep JS thread work light.
- If a native module is added, run `npx pod-install` on iOS and rebuild the Android app.

That file prevents the agent from running the wrong test command, editing a generated native lockfile, or adding a screen without updating navigation types. Review it after onboarding a new package or changing your test runner.

A safe loop: plan, change, verify

Start the agent by running copilot in your project folder. Then use a plan-first loop: ask the agent to summarize the files it will touch and the commands it will run. Then request the smallest change that adds one behavior. After each turn, run git diff --check, typecheck, tests, and review the diff. If something fails, paste the error back with the failing file. This loop keeps a React Native codebase out of Metro cache and native linking holes. For the overall CLI workflow, see How to use GitHub Copilot CLI: a step-by-step guide.

Example prompts:

• Add a typed login screen and connect it to React Navigation; keep form state local and add a Jest test for validation.
• Replace the hard-coded API base URL with an environment config that works in Expo and bare builds; show only the diff for src/config/ and app.config.ts.
• Update the profile screen to use FlatList for a long list of posts; add pull-to-refresh and keep the list component memoized.
• Add a native permissions check for camera on iOS and Android; do not edit Podfile.lock or build.gradle by hand.
• Refactor navigation types into a single RootStackParamList and fix all useNavigation calls that now fail typecheck.

Where Copilot CLI helps and where to double-check

Copilot CLI handles tasks with clear boundaries well: adding screens, typing navigation, writing tests, moving files, updating app config, and creating pure components. It struggles when a change spans Metro, native build phases, and autolinking. Watch these areas closely:

• Podfile and Podfile.lock: do not accept hand edits; run npx pod-install and let CocoaPods resolve.
• Gradle and Android build files: keep changes minimal and rebuild instead of guessing.
• Platform-specific files: .ios.tsx and .android.tsx can hide a bug on one platform.
• React Navigation: typed params and deep linking require updating several files; check route names and linking config.
• Metro cache: if imports resolve but the app shows stale code, restart with npx expo start -c or --reset-cache.
• New architecture and native modules: generated specs and TurboModule registration must match; run a clean build before accepting.

In a large React Native monorepo, a codebase map for AI agents: find code without grep can help the agent locate screens and native modules faster.

Verification: beyond the diff

After the agent edits, do not trust it blindly. Run the same checks you would for a teammate: typecheck, unit tests, lint, and a production bundle. The fastest signal is often npx tsc --noEmit, because many React Navigation and prop errors appear there. Then run Jest with --runInBand to avoid Metro worker contention.

For bare workflow, replace the bundle check with npx react-native bundle --entry-file index.js --platform ios --dev false --bundle-output /tmp/main.jsbundle. Always run the app on a simulator and emulator after changes to navigation, permissions, native modules, or app icons, because a green test suite does not catch missing native configuration.

Running several agents in parallel with AgentVera

For teams working on React Native, AgentVera is useful when several coding agents need to touch the same repo. It runs GitHub Copilot CLI and other agents in side-by-side terminals, and each agent can work in its own git worktree so native folders and shared files do not collide. Automatic code review catches iOS or Android-specific mistakes after a turn, while checkpoints let you undo a bad Metro or Podfile change in one click and replay the session. Token budgets keep long native refactors from running away.

Final notes for daily use

Keep your React Native repo instructions precise, work in small steps, and verify every agent turn with typecheck, tests, a bundler check, and a platform run. GitHub Copilot CLI becomes reliable in React Native when you treat its native and Metro-sensitive changes as review candidates rather than finished work.