Mobile Module

Build cross-platform mobile apps with React Native and Expo.

Overview

The Mobile module generates native mobile applications using React Native and Expo. Apps run on both iOS and Android from a single codebase. Features include: - React Native Components - Native UI elements (not web views) - Expo Managed Workflow - No Xcode or Android Studio required - EAS Build - Cloud builds for iOS and Android binaries - AppDB Integration - Server-side data persistence

Getting Started

Navigate to Dashboard > Mobile
Click Create App
Select a mobile framework
Describe your mobile app
Review generated screens and components
Export or build with EAS

Frameworks

Framework	Description
Expo Bare	React Native with Expo, no backend
Expo + FastAPI	Mobile frontend + Python backend
Expo + Express	Mobile frontend + Node.js backend

Key Differences from Web

Mobile apps use React Native, NOT HTML/CSS:

Web	React Native
`<div>`	`<View>`
`<p>`, `<span>`	`<Text>`
`<img>`	`<Image>`
`<button onClick>`	`<Pressable onPress>`
`<input>`	`<TextInput>`
CSS classes	`StyleSheet.create()`
`px`, `rem`	Unitless numbers

Project Structure

app/
  index.js          # Home screen
  profile.js        # Profile screen
  settings.js       # Settings screen
  (tabs)/
    home.js         # Tab navigation
components/
  Button.js
  Card.js
constants/
  Colors.js
app.json            # Expo config
eas.json            # Build profiles
package.json

Uses expo-router (file-based routing): - Each file in app/ becomes a route - app/_layout.js defines navigation structure (Stack or Tabs) - router.push('/screen') for navigation - <Link href="/path"> for declarative links

Building for Devices

EAS Build Profiles

Profile	Use Case
Development	Internal testing with dev client
Preview	Beta testing via QR code
Production	App Store / Play Store submission

Testing

Expo Go - Scan QR code to test on physical device
Simulator - iOS Simulator / Android Emulator (local dev)
EAS Preview - Shareable build for testers

AppDB in Mobile

Mobile apps use the same AppDB API as web apps, injected at publish time:

import { AppDB } from './appdb';

const tasks = await AppDB.shared.list('tasks');
await AppDB.shared.set('tasks', id, { title: 'New task', done: false });

File Storage

Exported mobile projects are saved to My Files > Mobile.

Tips

Always wrap screens with SafeAreaView from react-native-safe-area-context
Use @expo/vector-icons for icons (Ionicons, MaterialIcons, FontAwesome)
Test on both iOS and Android — layout differences are common
Use Platform.OS for platform-specific code
Include ALL screens in your description — the AI won't skip any