Building Your First Mobile App with AI
Build a cross-platform mobile app using React Native and AI-assisted development, from setup to app store submission.
Why React Native for your first mobile app
React Native lets you build iOS and Android apps using the same JavaScript and React skills you already have from web development. One codebase, two platforms, shared business logic. The alternative — learning Swift for iOS and Kotlin for Android — means building and maintaining two separate apps. For a startup or solo developer, that is twice the work, twice the bugs, and twice the time. React Native is not a web view wrapper. It renders native platform components — a React Native Button becomes a real UIButton on iOS and a MaterialButton on Android. The app feels native because it is native at the UI layer. Ask Claude Code: Set up a new React Native project using Expo. Run: npx create-expo-app my-mobile-app --template blank-typescript. Expo is the recommended starting point — it handles the build toolchain, native module management, and app store deployment so you can focus on your app logic. Navigate into the project: cd my-mobile-app. Start the development server: npx expo start. You will see a QR code in the terminal. Install the Expo Go app on your phone (available on both iOS and Android app stores), scan the QR code, and your app loads on your physical device. Changes you make in code appear on your phone within seconds — this fast feedback loop is one of React Native's biggest advantages. Ask Claude Code: Explain the project structure. What does app.json configure? What is the difference between the app/ directory and the components/ directory? Where do I put my TypeScript types? Understanding the file structure early prevents confusion later. Common error: if the QR code scan does not connect, ensure your phone and computer are on the same Wi-Fi network. If you are on a corporate network that blocks mDNS, use the tunnel option: npx expo start --tunnel.
Navigation and screen structure
Mobile apps have a fundamentally different navigation model than websites. Instead of URLs and page loads, mobile apps use stacks (push and pop screens), tabs (switch between sections), and drawers (slide-out menus). Ask Claude Code: Install the navigation library: npx expo install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context. Set up the navigation structure for a typical app. Create a bottom tab navigator with four tabs: Home, Search, Favourites, and Profile. Each tab has its own stack navigator so users can drill deeper (for example, Home tab shows a list, tapping an item pushes a detail screen). Ask Claude Code: Create the navigation structure with typed routes. Define a RootStackParamList type that lists every screen and its parameters. Home screen has no parameters. Detail screen takes an id parameter. This type safety means TypeScript catches navigation errors at compile time — if you try to navigate to a screen with the wrong parameters, you get a red squiggle instead of a runtime crash. Build the first screens. Ask Claude Code: Create a HomeScreen component that shows a scrollable list of items (use FlatList for performance — it only renders visible items, not the entire list). Each item shows a title, subtitle, and a thumbnail image. Tapping an item navigates to the DetailScreen, passing the item ID. Create the DetailScreen that receives the ID, looks up the full item data, and displays it with a large image, title, description, and action buttons. Style the screens with React Native's StyleSheet. Ask Claude Code: Create a design system at src/theme.ts with colour tokens, spacing scale, typography scale, and shadow definitions that work on both iOS and Android. Apply the theme consistently across all screens. Common error: do not use CSS or Tailwind in React Native (unless you add NativeWind). React Native uses a subset of CSS properties with camelCase naming: backgroundColor instead of background-color, marginTop instead of margin-top. Flexbox works but defaults to column direction instead of row.
Building the core feature with AI assistance
Every app has a core feature that delivers the primary value. For this guide, you will build a notes app with categories, search, and offline support — patterns that apply to any content-management app. Ask Claude Code: Create the data model at src/types.ts. Note (id string, title string, content string as markdown, category as work or personal or ideas or archive, createdAt as ISO date string, updatedAt as ISO date string, isPinned boolean). Category (id string, name string, colour string, icon string as an emoji). Build the notes list with filtering. Ask Claude Code: Create a NotesListScreen that shows all notes grouped by category. Add a filter bar at the top with horizontal scrolling category pills — tapping a category filters the list. Add a search bar that filters notes by title and content as the user types. Pinned notes always appear at the top regardless of sorting. Use FlatList with keyExtractor and proper memoisation (React.memo on the list item component) for smooth scrolling performance. Build the note editor. Ask Claude Code: Create a NoteEditorScreen with a title input at the top (large font, no border — like Apple Notes), a full-screen content area below it, a category selector, and a pin toggle. Auto-save the note 500 milliseconds after the user stops typing (debounced). Show a subtle Saved indicator when the auto-save triggers. Add a floating action button on the notes list for creating new notes. Ask Claude Code: Create a FAB component that hovers in the bottom-right corner with a plus icon. Tapping it creates a new empty note and navigates to the editor. Add a long-press action on the FAB that shows a menu: New Note, New from Template, Import from Clipboard. Add swipe gestures on list items. Ask Claude Code: Implement swipe-to-delete (swipe left) and swipe-to-archive (swipe right) on note list items using react-native-gesture-handler. Show coloured backgrounds behind the swiped item — red for delete with a trash icon, grey for archive with an archive icon. Confirm deletion with an undo toast that appears for 5 seconds before actually deleting. Common error: text input on mobile requires careful handling of the keyboard. When the keyboard appears, it can cover the input. Use KeyboardAvoidingView to push content up when the keyboard is visible.
Data persistence and offline support
Mobile apps must work offline — users open them on aeroplanes, in lifts, and in areas with poor signal. All data should be stored locally on the device. Ask Claude Code: Set up local storage using expo-sqlite for structured data. Install: npx expo install expo-sqlite. Create a database manager at src/lib/database.ts that initialises the SQLite database on first launch, creates the notes and categories tables, and provides typed query functions: getAllNotes, getNoteById, createNote, updateNote, deleteNote, and searchNotes. The database file persists on the device between app launches. Ask Claude Code: Create a data access layer at src/lib/data.ts that wraps the database functions with caching. Load all notes into memory on app start (for fast access), update the in-memory cache when notes are created, updated, or deleted, and write changes to SQLite asynchronously. This gives you the speed of in-memory access with the persistence of SQLite. Add image attachment support. Ask Claude Code: Let users attach photos to notes. Use expo-image-picker to select images from the camera roll or take new photos. Store images in the app's file system using expo-file-system (not in SQLite — binary data in SQLite is slow). Store the file path in the note's data. Display attached images as thumbnails in the note editor and as a small indicator on the list item. Add data export and backup. Ask Claude Code: Create an Export All Notes function that serialises all notes to JSON, includes attached images as base64 (or as references to shared files), and uses the native share sheet (expo-sharing) to let the user save the file to iCloud Drive, Google Drive, email, or any other app. Create a corresponding import function that reads the JSON file and restores notes. Add a settings screen with an auto-backup toggle that exports to the device's file system daily. Common error: SQLite operations must run asynchronously. Do not block the UI thread with database queries — long queries cause the app to freeze. Use async/await for all database calls and show loading indicators for operations that take more than 200 milliseconds.
Platform-specific features and polish
A great mobile app uses platform capabilities that web apps cannot — push notifications, haptic feedback, biometric authentication, and widgets. Ask Claude Code: Add push notification support using expo-notifications. Schedule local notifications (no server needed) for note reminders. When editing a note, let the user set a reminder date and time. At the scheduled time, the device shows a notification with the note title. Tapping the notification opens the app directly to that note. Request notification permission on first use with a pre-permission screen that explains the benefit before showing the system dialog. Add haptic feedback for key interactions. Ask Claude Code: Use expo-haptics to add subtle haptic feedback. Light feedback on button taps, medium feedback on successful actions (note saved, note deleted), and a notification-type haptic on important events (reminder triggered). Haptics make the app feel responsive and native — it is a small detail that users notice subconsciously. Add biometric lock. Ask Claude Code: Use expo-local-authentication to add Face ID or fingerprint protection. Create a setting to enable app lock. When enabled, the app prompts for biometric authentication on launch and after 5 minutes of inactivity. If biometric auth fails or is not available, fall back to a PIN code (4 to 6 digits, stored securely using expo-secure-store). Optimise performance. Ask Claude Code: Profile the app's performance. FlatList should render at 60 frames per second while scrolling — if it drops below that, identify and fix the bottleneck. Common fixes: memoise list item components with React.memo, extract styles outside the component (do not create StyleSheet objects during render), use getItemLayout on FlatList when items have fixed heights (avoids measuring each item), and minimise re-renders by splitting state into smaller contexts. Run the app on a real device and navigate through every screen — emulators hide performance issues that are obvious on physical devices. Common error: platform-specific differences catch you off guard. Test on both iOS and Android throughout development, not just at the end. Shadows work differently (iOS uses shadowColor/shadowOffset, Android uses elevation). Status bar handling differs. Keyboard behaviour differs.
Building for production and app store submission
Getting an app into the App Store and Play Store requires specific assets, configurations, and compliance. Ask Claude Code: Configure app.json for production. Set the app name, slug, version (semantic versioning — start at 1.0.0), iOS bundle identifier (com.yourcompany.appname), Android package name (com.yourcompany.appname), orientation, icon (1024x1024 PNG, no transparency for iOS), splash screen (configure background colour and resize mode), and permissions (declare only the permissions your app actually uses — camera, photo library, notifications). Create app store assets. Ask Claude Code: Generate a list of all required assets for App Store Connect and Google Play Console. iOS needs: 6.7-inch screenshots (1290x2796), 6.5-inch screenshots (1284x2778), 5.5-inch screenshots (1242x2208), iPad screenshots if supporting iPad, and an app preview video (optional but highly recommended). Android needs: screenshots in at least one size (recommended 1080x1920), a feature graphic (1024x500), and a short description (80 characters) plus a full description (4000 characters). Build the production binary. Ask Claude Code: Run: npx expo prebuild to generate the native iOS and Android projects. Then use EAS Build (Expo Application Services) for cloud builds: npx eas build --platform all. This builds the iOS .ipa and Android .aab files in the cloud without needing a Mac for iOS or Android Studio for Android. For iOS, you need an Apple Developer account (99 dollars per year). For Android, you need a Google Play Developer account (25 dollars one-time). Ask Claude Code: Walk me through the steps to set up an Apple Developer account and create the necessary certificates and provisioning profiles for app distribution. EAS handles most of this, but understanding the concepts is important. Submit to the stores using EAS Submit: npx eas submit --platform ios and npx eas submit --platform android. The first submission includes a review process — Apple typically takes 24 to 48 hours, Google Play takes a few hours to a few days. Common rejection reasons: requesting unnecessary permissions, missing privacy policy, and crashes during review. Ask Claude Code: Create a pre-submission checklist for both app stores that covers common rejection reasons and how to avoid them.
Mobile Development
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson