# Claude Code React Native: practical Expo and bare workflow guide

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

Learn how to use Claude Code in a React Native project: CLAUDE.md setup, safe working loop, test and bundle verification, native pitfalls, and parallel agents.

**In short:**

- Set up a concise CLAUDE.md so the agent knows your Expo or bare commands, folder layout, and native-folder rules before editing.
- Work in small steps: plan, edit, run typecheck and Jest, then review the diff before continuing to avoid mobile-specific breakage.
- Watch native file and dependency changes closely; use worktrees and checkpoints when running several agents in parallel.

Claude Code is an agentic coding tool that runs in your terminal with `claude` and works directly inside an existing React Native repository. It reads the project instructions from CLAUDE.md, changes TypeScript and JavaScript files, runs Metro, Jest and typecheck commands, and can help with Expo or bare-workflow apps. This guide covers how to set it up, use a safe working loop, avoid React Native-specific pitfalls, and verify the results.

## Why Claude Code fits React Native development

React Native projects mix JavaScript/TypeScript, Metro bundling, native folders, and often Expo tooling. Claude Code is useful here because it operates in the same shell as your package manager, so it can install dependencies, run `npx expo start`, read Metro errors, and adjust `app.json`, `metro.config.js` or `babel.config.js`. It also understands React Navigation patterns, typed navigators, hooks, and common mobile UI patterns like `FlatList`, `Pressable`, and platform-specific files. Compared with a generic AI chat, an agent in the repo can edit files, run tests, and keep the change set small, which matters when a wrong `Podfile` or `AndroidManifest.xml` edit can break a build. For day-to-day work, the relevant starting point is the [Claude Code](/en/agents/claude-code/) agent itself and its practical [best practices checklist](/en/blog/claude-code-best-practices/).

## Project setup: CLAUDE.md for React Native

Create a CLAUDE.md at the repo root. Keep it short and specific: commands, folder conventions, and rules that prevent the agent from doing damage. A React Native project needs explicit instructions about native folders, Expo vs bare commands, and navigation types. The agent will read this file on every session, so avoid vague rules.

Here is a realistic example:

```markdown
# CLAUDE.md

## Commands
- Install: npm install
- Start Metro: npx expo start
- Run iOS: npx expo run:ios
- Run Android: npx expo run:android
- Typecheck: npx tsc --noEmit
- Lint: npm run lint
- Tests: npm test -- --watchAll=false

## Project layout
- app/: Expo Router screens and layouts
- src/components/: reusable UI components
- src/hooks/: custom hooks
- src/api/: API client, queries and cache
- src/navigation/types.ts: typed navigators for React Navigation

## Rules
- Use TypeScript. Do not add `any` without a comment.
- Do not edit android/ or ios/ generated folders directly unless asked to fix a specific native issue. Prefer Expo config plugins or a prebuild step.
- Keep screens in app/ and reusable components in src/components.
- Data fetching belongs in hooks or api/, not in render bodies.
- When changing navigation, update src/navigation/types.ts and all screens that use it.
- Before finishing, run typecheck and tests; fix all errors introduced by the change.
- Do not add new native dependencies without asking. Prefer Expo-compatible libraries.
```

For a bare React Native project, replace the Expo commands with `npx react-native start`, `npx react-native run-ios`, and `npx react-native run-android`, and note where the main entry file is. This file is your contract with the agent; the clearer it is, the less time you will spend reviewing bad patches.

## A working loop with small steps

Treat Claude Code like a pair programmer that can run commands. The safest loop is: plan first, make one small change, run the relevant checks, review the diff, then continue. Do not ask for a large feature in one prompt. Use plan mode where available, or simply ask the agent to describe its intended changes before editing. The [plan mode pattern](/en/blog/claude-code-plan-mode/) is useful here: ask for the plan, agree on the files, then let it build.

Typical prompts:

- 'Inspect the auth flow. Identify which screens are not in the typed navigator, then fix only the navigation types and the imports that break.'
- 'Add a profile screen to the main tab navigator. Use the existing screen structure and add a Jest test for the screen component.'
- 'This FlatList is blank on the device but the data arrives in the console. Trace the render prop, add a minimal regression test with mocked data, and run the test.'
- 'Refactor the login screen to use a custom hook for form state. Keep the UI behavior identical and run typecheck plus the existing tests.'
- 'Update React Navigation from the current major version to the next one. Before changing code, list breaking changes that affect this repo, then make the smallest possible edits.'

After each turn, run the checks yourself or ask the agent to run them and show the output. Review `git diff` before approving the next step. This keeps native and bundler mistakes from piling up.

## What Claude Code handles well in React Native and where to watch closely

The agent is strong at refactoring navigation, extracting hooks, writing Jest tests, fixing TypeScript errors across screens, updating components to use modern React patterns, and adjusting Metro or Babel configuration when the error message is clear. It can also update Expo config files and add simple platform-specific code.

Watch closely in these areas:

- Native modules: it may edit `android/` or `ios/` files with plausible but incorrect APIs. If you are not prebuilding with Expo, always review native diffs carefully and run the native build.
- Dependencies and version compatibility: it may add a package that is not compatible with your Expo SDK or React Native version. Ask it to run `npx expo-doctor` or check the package peer dependencies before committing.
- Metro and cache issues: a stale Metro cache can make the agent chase false errors. If the agent suggests clearing cache, verify first and run the command yourself if needed.
- Platform-specific behavior: the agent may not respect `Platform.OS`, safe areas, or permissions. Review changes that affect `Platform.select`, `SafeAreaView`, or `AndroidManifest.xml`.
- Test environment: React Native code often needs mocks for native modules. The agent may write tests that pass in isolation but do not match device behavior. Run the test suite and a manual build before merging.

## Testing and verification with the agent

For React Native, verification should include at least typecheck, lint, Jest tests, and a Metro bundle or export. The agent can run these, but you should confirm the output. A useful table:

| Task | Good prompt | Verification |
|------|-------------|--------------|
| Add screen | 'Add a settings screen and register it in the tab navigator.' | `npx tsc --noEmit`, Jest test for screen, manual navigation check |
| Debug FlatList | 'Explain why the list shows no rows and add a regression test.' | Jest test with mocked data, `npm run lint` |
| Update native dependency | 'Check Expo compatibility for this package and update the config.' | `npx expo-doctor`, iOS/Android build, review native diff |
| Refactor hook | 'Extract this state into a hook and keep the tests passing.' | `npm test`, typecheck, compare UI behavior |

Ask the agent to finish each task by running `npx tsc --noEmit`, `npm run lint`, and `npm test -- --watchAll=false`. For an Expo app, `npx expo export --platform ios` or `--platform android` catches bundling errors without a device. For a bare app, you can run a bundle command like `npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output /tmp/main.jsbundle` to verify Metro can build the JavaScript. Review the final diff with `git diff --stat` and read the changed native files. The [how-to guide for Claude Code](/en/blog/how-to-use-claude-code/) covers more of this verification loop if you want a step-by-step reference.

## Running several agents on one React Native project with AgentVera

AgentVera runs real command line tools side by side in one window, and for React Native the most useful parts are parallel worktrees, automatic code review, and checkpoints. Because each agent can work in its own git worktree, one agent can refactor navigation while another adds tests without overwriting files. When an agent’s turn ends, a second model reviews the code and links findings to file:line, which is valuable for catching mobile-specific mistakes before they reach a simulator. Checkpoints let you undo an entire turn in one click and replay a session, so a bad native config or Metro change is easy to roll back. Token budgets also keep long mobile build-fix loops from running away.

## Wrap-up

Claude Code works well in a React Native repo when you give it a clear CLAUDE.md, keep tasks small, and verify through typecheck, tests and a bundle. Watch native file edits and dependency changes especially closely, and use worktree isolation if you run several agents at once. With that loop, the agent becomes a useful collaborator for navigation refactors, test coverage and daily mobile UI work.

## Frequently asked questions

**Can Claude Code edit native iOS and Android files in React Native?** Yes, it can edit files under android/ and ios/, but for Expo projects you should direct it to prefer config plugins or prebuild. Always review native diffs and run a real native build.

**Does Claude Code work with Expo and bare React Native projects?** Yes, it runs in the same terminal and can use npx expo commands or npx react-native commands. Put the correct commands in CLAUDE.md because it does not reliably infer the workflow.

**How do I keep Claude Code from breaking React Navigation types?** Ask it to update the shared typed navigator and then run tsc --noEmit. Reviewing the diff around screen props is usually enough to catch bad params.

**What should I put in CLAUDE.md for a React Native project?** Include build/test/lint commands, folder conventions, rules about not editing generated native folders, navigation type requirements, and guidance on dependencies. A short, explicit file prevents most bad patch loops.

---

**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/