How to Build Mobile Apps with AI

The Modern Vibe Coding Stack

Building mobile apps used to require separate codebases for iOS and Android, expensive development teams, and months of work. Not anymore.

With the right combination of AI tools and modern frameworks, you can ship a production-ready mobile app in weeks — even if you've never written a line of code before.

Here's the stack we recommend:

React Native + Expo: One Codebase for iOS and Android

React Native lets you write mobile apps using JavaScript/TypeScript and React — the same skills used for web development. Expo supercharges this with a managed workflow that handles the complexity.

Why Expo?

• No Xcode or Android Studio required — develop in VS Code or any editor
• Instant preview — see changes on your phone in real-time with Expo Go
• Native features built-in — camera, notifications, file system, biometrics, all work out of the box
• Cloud builds — compile for iOS without owning a Mac

Getting Started

# Create a new Expo project with TypeScript
npx create-expo-app@latest my-app --template blank-typescript

cd my-app

# Start the development server
npx expo start

Scan the QR code with Expo Go on your phone, and you're running your app. Every time you save a file, it updates instantly.

Project Structure

my-app/
├── app/                 # Your screens (file-based routing)
│   ├── (tabs)/          # Tab navigation
│   │   ├── index.tsx    # Home tab
│   │   └── settings.tsx # Settings tab
│   └── _layout.tsx      # Root layout
├── components/          # Reusable UI components
├── hooks/               # Custom React hooks
├── constants/           # Colors, API URLs, etc.
└── assets/              # Images, fonts

Expo Router uses file-based routing like Next.js — just create a file and it becomes a screen.

AI Development Tools: Your Coding Copilots

The magic of vibe coding is using AI to write code while you focus on what the app should do. Here's how to use each tool effectively:

Effective Prompting for Mobile Development

When asking AI to build features, be specific about:

• The platform: "For React Native with Expo..."
• The state management: "Using React hooks and InstantDB..."
• The styling: "With Tailwind/NativeWind" or "Using StyleSheet"
• Error handling: "Include loading states and error boundaries"

# Example prompt for Claude Code
"Create a React Native component for a user profile screen.
It should fetch user data from InstantDB, display their avatar, 
name, and email. Include a loading skeleton and error state.
Use TypeScript and functional components with hooks."

AI Asset Generation: Icons, Splash Screens, and Graphics

You don't need a designer to create professional app assets. OpenAI's image generation and GPT-4 can handle:

• App icons — multiple sizes for iOS and Android
• Splash screens — branded loading screens
• In-app illustrations — onboarding graphics, empty states
• Marketing materials — App Store screenshots, promotional images

Prompt Engineering for App Icons

"Create a minimal app icon for a fitness tracking app. 
Single object centered on a gradient background 
(purple to blue). Modern, friendly style. 
No text. 1024x1024 PNG with rounded corners."

Configuring Assets in Expo

// app.json
{
  "expo": {
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#0a0a0f"
    },
    "ios": {
      "icon": "./assets/icon-ios.png"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#0a0a0f"
      }
    }
  }
}

InstantDB: A Modern Real-Time Backend

InstantDB is a real-time database that feels like magic. Changes sync instantly across all devices, offline support is built-in, and the API is simple enough for AI to understand.

Why InstantDB Over Firebase?

• Simpler mental model — relational data with instant syncing
• Optimistic updates — UI updates immediately, syncs in background
• Better TypeScript support — end-to-end type safety
• AI-friendly API — Claude and Cursor understand it easily

Installation

npm install @instantdb/react-native

Basic Setup

// lib/instant.ts
import { init } from "@instantdb/react-native";

const APP_ID = "your-app-id";

const schema = {
  users: {
    id: "string",
    email: "string",
    name: "string",
    createdAt: "number"
  },
  posts: {
    id: "string",
    userId: "string",
    title: "string",
    content: "string"
  }
};

export const db = init({ appId: APP_ID, schema });

Using in Components

// screens/Feed.tsx
import { db } from "../lib/instant";

export default function Feed() {
  const { data, isLoading, error } = db.useQuery({
    posts: {
      $: { order: { createdAt: "desc" } }
    }
  });

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return (
    <FlatList
      data={data.posts}
      renderItem={({ item }) => <PostCard post={item} />}
    />
  );
}

Writing Data

// Create a new post
await db.transact(
  db.tx.posts[id()].update({
    userId: currentUser.id,
    title: "My First Post",
    content: "Hello, world!",
    createdAt: Date.now()
  })
);

// Update a post
await db.transact(
  db.tx.posts[postId].update({ title: "Updated Title" })
);

// Delete a post
await db.transact(
  db.tx.posts[postId].delete()
);

Node.js: Server-Side Logic When You Need It

While InstantDB handles most data needs, you'll want a Node.js backend for:

• Webhooks — receiving events from payment providers, auth services
• Background jobs — sending emails, processing images
• Third-party integrations — APIs that require server-side secrets
• Complex validation — business logic that shouldn't run on the client

Recommended Setup

# Create a simple Express server
mkdir server && cd server
npm init -y
npm install express cors dotenv

# Or use a serverless platform
npx create-next-app api --typescript

Example: RevenueCat Webhook Handler

// server/webhooks/revenuecat.ts
import express from "express";

const router = express.Router();

router.post("/webhook", async (req, res) => {
  const event = req.body;
  
  switch (event.type) {
    case "INITIAL_PURCHASE":
      await db.transact(
        db.tx.users[event.app_user_id].update({
          isPremium: true,
          subscriptionExpiry: event.expiration_at_ms
        })
      );
      break;
      
    case "CANCELLATION":
      await db.transact(
        db.tx.users[event.app_user_id].update({
          isPremium: false
        })
      );
      break;
  }
  
  res.status(200).send("OK");
});

export default router;

RevenueCat: Cross-Platform Monetization

RevenueCat handles the nightmare of in-app purchases across iOS and Android. One SDK, unified analytics, and it manages receipt validation, subscription status, and more.

What RevenueCat Solves

• Receipt validation — verify purchases server-side
• Subscription management — track active subscribers, trials, cancellations
• Cross-platform sync — purchases work on both platforms
• Analytics — MRR, churn, LTV built-in
• Paywalls — built-in paywall UI components

Installation

npx expo install react-native-purchases

Configuration

// App.tsx
import Purchases from "react-native-purchases";
import { Platform } from "react-native";

const APIKeys = {
  apple: "appl_xxxxxxxxxxxxx",
  google: "goog_xxxxxxxxxxxxx"
};

await Purchases.configure({
  apiKey: Platform.OS === "ios" ? APIKeys.apple : APIKeys.google
});

Checking Subscription Status

// hooks/useSubscription.ts
import { useEffect, useState } from "react";
import Purchases from "react-native-purchases";

export function useSubscription() {
  const [isPremium, setIsPremium] = useState(false);
  
  useEffect(() => {
    async function checkStatus() {
      const customerInfo = await Purchases.getCustomerInfo();
      setIsPremium(
        customerInfo.entitlements.active["premium"] !== undefined
      );
    }
    
    checkStatus();
    
    // Listen for changes
    Purchases.addCustomerInfoUpdateListener(checkStatus);
  }, []);
  
  return { isPremium };
}

Displaying a Paywall

// screens/Paywall.tsx
import { purchasePackage, getOfferings } from "react-native-purchases";

export default function Paywall() {
  const [offerings, setOfferings] = useState(null);
  
  useEffect(() => {
    async function loadOfferings() {
      const offerings = await getOfferings();
      setOfferings(offerings.current);
    }
    loadOfferings();
  }, []);
  
  const handlePurchase = async (pkg) => {
    try {
      const { customerInfo } = await purchasePackage(pkg);
      if (customerInfo.entitlements.active["premium"]) {
        // User is now premium!
        navigation.goBack();
      }
    } catch (e) {
      if (!e.userCancelled) {
        Alert.alert("Error", e.message);
      }
    }
  };
  
  return (
    <View>
      {offerings?.availablePackages.map(pkg => (
        <PricingCard
          key={pkg.identifier}
          title={pkg.product.title}
          price={pkg.product.priceString}
          onPress={() => handlePurchase(pkg)}
        />
      ))}
    </View>
  );
}

Sentry: Crash Reporting and Error Monitoring

When your app crashes on a user's device, Sentry tells you exactly what happened. Stack traces, device info, user actions leading to the crash — everything you need to fix it.

Installation

npx expo install @sentry/react-native

Configuration

// App.tsx
import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "https://xxxxx@sentry.io/xxxxx",
  enableAutoSessionTracking: true,
  sessionTrackingIntervalMillis: 30000,
  // Performance monitoring
  tracesSampleRate: 0.2,
});

Wrap Your App

export default Sentry.wrap(function App() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
});

Manual Error Capture

// Capture exceptions
try {
  await riskyOperation();
} catch (error) {
  Sentry.captureException(error);
}

// Capture messages
Sentry.captureMessage("User completed onboarding");

// Add context
Sentry.setUser({ id: user.id, email: user.email });
Sentry.setTag("premium", isPremium ? "yes" : "no");

PostHog: Product Analytics That Respects Privacy

PostHog tracks how users actually use your app — which features they love, where they drop off, and what makes them convert. Plus, it can be self-hosted for full data ownership.

Installation

npm install posthog-react-native

Configuration

// App.tsx
import { PostHogProvider } from "posthog-react-native";

export default function App() {
  return (
    <PostHogProvider
      apiKey="phc_xxxxxxxxxxxxx"
      options={{
        host: "https://app.posthog.com",
      }}
    >
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </PostHogProvider>
  );
}

Tracking Events

import { usePostHog } from "posthog-react-native";

function CreatePostButton() {
  const posthog = usePostHog();
  
  const handlePress = () => {
    posthog.capture("post_created", {
      hasImage: true,
      wordCount: 150
    });
    
    createPost();
  };
  
  return <Button onPress={handlePress} title="Create Post" />;
}

Key Events to Track

• Onboarding completion — how many users finish setup?
• Feature usage — which features are most popular?
• Paywall views vs purchases — what's your conversion rate?
• Session length — how engaged are users?
• Errors encountered — complement Sentry with user-facing errors

Expo EAS: Build, Submit, and Update

Expo Application Services (EAS) is the final piece — it handles building your app, submitting to stores, and pushing updates. All from the command line.

EAS Build: Compile in the Cloud

Build iOS apps without a Mac. Build Android apps without setting up Gradle. EAS handles it.

# Install the EAS CLI
npm install -g eas-cli

# Login to your Expo account
eas login

# Configure your project
eas build:configure

# Build for both platforms
eas build --platform all

EAS Submit: Publish to Stores

# Submit to App Store
eas submit --platform ios

# Submit to Google Play
eas submit --platform android

EAS Update: Over-the-Air Updates

Fix bugs and ship features without going through app store review. OTA updates change JavaScript and assets instantly.

# Push an update to production
eas update --branch production --message "Fixed login bug"

# Preview updates in development
eas update --branch preview

eas.json Configuration

{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your@email.com",
        "ascAppId": "1234567890",
        "appleTeamId": "XXXXXXXXXX"
      }
    }
  }
}

Putting It All Together

Here's the complete workflow for building a production mobile app with AI:

1. Scaffold with Expo: npx create-expo-app gives you a working app in seconds
2. Build features with AI: Describe what you want to Claude Code or Cursor, review and iterate
3. Generate assets: Use DALL-E for icons, splash screens, and graphics
4. Connect InstantDB: Real-time data with offline support
5. Add monetization: RevenueCat for subscriptions and purchases
6. Set up ops: Sentry for crashes, PostHog for analytics
7. Deploy with EAS: Build in the cloud, submit to stores, push OTA updates

Next Steps

• Create your Expo account at expo.dev
• Set up InstantDB at instantdb.com
• Register for RevenueCat at revenuecat.com
• Create a Sentry project at sentry.io
• Sign up for PostHog at posthog.com