Mobile

Ship your React app to the iOS App Store and Google Play Store.

Why Capacitor?

Capacitor lets you take your existing React web app and deploy it as a native mobile app. Unlike React Native, you don't need to rewrite your codebase.

What Capacitor Provides

• Native Runtime: Run your React app in a native WebView with full native API access
• Native Plugins: Camera, filesystem, push notifications, biometrics, and more
• Live Reload: Hot reload during mobile development
• Web Compatibility: Same codebase runs on web, iOS, and Android
• Native Project Access: Full access to Xcode and Android Studio projects

When to Use Mobile

Consider deploying to app stores when you need:

• Push notifications
• Offline-first functionality
• Access to device hardware (camera, sensors, contacts)
• App store discoverability
• Home screen presence

Sections

Quick Start

# Install Capacitor
npm install @capacitor/core @capacitor/cli
 
# Initialize Capacitor in your project
npx cap init "My App" com.mycompany.myapp
 
# Add platforms
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
 
# Build and sync
npm run build
npx cap sync
 
# Open native IDEs
npx cap open ios      # Opens Xcode
npx cap open android  # Opens Android Studio

Project Structure

After adding Capacitor, your project will have:

my-react-app/
├── src/                    # Your React code
├── dist/                   # Build output
├── ios/                    # Native iOS project
│   └── App/
│       └── App/
│           └── capacitor.config.json
├── android/                # Native Android project
│   └── app/
│       └── src/
└── capacitor.config.ts     # Capacitor configuration

Requirements