How it Works

Add real native device features to your Lovable-generated app and deploy to App Stores - no native code required.

Overview

Despia bridges the gap between web and native mobile development. Build your React web app using Lovable's AI-powered platform, then deploy it as a truly native application to the App Store and Google Play - complete with hardware acceleration, offline support, and deep OS integration.

Lovable generates the React codebase through natural language prompts, while Despia provides 25+ native device APIs and automated app store deployment. You get the best of both worlds: rapid AI-driven development and full native capabilities.

Installation

Simply ask Lovable to add native features to your app, or install manually:

npm install despia-native

Then import in your Lovable-generated React components:

import despia from 'despia-native';

Important: This SDK is required for TypeScript/React apps. It provides type safety, command queuing, and variable watching that vanilla JavaScript implementations lack.

Key Capabilities

Automated Publishing Pipeline

Despia manages the complete app store deployment process:

  • Automatic build generation for iPhone, iPad, Vision Pro, and Android devices

  • Automated code signing and certificate management

  • Direct submission to App Store and Google Play

  • One-click deployment with built-in CI/CD pipelines

  • Over-the-air updates without app store review

25+ Native Device Features

Access comprehensive native functionality through simple JavaScript commands:

Core Native Features:

// Haptic Feedback - 5 different types
despia('lighthaptic://');     // Light vibration
despia('heavyhaptic://');     // Heavy vibration  
despia('successhaptic://');   // Success feedback
despia('warninghaptic://');   // Warning alert
despia('errorhaptic://');     // Error feedback

// App Information & Device Data
const appInfo = await despia('getappversion://', ['versionNumber', 'bundleNumber']);
const deviceId = await despia('get-uuid://', ['uuid']);
const storeData = await despia('getstorelocation://', ['storeLocation']);

// UI Controls & Status Bar
despia('spinneron://');       // Show loading spinner
despia('spinneroff://');      // Hide loading spinner
despia('hidebars://on');      // Full screen mode
despia('statusbarcolor://{255, 255, 255}');  // Status bar color

Advanced Native Features:

// Background Location Services
despia('backgroundlocationon://');
const watchId = navigator.geolocation.watchPosition(
  (position) => console.log('Location:', position)
);

// Contact Integration
despia('requestcontactpermission://');
const contacts = await despia('readcontacts://', ['contacts']);

// In-App Purchases (RevenueCat)
despia('revenuecat://purchase?external_id=user_777&product=monthly_premium');

// Push Notifications
const playerData = await despia('getonesignalplayerid://', ['onesignalplayerid']);

// Biometric Authentication
despia('bioauth://');  // Face ID, Touch ID, fingerprint

// File & Media Operations
despia('takescreenshot://');
despia('savethisimage://?url=https://example.com/image.jpg');

// Native Widgets & App Clips
despia(`widget://${svg}?refresh=${refreshTime}`);

// Sharing
despia('shareapp://message?=Check out this app&url=https://myapp.com');

Native Safe Area Support

Automatic CSS variables for device-specific layouts:

.my-element {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

Implementation Process

1. Build with Lovable

Use natural language to create your React web app:

  • "Create a task management app with user authentication"

  • "Add a dashboard with charts and data visualization"

  • "Include a settings page with dark mode toggle"

2. Add Native Features via AI

Ask Lovable to integrate Despia native capabilities:

  • "Add haptic feedback when users complete a task"

  • "Enable push notifications for task reminders"

  • "Add biometric authentication for app security"

  • "Include background location tracking for delivery features"

Lovable will automatically generate the proper despia() function calls in your React components.

3. AI-Enhanced Native Integration

Lovable intelligently generates native feature implementations:

// Generated when you ask: "Add haptic feedback to the save button"
const handleSave = async () => {
  try {
    await saveTask();
    despia('successhaptic://'); // Success vibration
    setShowSuccess(true);
  } catch (error) {
    despia('errorhaptic://');   // Error vibration
    setShowError(true);
  }
};

// Generated when you ask: "Add app version display in settings"
const [appInfo, setAppInfo] = useState(null);

useEffect(() => {
  const getAppInfo = async () => {
    if (navigator.userAgent.includes('despia')) {
      const info = await despia('getappversion://', ['versionNumber', 'bundleNumber']);
      setAppInfo(info);
    }
  };
  getAppInfo();
}, []);

4. Environment Detection

Lovable can generate proper environment handling:

// Auto-generated environment detection
if (navigator.userAgent.includes('despia')) {
  // Use native features in mobile app
  despia('lighthaptic://');
} else {
  // Fallback for web browser
  console.log('Running in web browser - native features unavailable');
}

5. Deploy Everywhere

  • Web: Deploy your Lovable app to any hosting platform

  • Mobile: Use Despia's one-click deployment to app stores

  • Updates: Push changes instantly with OTA updates

AI-Powered Mobile Development

Natural Language Native Features: Request any native functionality in plain English and Lovable generates the implementation:

  • "Add camera access for profile photos"

  • "Add home screen widgets showing user stats"

  • "Include in-app purchase for premium features"

Complete Ownership

  • Source Code Export: Get complete Xcode and Android Studio projects

  • No Vendor Lock-in: Full access to generated code with no restrictions

  • GitHub Integration: Lovable syncs your code to GitHub automatically

  • Extensible: Add any npm packages or custom native code

Performance & Reliability

  • 60fps GPU-accelerated rendering on native devices

  • Command queuing ensures sequential execution

  • Variable watching for async native responses

  • Type safety with full TypeScript support

  • Automatic timeout handling and error management

Need Help?

  • Lovable Support: Use the built-in AI assistant for development guidance

  • Despia Support: Contact support@despia.com for native integration questions

  • Documentation: Visit docs.despia.com for detailed native API reference

Ready to transform your web app? Start building with Lovable, add native features with a simple npm install despia-native, and deploy to app stores in a weekend.

Updated on
AppStore iOS