Build Your First iOS App with React Native Expo and Claude AI — No Swift Required
react-nativeexpoios-developmentclaude-aitutorialmobile-developmentvs-code

Build Your First iOS App with React Native Expo and Claude AI — No Swift Required

A practical walkthrough for building and running your first iOS app using React Native Expo, VS Code, and Claude AI as your coding copilot.

·45 views

You want to build an iOS app. You've heard about Swift and Xcode, and maybe the whole ecosystem feels intimidating. Here's the good news: you don't need to learn Swift. You don't need to become an Xcode power user. With React Native Expo, VS Code, and Claude AI in your corner, you can go from zero to a working app on your phone in under an hour.

This is the guide I wish I'd had when I started. Let's walk through it together.

What We're Building

By the end of this tutorial, you'll have a real iOS app running on your physical iPhone (or in a simulator). Nothing fancy — a clean, functional starter app that you actually understand and can build on top of. More importantly, you'll have a workflow that lets you use Claude as your development partner for everything that comes next.

The Tech Stack (and Why)

  • React Native Expo — Write your app in JavaScript/TypeScript using React. Expo handles the messy native build stuff so you don't have to.
  • VS Code — Your code editor. Lightweight, extensible, and perfect for this workflow.
  • Claude AI — Your coding copilot. Use it to generate components, debug errors, and reason through architecture decisions.
  • Xcode — You still need it installed, but mostly as background infrastructure. You won't be writing code in it.

Prerequisites

Before we start, here's what you need:

  • A Mac (required for iOS development — no way around this one)
  • An Apple ID (free is fine to start)
  • Node.js installed (version 18 or later)
  • Basic comfort with the terminal
  • Some familiarity with React or JavaScript (even a little helps)

If you don't have Node.js yet, grab it from nodejs.org or install it via Homebrew:

brew install node

Step 1: Install Xcode

I know I said you won't be coding in Xcode, but you still need it installed. Expo requires the iOS simulator and build tools that ship with Xcode.

  1. Open the App Store on your Mac
  2. Search for Xcode and install it (it's big — grab a coffee)
  3. Once installed, open Xcode at least once to accept the license agreement
  4. Install the command line tools:
xcode-select --install
  1. Open Xcode → Settings → Platforms → and make sure iOS is downloaded

That's the last time you need to think about Xcode for a while.

Step 2: Install Expo CLI and Create Your Project

Open your terminal and run:

npx create-expo-app@latest my-first-app
cd my-first-app

Expo will scaffold a complete project for you. When it's done, you'll have a clean project structure that looks something like this:

my-first-app/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx
│   │   ├── explore.tsx
│   │   └── _layout.tsx
│   └── _layout.tsx
├── assets/
├── components/
├── package.json
└── tsconfig.json

Expo now uses file-based routing (similar to Next.js), which makes navigation intuitive.

Step 3: Set Up VS Code

Open the project in VS Code:

code .

Install these extensions to make your life easier:

  • ES7+ React/Redux/React-Native snippets — Quick component scaffolding
  • Prettier — Auto-format your code on save
  • Error Lens — See errors inline without hovering
  • Claude (or your preferred AI extension) — More on this in a moment

Step 4: Run the App

Here's the moment of truth. In your terminal:

npx expo start

You'll see a menu with several options. Press i to open the iOS simulator.

The first build takes a minute. Then your app appears — a working tabbed application running in the iOS simulator. That's it. You have an iOS app running.

Running on Your Physical iPhone

Want to see it on your actual phone?

  1. Install the Expo Go app from the App Store on your iPhone
  2. Make sure your phone and Mac are on the same Wi-Fi network
  3. Scan the QR code shown in your terminal with your iPhone camera
  4. The app opens in Expo Go

Every time you save a file, the app updates in real time. This hot-reloading feedback loop is what makes React Native development feel so fast.

Step 5: Bring Claude Into Your Workflow

Now here's where things get interesting. Claude is remarkably good at React Native and Expo code. Here's how I use it in practice.

Generating Components

Say you want a profile screen. Open Claude and prompt it:

"Create a React Native Expo component for a user profile screen. Use the file-based routing in Expo Router. Include a profile image placeholder, display name, email, and a settings button. Use StyleSheet for styling — no external UI libraries."

Claude will hand you a complete, well-structured component. Paste it into your project, save, and watch it appear on screen instantly.

Debugging Errors

When you hit a red screen of death (and you will), copy the error message and paste it to Claude with context:

"I'm getting this error in my Expo React Native app: [error message]. Here's the component where it's happening: [paste code]. What's wrong?"

Claude is excellent at parsing React Native errors and explaining not just the fix, but why it broke.

Architecture Decisions

Building something more complex? Ask Claude to help you think through it:

"I'm building a task management app in React Native Expo. Should I use React Context or Zustand for state management? The app will have maybe 5-10 screens and needs offline support."

You'll get a reasoned comparison tailored to your specific use case.

Step 6: Make It Yours

Let's replace the boilerplate with something custom. Open app/(tabs)/index.tsx and replace its contents:

import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>My First App 🚀</Text>
      <Text style={styles.subtitle}>
        Built with Expo, VS Code, and Claude
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0a0a0a',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#888888',
  },
});

Save the file. Your app updates instantly. You're now looking at your app.

Step 7: Where To Go From Here

You've got the foundation. Here's a roadmap for what to learn next:

  • Navigation — Expo Router handles this beautifully with file-based routing. Add new files to the app/ directory and they become screens automatically.
  • API Integration — Fetch data from external APIs using fetch or a library like Axios.
  • Local Storage — Use expo-secure-store or @react-native-async-storage/async-storage for persisting data.
  • Push Notifications — Expo has built-in support via expo-notifications.
  • Publishing — When you're ready, Expo's EAS Build service handles compiling your app for the App Store.

For each of these, Claude can walk you through implementation step by step. It's like having a senior developer on call.

Common Gotchas

A few things that trip up beginners:

  • "Unable to boot simulator" — Open Xcode → Settings → Platforms and make sure an iOS runtime is installed.
  • Expo Go version mismatches — Keep the Expo Go app on your phone updated. Run npx expo start --clear if you see version warnings.
  • Hot reload not working — Make sure your phone and Mac are on the same Wi-Fi network. Some corporate/university networks block this.
  • TypeScript confusion — Expo defaults to TypeScript now. If you're more comfortable with JavaScript, you can rename .tsx files to .jsx and remove type annotations.

The Honest Take

React Native Expo isn't perfect. You'll occasionally hit platform-specific bugs that are harder to debug than in a pure web environment. Performance-intensive apps (3D games, complex animations) might push you toward Swift eventually. And the App Store review process is its own adventure.

But for the vast majority of apps — utilities, social platforms, business tools, content apps — this stack is incredibly productive. You get to write once and deploy to both iOS and Android. You get hot reloading. You get the entire npm ecosystem. And with Claude as your copilot, you can move fast even when you're learning.

Ready to Build Something Real?

If you've followed along this far, you have everything you need to start building. The best way to learn is to pick a small, real project — a habit tracker, a recipe organizer, a simple social feed — and build it end to end.

If you're working on something bigger and need help with architecture, performance, or getting your app to the App Store, feel free to reach out. I've helped clients take apps from first commit to production, and I'm always happy to chat about your project.

Now go build something. Your app is waiting.