React Native Mobile App Development with Claude Code: Complete Guide

React Native lets you build iOS and Android apps with one codebase. Claude Code makes it 10x faster. This guide teaches you everything you need to ship production-quality mobile apps in 2026.

Why React Native + Claude Code?

Traditional mobile development:

• Learn Swift (iOS) and Kotlin (Android) = 2 languages
• Build separate apps = 2 codebases
• Hire 2 developers or take 2x as long
• Test on 2 platforms
• Ship updates through app stores (2-week review process)

React Native + Expo + Claude Code:

• One language (TypeScript)
• One codebase (share 95%+ code)
• Claude Code writes the boilerplate
• Test on real devices in seconds
• Ship updates instantly (over-the-air)

Real-world proof:

• Discord - 90% code sharing between iOS/Android
• Shopify - rebuilt entire mobile app in React Native
• Microsoft - uses React Native for Office apps
• Coinbase - moved from native to React Native

The DreamBear Mobile Stack (2026)

This is the proven stack for indie mobile apps:

| Layer | Technology | Why |

|-------|-----------|-----|

| Framework | Expo SDK 52+ | Managed workflow, hot reload, OTA updates |

| Language | TypeScript | Type safety, better DX, catches bugs early |

| Navigation | Expo Router 4 | File-based routing (like Next.js) |

| Backend | Firebase | Auth, Firestore, Storage, Cloud Functions |

| State | Zustand + MMKV | Simple state, persistent storage |

| UI | React Native Paper | Material Design components |

| Payments | RevenueCat | Subscriptions, trials, paywall optimization |

| Analytics | Mixpanel | Event tracking, funnels, retention |

| Notifications | Expo Notifications | Push notifications, badges |

| Audio | react-native-track-player | Background audio playback |

| Testing | Maestro | E2E testing for mobile |

| Distribution | EAS Build | Cloud build service (no Mac required) |

ClaudeBoyz has skills for every layer of this stack.

Complete App Tutorial: "StoryTime" Kids App

Let's build a real app from scratch. StoryTime generates AI bedtime stories, plays them with AI voice, and saves favorites.

Features:

• User authentication (email + Google)
• Story generation (Claude API)
• Text-to-speech (ElevenLabs API)
• Audio playback with background support
• Save favorites to Firestore
• Subscription paywall (free trial)
• Push notifications for new stories

Time estimate: 6-8 hours with ClaudeBoyz vs 40-60 hours manually.

Step 1: Initialize Project (10 minutes)

# In Claude Code session
Use mobile-scaffold skill to create new Expo project called "StoryTime"

Claude: Creating Expo project with TypeScript and Expo Router...
✅ Project created
✅ Dependencies installed
✅ Expo Router configured
✅ TypeScript configured

# Start development server
cd StoryTime
npx expo start

Project structure created:

StoryTime/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx        # Home screen
│   │   ├── library.tsx      # Saved stories
│   │   └── _layout.tsx      # Tab navigator
│   ├── story/[id].tsx       # Story detail screen
│   └── _layout.tsx          # Root layout
├── components/
│   └── ui/                  # Shared UI components
├── lib/
│   └── firebase/            # Firebase setup
├── app.json                 # Expo config
└── package.json

Scan QR code with Expo Go app on your phone → app loads instantly.

Step 2: Set Up Firebase Backend (15 minutes)

Use firebase-setup skill

Claude:
1. Installing Firebase SDK...
2. Configuring app.json with Firebase plugins...
3. Creating lib/firebase/client.ts...
4. Setting up development build instructions...

Next steps:
1. Create Firebase project at console.firebase.google.com
2. Add iOS and Android apps
3. Download google-services.json and GoogleService-Info.plist
4. Add Firebase config to .env

Created files:

// lib/firebase/client.ts
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'

const firebaseConfig = {
  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
  // ...
}

export const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)
export const db = getFirestore(app)
export const storage = getStorage(app)

Follow the instructions, add credentials to .env, and Firebase is ready.

Step 3: Add Authentication (20 minutes)

Use auth-firebase skill to implement email and Google authentication

Claude (via claudeboyz-planner - using Opus for security):
⚠️ This is a security-critical task. Routing to Opus model.

Creating authentication flow:
1. Login screen with email/password
2. Google Sign-In button
3. Password reset flow
4. Protected routes
5. Auth state management

Generated screens:

// app/login.tsx
import { useState } from 'react'
import { View, TextInput, Pressable, Text } from 'react-native'
import { signInWithEmailAndPassword } from 'firebase/auth'
import { auth } from '@/lib/firebase/client'
import { router } from 'expo-router'

export default function LoginScreen() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  const handleLogin = async () => {
    setLoading(true)
    try {
      await signInWithEmailAndPassword(auth, email, password)
      router.replace('/(tabs)')
    } catch (error) {
      alert(error.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <View className="flex-1 justify-center px-6">
      <Text className="text-3xl font-bold mb-8">Welcome Back</Text>

      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        autoCapitalize="none"
        className="border border-gray-300 rounded-lg px-4 py-3 mb-4"
      />

      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="Password"
        secureTextEntry
        className="border border-gray-300 rounded-lg px-4 py-3 mb-6"
      />

      <Pressable
        onPress={handleLogin}
        disabled={loading}
        className="bg-blue-600 rounded-lg px-6 py-4"
      >
        <Text className="text-white text-center font-semibold">
          {loading ? 'Logging in...' : 'Log In'}
        </Text>
      </Pressable>
    </View>
  )
}

Auth works on first try. Test by creating account on your phone.

Step 4: Design Firestore Schema (15 minutes)

Use firestore-schema skill to design data model for stories

Claude (via claudeboyz-planner - using Opus):
⚠️ Security-critical schema design. Using Opus model.

Designing multi-tenant schema with RLS...

Generated schema:

Collections:

users/
├── {userId}/
│   ├── email: string
│   ├── displayName: string
│   ├── subscription: 'free' | 'pro'
│   ├── trialEndsAt: timestamp
│   └── createdAt: timestamp

stories/
├── {storyId}/
│   ├── userId: string (indexed)
│   ├── title: string
│   ├── content: string
│   ├── audioUrl: string
│   ├── duration: number
│   ├── favorite: boolean
│   ├── playCount: number
│   ├── createdAt: timestamp
│   └── updatedAt: timestamp

Security rules:

// firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Users can read own profile
    match /users/{userId} {
      allow read: if request.auth.uid == userId;
      allow write: if request.auth.uid == userId;
    }

    // Users can only read/write own stories
    match /stories/{storyId} {
      allow read: if request.auth.uid == resource.data.userId;
      allow create: if request.auth.uid == request.resource.data.userId;
      allow update, delete: if request.auth.uid == resource.data.userId;
    }
  }
}

Deploy rules via Firebase Console.

Step 5: Add AI Story Generation (30 minutes)

Use ai-story-claude skill to integrate Claude API for story generation

Claude (via claudeboyz-builder):
Creating story generation feature:
1. Firestore schema for stories ✅ (already done)
2. Claude API integration for content generation
3. Story generation form
4. Loading states and error handling

Generated code:

// lib/api/generateStory.ts
import Anthropic from '@anthropic-ai/sdk'

const anthropic = new Anthropic({
  apiKey: process.env.EXPO_PUBLIC_ANTHROPIC_API_KEY,
})

export async function generateStory(theme: string, ageGroup: string) {
  const prompt = `Write a bedtime story for ${ageGroup} year olds about ${theme}.

Requirements:
- 300-400 words
- Simple vocabulary
- Positive message
- Include dialogue
- End with a gentle conclusion perfect for bedtime`

  const message = await anthropic.messages.create({
    model: 'claude-sonnet-4-5-20250929',
    max_tokens: 1024,
    messages: [{ role: 'user', content: prompt }],
  })

  return message.content[0].text
}

Story generation screen:

// app/(tabs)/index.tsx
import { useState } from 'react'
import { View, TextInput, Pressable, Text } from 'react-native'
import { generateStory } from '@/lib/api/generateStory'
import { addDoc, collection } from 'firebase/firestore'
import { db, auth } from '@/lib/firebase/client'
import { router } from 'expo-router'

export default function HomeScreen() {
  const [theme, setTheme] = useState('')
  const [loading, setLoading] = useState(false)

  const handleGenerate = async () => {
    setLoading(true)
    try {
      // Generate story content
      const content = await generateStory(theme, '4-6')

      // Save to Firestore
      const storyRef = await addDoc(collection(db, 'stories'), {
        userId: auth.currentUser!.uid,
        title: `${theme} Adventure`,
        content,
        favorite: false,
        playCount: 0,
        createdAt: new Date(),
      })

      // Navigate to story detail
      router.push(`/story/${storyRef.id}`)
    } catch (error) {
      alert('Failed to generate story')
    } finally {
      setLoading(false)
    }
  }

  return (
    <View className="flex-1 justify-center px-6">
      <Text className="text-3xl font-bold mb-4">Create a Story</Text>
      <Text className="text-gray-600 mb-8">
        What adventure should we tell tonight?
      </Text>

      <TextInput
        value={theme}
        onChangeText={setTheme}
        placeholder="e.g., dragons, space, friendship"
        className="border border-gray-300 rounded-lg px-4 py-3 mb-6"
      />

      <Pressable
        onPress={handleGenerate}
        disabled={loading || !theme}
        className={`${loading || !theme ? 'bg-gray-300' : 'bg-blue-600'} rounded-lg px-6 py-4`}
      >
        <Text className="text-white text-center font-semibold text-lg">
          {loading ? 'Creating magic...' : 'Generate Story'}
        </Text>
      </Pressable>
    </View>
  )
}

Test: Enter "dragons" → Story generates in 3 seconds → Saved to Firestore → Screen navigates automatically.

Step 6: Add Text-to-Speech (25 minutes)

Use ai-voice-eleven skill to integrate ElevenLabs for narration

Claude: Integrating ElevenLabs text-to-speech...

Generated API wrapper:

// lib/api/generateAudio.ts
import * as FileSystem from 'expo-file-system'

export async function generateAudio(text: string, voiceId = 'EXAVITQu4vr4xnSDxMaL') {
  const response = await fetch(
    `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
    {
      method: 'POST',
      headers: {
        'Accept': 'audio/mpeg',
        'Content-Type': 'application/json',
        'xi-api-key': process.env.EXPO_PUBLIC_ELEVENLABS_API_KEY!,
      },
      body: JSON.stringify({
        text,
        model_id: 'eleven_turbo_v2',
        voice_settings: {
          stability: 0.7,
          similarity_boost: 0.8,
        },
      }),
    }
  )

  const audioData = await response.blob()

  // Save to device
  const fileUri = `${FileSystem.documentDirectory}${Date.now()}.mp3`
  await FileSystem.writeAsStringAsync(
    fileUri,
    await audioData.text(),
    { encoding: FileSystem.EncodingType.Base64 }
  )

  return fileUri
}

Step 7: Add Audio Playback (20 minutes)

Use audio-playback skill to add background audio support

Claude: Setting up react-native-track-player...

Generated playback component:

// components/AudioPlayer.tsx
import { useEffect } from 'react'
import { View, Pressable, Text } from 'react-native'
import TrackPlayer, { useProgress } from 'react-native-track-player'
import { Play, Pause } from 'lucide-react-native'

export function AudioPlayer({ audioUrl }: { audioUrl: string }) {
  const { position, duration } = useProgress()

  useEffect(() => {
    setupPlayer()
  }, [audioUrl])

  const setupPlayer = async () => {
    await TrackPlayer.setupPlayer()
    await TrackPlayer.add({
      id: '1',
      url: audioUrl,
      title: 'Bedtime Story',
      artist: 'StoryTime',
    })
  }

  const handlePlayPause = async () => {
    const state = await TrackPlayer.getState()
    if (state === 'playing') {
      await TrackPlayer.pause()
    } else {
      await TrackPlayer.play()
    }
  }

  return (
    <View className="bg-white rounded-lg p-6 shadow">
      <Pressable onPress={handlePlayPause} className="items-center mb-4">
        <View className="bg-blue-600 rounded-full p-6">
          <Play size={32} color="white" />
        </View>
      </Pressable>

      <View className="flex-row justify-between text-sm text-gray-600">
        <Text>{formatTime(position)}</Text>
        <Text>{formatTime(duration)}</Text>
      </View>
    </View>
  )
}

Works in background! Lock phone → audio keeps playing.

Step 8: Add Subscription Paywall (30 minutes)

Use revenucat-setup skill to add subscription monetization

Claude: Setting up RevenueCat with Apple and Google subscriptions...

This skill automates:

• RevenueCat account setup
• App Store Connect configuration
• Google Play Console configuration
• SDK integration
• Paywall UI generation

Generated paywall:

// app/paywall.tsx
import { useEffect, useState } from 'react'
import { View, Text, Pressable } from 'react-native'
import Purchases from 'react-native-purchases'

export default function PaywallScreen() {
  const [offering, setOffering] = useState(null)

  useEffect(() => {
    fetchOfferings()
  }, [])

  const fetchOfferings = async () => {
    const offerings = await Purchases.getOfferings()
    setOffering(offerings.current)
  }

  const handlePurchase = async (packageId) => {
    try {
      const { customerInfo } = await Purchases.purchasePackage(packageId)

      if (customerInfo.entitlements.active['pro'].isActive) {
        router.replace('/(tabs)')
      }
    } catch (error) {
      // User cancelled
    }
  }

  return (
    <View className="flex-1 justify-center px-6">
      <Text className="text-3xl font-bold mb-4">Unlock Unlimited Stories</Text>

      <Pressable
        onPress={() => handlePurchase(offering?.monthly)}
        className="bg-blue-600 rounded-lg px-6 py-4 mb-3"
      >
        <Text className="text-white text-center font-semibold">
          $4.99/month
        </Text>
        <Text className="text-white/70 text-center text-sm">
          7-day free trial
        </Text>
      </Pressable>

      <Pressable
        onPress={() => handlePurchase(offering?.annual)}
        className="bg-green-600 rounded-lg px-6 py-4"
      >
        <Text className="text-white text-center font-semibold">
          $29.99/year
        </Text>
        <Text className="text-white/70 text-center text-sm">
          Save 50% • 7-day free trial
        </Text>
      </Pressable>
    </View>
  )
}

Step 9: Deploy to App Stores (40 minutes)

Use appstore-submit skill to prepare for submission

Claude:
Preparing app for App Store and Google Play submission...
1. Generating app icons (1024x1024, adaptive icons)
2. Creating splash screens
3. Optimizing app.json configuration
4. Building with EAS Build
5. Creating screenshots and metadata
6. Generating App Store listing

Build commands:

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

# Builds in cloud (no Mac required!)
# Download IPA and AAB files when complete

Submission checklist generated:

• [ ] App icons (generated ✅)
• [ ] Splash screens (generated ✅)
• [ ] Privacy policy URL (TODO: add your URL)
• [ ] App description (generated ✅)
• [ ] Screenshots (TODO: take screenshots)
• [ ] App Store Connect account (TODO: create if needed)
• [ ] Google Play Console account (TODO: create if needed)

Follow the checklist → Submit to stores → Approved in 2-3 days.

Total Time: 6 Hours

• Project setup: 10 min
• Firebase backend: 15 min
• Authentication: 20 min
• Database schema: 15 min
• AI story generation: 30 min
• Text-to-speech: 25 min
• Audio playback: 20 min
• Subscription paywall: 30 min
• App Store submission prep: 40 min
• Testing and polish: 2 hours
• Actual submission: 1 hour (waiting for review not included)

Manual development estimate: 40-60 hours

Time saved with ClaudeBoyz: 85-90%

Cost Breakdown

One-time costs:

• ClaudeBoyz Mobile package: $199
• Apple Developer account: $99/year
• Google Play Developer account: $25 (one-time)

Ongoing costs (per month):

• Claude API: ~$5-10 (Sonnet, pay-as-you-go)
• ElevenLabs: $5-99 (Creator tier for commercial use)
• Firebase: $0-25 (Spark free tier → Blaze pay-as-you-go)
• RevenueCat: $0 (free under $10K MRR)
• Expo EAS: $0 (free tier, 30 builds/month)

Total first-year cost: ~$500-800

Revenue potential: $4.99/mo × 100 subscribers = $500/month = $6,000/year

Break-even: 2-3 months

Key Takeaways

• **React Native is mature** - Production-ready for any app (except games/AR)
• **Expo makes it easy** - No native code needed for 95% of features
• **Firebase is perfect for indie apps** - Auth, database, storage, cloud functions all integrated
• **Claude Code accelerates everything** - 6 hours instead of 60 hours
• **Mobile dev is accessible** - No need to learn Swift/Kotlin anymore
• **Revenue model is proven** - Subscription apps make consistent income

ClaudeBoyz Mobile Skills

All skills mentioned in this guide:

• `mobile-scaffold` - Initialize Expo project
• `firebase-setup` - Configure Firebase SDK
• `auth-firebase` - Email and OAuth authentication
• `firestore-schema` - Design database schema with security rules
• `ai-story-claude` - Integrate Claude API for content generation
• `ai-voice-eleven` - Add ElevenLabs text-to-speech
• `audio-playback` - Background audio with react-native-track-player
• `revenucat-setup` - Subscription monetization
• `push-notifications` - User engagement notifications
• `analytics-mixpanel` - Event tracking and funnels
• `mobile-testing` - E2E testing with Maestro
• `appstore-submit` - Prepare for App Store submission

Get started: [claudeboyz.com](https://claudeboyz.com) → Mobile package ($199)

What's Next?

Try building the StoryTime app yourself:

• Get ClaudeBoyz Mobile package
• Follow this guide step-by-step
• Customize the theme and features
• Submit to app stores
• Launch and collect revenue

From idea to App Store in one weekend. That's the power of React Native + Claude Code.