Build One App for iPhone & Android With Claude Code

What This Guide Uses

For this guide, we will use:

- Claude Code

- React Native

- Expo

- Expo Go

Expo makes it much easier to build one React Native project that runs on both iOS and Android. Expo's own documentation describes this as a universal Android/iOS project, while React Native renders using native platform UI.

Open Expo Documentation

https://docs.expo.dev/

What You Need

Make sure you have:

A Mac, Windows, or Linux computer

Node.js LTS

Claude Code

Expo Go installed on your phone

For the easiest demonstration, install Expo Go on both an iPhone and an Android phone if available.

NOTE

If you only have one physical device, you can use a simulator/emulator for the other platform, although Expo recommends real devices for the simplest development experience.

Install the Official Expo Plugin for Claude Code

Expo now provides an official Claude Code plugin. Run:

claude plugin install expo@claude-plugins-official

The plugin gives Claude Expo-specific skills and connects it with Expo's current development guidance.

Create the Project

Create an empty folder and open it in VS Code. For example: HabitFlow. Open Claude Code inside the project. Then use:

Create the Expo Project

Creates a new Expo React Native app configured for a beginner-friendly app that runs on both iPhone and Android — first checking current Expo documentation for the SDK version compatible with the current Expo Go app rather than guessing or using an outdated one. Requires TypeScript, the standard current Expo project structure, one shared iOS/Android codebase, and Expo Go compatibility. Forbids Firebase, Supabase, authentication, a backend, native modules requiring a custom dev build, unnecessary packages, and App Store/Google Play configuration. Does not start the dev server yet, explains the project structure, and finishes with a READY / NOT READY verdict.

Create a new Expo React Native app in this folder for a beginner-friendly mobile app that will run on both iPhone and Android. Before creating the project, use the current Expo documentation available to you to determine the Expo SDK version that is compatible with the current Expo Go app. Do not guess or use an outdated SDK just because it appears in an old tutorial. Requirements: - use Expo - use React Native - use TypeScript - use the standard current Expo project structure - keep one shared codebase for iOS and Android - configure the project so I can test it with Expo Go - use the official Expo conventions already supported by the project Do not: - add Firebase - add Supabase - add authentication - add a backend - add native modules that require a custom development build - add unnecessary packages - configure App Store or Google Play publishing Do not start the development server yet. When finished, explain the project structure briefly. Finish with: Expo project: READY / NOT READY

NOTE

Expo's current AI tutorial explicitly teaches users to have an AI coding agent create the Expo project and then run it directly on a phone.

Decide What the App Does

For this Guide, build a simple Daily Habit Tracker. The app should let the user:

- Add habits

- See today's habits

- Mark habits complete

- See daily progress

- Delete a habit

- Close and reopen the app without losing the habits

This is enough to prove that we built a real useful mobile app without introducing a backend.

Build HabitFlow

Use:

Build the HabitFlow App

Builds a complete daily habit tracker on the existing Expo + React Native project, shared across iOS and Android: a Today screen with date, habit list, completion states, daily progress and an Add Habit button; adding and deleting habits (with delete confirmation); local on-device persistence of habits and today's completion state with no database or backend. Requires clean modern mobile design (touch targets, safe areas, keyboard behavior, native-feeling interactions) and shared cross-platform code, with platform-specific logic kept small and justified. Forbids login, cloud sync, notifications, subscriptions, payments, social features, analytics, an API, or heavy state-management libraries. Checks TypeScript, runtime issues, and Expo Go compatibility; never publishes. Finishes with a READY / NOT READY verdict and a summary of files/features created.

Build a complete simple mobile app called: HabitFlow This is a daily habit tracker. Use the existing Expo + React Native project. The same application should run from one shared codebase on both iPhone and Android. Core Features Today Show: - today's date - list of habits - completion state for each habit - daily progress such as 2 of 4 completed - Add Habit button The user should be able to tap a habit to mark it: - Complete - Not Complete Add Habit Let the user enter: - habit name Examples: - Drink Water - Read 20 Minutes - Exercise - Practice Spanish Keep the form simple. Delete Habit Let the user delete a habit. Ask for confirmation before deleting. Local Storage Persist: - habits - today's completion state locally on the device. Use the appropriate Expo-compatible local storage solution. Do not add a database or external backend. Design Create a clean modern mobile interface. Requirements: - clear visual hierarchy - comfortable spacing - large touch targets - readable typography - clear completed/uncompleted states - proper safe-area handling - responsive to normal phone sizes - good keyboard behavior - native-feeling interactions Keep the design simple and professional. Cross-Platform Requirements The same source code should work on: - iOS - Android Prefer shared React Native components and logic. Do not create separate iPhone and Android implementations unless a genuine platform-specific adjustment is required. If platform-specific behavior is necessary, keep it small and explain why. Do not: - add login/signup - add cloud sync - add notifications - add subscriptions - add payments - add social features - add analytics - add an API - add a complicated state-management library After implementation: - check TypeScript - check for runtime problems - verify dependencies are compatible with Expo Go Do not publish or build an App Store version. Finish with: HabitFlow implementation: READY / NOT READY Then summarize the main files and features created.

Keep the Data on the Phone

For this simple app, local persistence is enough.

Local storage package

@react-native-async-storage/async-storage

This package provides persistent key-value storage on both Android and iOS and is currently included in Expo Go.

Add habit → close app → reopen → habit is still there — without creating a backend.

Start Expo

Open the VS Code terminal inside the project and run:

npx expo start

Expo displays a QR code.

Expo's official workflow uses this exact development loop.

Run It on iPhone

On iPhone:

Install Expo Go from the App Store. Make sure the phone and computer are on the same Wi-Fi network. Open the normal iPhone Camera. Scan the QR code. Open the project in Expo Go.

The HabitFlow app should appear on the iPhone.

Expo officially supports opening the development project this way on iOS.

Test the iPhone Version

Try:

Add Drink Water Add Read 20 Minutes Mark one habit complete. Confirm progress updates. Close and reopen the app. Confirm the habits remain.

Run the Same Project on Android

Do not create another Android project. Keep the same development server and the same source code. On the Android phone:

Install Expo Go from Google Play. Open Expo Go. Choose Scan QR Code. Scan the same project's QR code.

The same HabitFlow app should open on Android. Now perform the same test:

Add a habit Complete it Delete it Reopen the app Verify local persistence

The Important Result

You now have: One project → iPhone and Android.

You did not build one Swift app and another Kotlin app.

React Native lets the shared JavaScript/TypeScript application render through native platform UI on Android and iOS.

If the Phone Cannot Connect

First make sure the computer and phone are on the same Wi-Fi. If that still fails, Expo's official fallback is:

npx expo start --tunnel

This allows the phone to connect through a tunnel instead of relying only on the local network.

Why This Matters

The same codebase does not mean every pixel will always behave identically. iOS and Android differ in things such as:

- Safe areas

- Keyboards

- Status bars

- Fonts

- System dialogs

- Touch behavior

So perform one final cross-platform check.

Run the Cross-Platform Review

Use:

Review Cross-Platform Quality

Reviews HabitFlow specifically for cross-platform quality without adding new features — layout (safe areas, spacing, text wrapping, buttons, list/form layout, keyboard interaction), iOS-specific behavior (status area, inputs, confirmation dialogs, scrolling), Android-specific behavior (system UI, keyboard, tap targets, dialogs, scrolling), and functionality (add/complete/delete, progress, local persistence). Prefers shared code, keeps platform-specific logic minimal, never creates separate apps or duplicated screens, fixes only genuine issues, and runs the relevant Expo/TypeScript checks. Finishes with a READY / NOT READY verdict.

Review the HabitFlow app specifically for cross-platform quality. The goal is to preserve one shared React Native codebase while making the app work correctly on both iOS and Android. Do not add new features. Check: Layout - safe areas - top and bottom spacing - text wrapping - buttons - list spacing - form layout - keyboard interaction iOS - no content overlaps the status area - inputs work correctly - confirmation dialogs work - scrolling feels correct Android - no content overlaps system UI - keyboard behavior works - buttons remain easy to tap - confirmation dialogs work - scrolling works correctly Functionality - adding a habit works - completing/uncompleting works - progress updates correctly - deleting works - local persistence works - reopening the app restores the correct data Prefer shared code. Add platform-specific logic only where genuinely necessary. Do not: - create separate apps - duplicate entire screens for iOS and Android - add a backend - add authentication - add new functionality Fix only genuine issues. Afterward, run the relevant Expo/TypeScript checks. Finish with: Cross-platform status: READY / NOT READY If NOT READY, list only what remains broken.

Final Visual Polish

Once both platforms work:

Polish the HabitFlow Interface

Polishes typography, spacing, habit-row readability, completion states, the Add Habit form, progress presentation, the empty state, and touch targets without expanding the app — no charts, gamification, login, notifications, backend features, additional screens, or complicated animations, and identical core functionality preserved on both platforms. Finishes with a READY / NOT READY verdict.

Polish the existing HabitFlow interface without expanding the app. Improve only: - typography - spacing - habit-row readability - completion states - Add Habit form - progress presentation - empty state - mobile touch targets Keep the visual design clean and native-feeling. Do not add: - charts - gamification - login - notifications - backend features - additional screens - complicated animations Preserve identical core functionality on iOS and Android. Finish with: UI status: READY / NOT READY

Test Both Platforms

Before finishing the Guide, run this same workflow on both platforms.

iPhone

Run this sequence:

Open app Create two habits Complete one Confirm progress Delete one Restart app Verify persistence

Android

Repeat exactly the same actions.

Make One Small Change

Then make one small change with Claude Code:

Change the Empty-State Text

Changes the empty-state text to "Add your first habit to get started." and makes only this one change.

Change the empty-state text to: Add your first habit to get started. Make only this change.

Watch the update appear during development.

Expo's official AI tutorial describes this exact loop as: prompt → agent builds → phone shows the result.

Run the Final Audit

Use:

Final HabitFlow Audit

Runs a final audit of HabitFlow verifying it is built from one Expo/React Native project with code shared between iOS and Android, launches successfully on both platforms, and that adding, completing, deleting, and local persistence all work — no important TypeScript errors, no unsupported Expo Go dependency, no database/backend, and no unnecessary separate native project. Adds no new features and configures no store publishing. Finishes with a READY / NOT READY verdict.

Run one final audit of HabitFlow. Verify: - the app is built from one Expo/React Native project - the core code is shared between iOS and Android - the app launches successfully on iPhone - the app launches successfully on Android - Add Habit works - completion tracking works - progress calculation works - deleting works - data persists locally - there are no important TypeScript errors - no unsupported Expo Go dependency was introduced - no database or backend was introduced - no separate native iOS or Android project was unnecessarily created Do not add new features. Do not configure App Store or Google Play publishing. Finish with: Mobile app status: READY / NOT READY If NOT READY, list only the remaining important problems.

Expo Go Is for Development

For this Guide, Expo Go is intentionally used to make testing extremely easy. Expo describes Expo Go as a fast environment for learning and experimenting. Production projects that need custom native modules or standalone distribution normally move later to a development build and eventually a production build.

So completing this Guide does not mean the app has been published to:

- Apple App Store

- Google Play

RESULT

You built one real React Native mobile project with Claude Code and successfully ran the same app on both iPhone and Android.

Publishing is a separate, more advanced process.

Summary

Claude Code → Expo + React Native → Build HabitFlow → npx expo start → iPhone → Android → same codebase