# GitHub Copilot CLI with React Native: A Practical Guide

URL: https://agentvera.dev/en/blog/copilot-cli-for-react-native/ · Published: 2026-11-01

Learn how to configure GitHub Copilot CLI for React Native, write clear repo instructions, run safe tasks, and verify iOS and Android changes before merge.

**In short:**

- Set clear React Native rules in AGENTS.md so Copilot CLI follows your Expo or bare workflow.
- Use small steps, run TypeScript and Jest after each turn, and review the native diff before accepting changes.
- Watch Podfile, Gradle, Metro cache, and platform-specific files; these are where Copilot CLI can break a React Native project.

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](/en/agents/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.

```markdown
# 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](/en/blog/how-to-use-copilot-cli/).

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](/en/blog/codebase-map-for-ai-agents/) 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.

| Check | Command | What it catches |
| --- | --- | --- |
| TypeScript | `npx tsc --noEmit` | Invalid navigation params, missing props, wrong imports |
| Unit tests | `npx jest --runInBand` | Component behavior and hook regressions |
| Lint | `npm run lint` | Unused styles, platform errors, accessibility issues |
| Bundle check | `npx expo export --platform ios,android` | Import cycles, missing assets, Metro resolution failures |

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.

## Frequently asked questions

**Can GitHub Copilot CLI edit iOS and Android native files in a React Native project?** Yes, it can open and edit files under ios/ and android/, but it should not hand-edit lockfiles like Podfile.lock. Always review native diffs and rebuild the app instead of trusting generated changes blindly.

**Does GitHub Copilot CLI work with Expo and bare React Native workflows?** Yes, it works in both when the project scripts are documented. For Expo, it can use npx expo commands; for bare, it can use react-native run-ios and run-android after native changes.

**What should I put in AGENTS.md for a React Native project?** Include the exact install, lint, typecheck, test, and start commands, plus folder conventions and RN-specific rules. Tell the agent not to edit lockfiles, to respect platform extensions, and to restart Metro when cache issues appear.

**How do I verify changes made by GitHub Copilot CLI in React Native?** Run npx tsc --noEmit, npx jest --runInBand, and npm run lint first. Then do a production bundle check and a manual run on an iOS simulator and Android emulator for any navigation, native module, or permission changes.

---

**About AgentVera.** AgentVera is a desktop app for macOS, Windows and Linux, built by Solviera Teknoloji. It runs 18 AI coding agents (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) side by side, per project, in real terminals with the user's own CLI installs and logins. The free plan has unlimited agents. Download: https://agentvera.dev/en/download/ · Pricing: https://agentvera.dev/en/pricing/