Build a React Native app with AI: Expo, a coding agent and the stores

To build a React Native app with AI, create an Expo project with npx create-expo-app@latest, connect a coding agent such as Claude Code through Expo's official plugin, then build one screen at a time while testing on your phone. This guide covers setup, prompts, device testing, automated tests and getting builds into the App Store and Google Play with EAS.

How do you build a React Native app with AI?

You build a React Native app with AI by setting up an Expo project, giving a coding agent the right context, and directing it one screen or feature at a time while you test every change on a real device. The agent writes the code; you decide what to build, check it on your phone, and keep working versions in Git.

The steps:

1. Create an Expo project and install a coding agent.
2. Connect the agent to Expo's skills and documentation.
3. Write a short spec and project instructions.
4. Build screen by screen, testing on your phone.
5. Add tests for the logic that matters.
6. Make store builds with EAS and submit for review.

Expo is the right default. The React Native documentation recommends it for new projects, and Expo's own docs now include setup for AI coding agents. Older advice about "ejecting" or "managed vs bare workflow" is outdated: Expo removed expo eject years ago and generates native projects on demand with npx expo prebuild. Agents trained on old material sometimes suggest those patterns, which is one reason the setup below matters.

If you're new to building with AI in general, read how to build an app with AI first for the overall process.

How do you set up Expo for an AI coding agent?

Create the project with create-expo-app, then install Expo's plugin for your agent. New Expo projects already include the files an agent needs, and the plugin adds Expo-specific skills and live documentation.

Create the project

npx create-expo-app@latest my-appcd my-appnpx expo start

According to Expo, create-expo-app writes an AGENTS.md at the project root that points agents to the documentation for your project's Expo SDK version. When Claude Code is installed, it also writes .claude/settings.json to enable the Expo plugin. Both are committed, so everyone on the team starts with the same context.

Install the agent and the Expo plugin

If you haven't installed Claude Code yet, follow the quickstart. Then:

claude plugin install expo@claude-plugins-officialclaude

Inside the session, run /mcp to sign in to your Expo account. For Codex, Expo documents codex plugin add expo@openai-curated followed by codex mcp login expo.

The plugin gives the agent two things:

Cursor and other agents don't have an official plugin; Expo's docs explain how to add the skills and MCP server separately.

How should you plan the app before prompting?

Write a one-page spec and a few project rules before the first feature prompt. Mobile apps have more moving parts than web pages (navigation, permissions, offline states, store rules), and an agent fills unspecified gaps with guesses.

App: Plant care remindersUsers: people with 5 to 30 houseplantsScreens:1. Plant list: photo, name, days until next watering2. Add/edit plant: name, photo (camera or library), watering interval3. Plant detail: history of waterings, "watered today" button4. Settings: reminder time, notifications on/offData: stored on device only for v1 (no accounts, no backend)Notifications: local notification at the chosen time when a plant is dueOut of scope for v1: accounts, sync, plant identification, social featuresDone when: I can add 3 plants on my iPhone and Android phone,get a reminder the next day, and mark them watered.

Then add rules for the agent to AGENTS.md, which Claude Code, Codex and Cursor all read:

## Project rules- TypeScript everywhere. Expo Router for navigation (app/ directory).- Install packages with `npx expo install <pkg>` so versions match the SDK.- Keep screens in app/, shared components in components/, logic in lib/.- Every function in lib/ gets a unit test.- Don't add a backend or accounts unless the task says so.- Run `npx tsc --noEmit` and the tests before saying a task is done.

The npx expo install rule matters: it picks package versions compatible with your Expo SDK, which avoids a common class of build errors. For more on memory files, see CLAUDE.md best practices; the same advice applies to AGENTS.md.

How do you build the app screen by screen with an agent?

Give the agent one screen or one feature per task, with the expected behavior and how you'll check it. Ask for a plan first on anything that touches data, navigation structure or permissions.

A first task:

Read SPEC.md and AGENTS.md. Plan the navigation and data model for v1and show me the file structure. Don't write code yet.

Then features, one at a time:

Build the Plant list screen from SPEC.md.- Read plants from local storage via a function in lib/plants.ts.- Show an empty state with an "Add your first plant" button  when there are no plants.- Sort by days until next watering, soonest first.- Add unit tests for the sorting and "days until" logic.- Don't build the add/edit screen yet; the button can navigate  to a placeholder.When done, tell me exactly what to tap to test it on my phone.

Habits that keep a mobile codebase healthy:

• One feature per task. Commit after each working step so you can roll back.
• Ask what to tap. Having the agent write a manual test path makes reviews faster.
• Name both platforms. "Must work on iOS and Android" prevents iOS-only solutions.
• Handle permissions explicitly. Camera, photo library and notifications need permission prompts and a path for when the user says no.
• Ask for empty, loading and error states on every screen; agents skip them otherwise.

Our guide on how to write tasks for AI coding agents has a full template.

How do you test an AI-built React Native app on your phone?

Run npx expo start and open the app on your phone. Early on, Expo Go is the fastest option; once you add native libraries or native configuration Expo Go doesn't include, switch to a development build.

Expo's development builds guide explains the switch. With expo-dev-client installed, npx expo start targets your development build instead of Expo Go.

Test on at least one iPhone and one Android phone before each milestone. Things that pass on a simulator and fail on a device include notifications, camera access, keyboard behavior, safe areas around notches and performance on older phones.

When something breaks, give the agent evidence instead of a description:

On Android only, tapping "Save" on the Add plant screen does nothing.iOS works. Metro log shows:[paste the exact error and stack trace]Steps: open app, tap +, enter "Fern", pick a photo, tap Save.Find the cause before changing code, and explain it.

How do you add tests to an AI-generated mobile app?

Ask the agent for unit tests on your logic as part of each task, and add a few end-to-end checks for the flows that would hurt most if they broke. Tests are what let you keep accepting agent changes without re-testing everything by hand.

A practical split:

• Unit tests for everything in lib/: date math, sorting, data validation, storage helpers. These are fast and catch most regressions.
• Component tests for screens with logic, such as forms with validation.
• End-to-end tests for two or three core flows, such as "add a plant and see it in the list." Expo's docs cover end-to-end testing with Maestro.

Watch for a common agent failure: tests that only confirm the code does what it does, instead of what the spec says. Ask for tests from the spec ("write tests for the watering rules in SPEC.md, then make them pass") and read a few of them yourself. Our guide to writing unit tests with AI covers how to spot tautological tests.

How do you get an AI-built app into the App Store and Google Play?

Use EAS Build to create store binaries in the cloud and EAS Submit to upload them. You need an Apple Developer Program membership ($99 a year) for the App Store and a Google Play Developer membership (one-time $25) for Google Play, according to Expo's build docs.

npm install --global eas-clieas logineas build:configureeas build --platform alleas submit --platform ioseas submit --platform android

What happens at each stage, per Expo's submit docs:

1. eas build compiles and signs the app in the cloud. For iOS, EAS CLI can create certificates and provisioning profiles when you sign in to your Apple account.
2. eas submit for iOS uploads the .ipa to App Store Connect, where it appears in TestFlight after processing. It isn't released automatically; you complete metadata and screenshots and submit for App Review.
3. eas submit for Android uploads the .aab to Play Console. For a new app, the first release goes to the internal testing track; you finish the store listing and promote it.

EAS Submit uploads binaries only. Store listings, screenshots, privacy details and release notes are still your job, and a coding agent can help draft the text. The Expo MCP Server can read build logs, so when a build fails you can ask the agent to "read the latest failed EAS build log and fix the cause."

After launch, Expo's EAS Update service can send over-the-air updates of your JavaScript and assets to installed apps without a new store build, which is useful for small fixes. Changes to native code or native configuration still need a new build and a new review, so ask the agent to tell you which kind of change it made before you decide how to ship it.

Where a hosted box fits for mobile work

Coding agents work best on mobile projects when they can run long tasks without you watching: building a screen, writing its tests, fixing type errors, then waiting for your review. On a laptop, that stops when the lid closes. Orkio rents an always-on cloud box with a ready Mobile (Expo) kit, where Claude Code keeps working after you close the app and opens pull requests you can review from your phone; it runs on your own Claude account, so there's no markup on model usage.

How to start your React Native app with AI today

1. Run npx create-expo-app@latest and open the app on your phone with npx expo start.
2. Install Claude Code and the Expo plugin, then sign in to Expo with /mcp.
3. Write SPEC.md with screens, data, out of scope and a definition of done.
4. Add project rules to AGENTS.md, including npx expo install and testing commands.
5. Ask for a plan, then build one screen per task, testing each on a real device.
6. Commit after every working step.
7. Switch to a development build when you add native libraries.
8. Create store accounts early, then ship a TestFlight and internal testing build with EAS.

For a deeper introduction to the agent itself, see our Claude Code tutorial.

Frequently asked questions