The Secret to Building App Store-Ready Mobile Apps with Lovable + Despia
How a simple custom knowledge prompt transforms your AI-generated web apps into native mobile experiences that Apple and Google actually approve
If you've been building web apps with Lovable.dev, you already know it's incredible for rapid prototyping. But here's what most people don't realize: you can turn those same apps into real native mobile apps that ship to the App Store and Google Play Store - without writing Swift or Kotlin.
The secret? Despia + a custom knowledge prompt.
The Problem Most Developers Face
You build something beautiful in Lovable. You're excited. Then you try to convert it to mobile and... frustration sets in:
Native features don't work properly
Safe areas and notches look broken
In-app purchases won't integrate
Your app gets rejected by Apple or Google
The issue isn't Lovable or Despia - it's that Lovable doesn't know how to code specifically for Despia's native runtime unless you tell it.
The Solution: Custom Knowledge
Lovable has a powerful feature called Custom Knowledge (found in Settings) where you can teach it domain-specific information. When you add the right prompt about Despia, Lovable suddenly knows exactly how to:
Structure pages for mobile (with proper scrolling and safe areas)
Implement native features using Despia's SDK
Handle iOS and Android design patterns
Integrate RevenueCat for in-app purchases
Access device-specific capabilities
The Magic Prompt
Here's the exact custom knowledge prompt you need to add in Lovable > Settings > Custom Knowledge:
We are using Despia EXCLUSIVELY for Native Functionalities please refer to: https://lovable.despia.com/default-guide/how-it-works
You can access all Despia Features via the websites sitemap: https://lovable.despia.com/sitemap.xml
- Every time you are asked to add a native feature > go to the Despia Sitemap > find the appropriate one > scrape the feature page and then implement it.
PAGE STRUCTURE (IMPORTANT!)
Make sure that ALL pages have a main section (most outer element containing the page) with a fixed height of 100vh - the first component of those core pages would be a relative top bar (iOS Style) and under that we have an app container (the app container is the only thing that would scroll) it will be flex grow / shrink and make sure that the scrollbar is width "none" under that add a relative menubar with the menu options.
SAFE AREAS
Make sure to add Safe Area Insets via the Despia Safe Area Variables (explained below) to the top-bar / top-padding and the menubar / bottom-padding.
Here is how it works with Despia:
Use CSS variables for safe area handling in your application. The Despia native runtime automatically provides var(--safe-area-top) and var(--safe-area-bottom) CSS variables.
Add spacer divs at the top and bottom of your layout
Set the height of spacer divs to var(--safe-area-top) and var(--safe-area-bottom)
Use CSS variables in padding or height styles for fixed positioned elements
Ensure fixed positioned elements respect device boundaries
Handle device notches, status bars, and home indicators automatically
This feature is automatically provided by the Despia Native runtime - no npm package installation required!
Please follow the implementation instructions closely. The CSS variables are injected by the Despia Native runtime environment.
IMPLEMENT REVENUECAT LIKE THIS:
Add native mobile monetization to my app using the Despia SDK from: https://www.npmjs.com/package/despia-native
First, install the package: npm install despia-native
Then import it: import despia from 'despia-native'
Create a payment system that uses RevenueCat Paywalls by calling: despia(revenuecat://launchPaywall?external_id={USER_ID}&offering={OFFERING})
This will launch a native paywall interface configured in your RevenueCat dashboard, handling purchases through Apple App Store and Google Play billing.
Add a button to launch the paywall for your app's offerings, for example:
"default" - your main offering
"premium" - premium tier offering
"annual_sale" - special promotional offering
If you prefer to design 100% custom paywalls that match your app's unique design and branding, consider our RevenueCat Payments SDK instead: https://lovable.despia.com/default-guide/native-features/revenuecat
The Despia Native Runtime will call the global function onRevenueCatPurchase() when an in-app purchase or subscription is successfully made on the client side. Although this should not grant access immediately, it's a good time to start polling your backend to check if the RevenueCat webhook has already updated the user's status or plan permissions.
This feature requires native capabilities which will be fully provided by the "despia-native" npm package, no additional native libraries are needed!
Payment confirmation will happen via RevenueCat's Webhooks, so make sure to include or instruct me to set up the correct backend structure.
You can find the documentation about this here: https://www.revenuecat.com/docs/integrations/webhooks
Read and follow all best practices for Webhook events here: https://www.revenuecat.com/docs/integrations/webhooks/event-types-and-fields
Check out the sample Webhook event schemas here: https://www.revenuecat.com/docs/integrations/webhooks/sample-events
Once the payment is confirmed on the backend, the backend should send a webhook to the frontend to let it know that this user's in-app purchase session was completed.
Please follow the installation instructions for the "despia-native" npm package closely, and do not modify my instructions. Implementation as mentioned is critical.
What This Prompt Does
Once you add this to Lovable's Custom Knowledge, the AI will:
Structure pages correctly - Fixed 100vh containers with proper scrolling
Handle safe areas automatically - No more content hiding under notches or home indicators
Implement native features - By referencing Despia's documentation dynamically
Set up in-app purchases - Full RevenueCat integration with proper webhook handling
Follow mobile-first best practices - iOS and Android design patterns baked in
The Workflow: From Idea to App Store
Here's how the complete process works:
Step 1: Add Custom Knowledge
Go to Lovable > Settings > Custom Knowledge and paste the prompt above.
Step 2: Build Your App in Lovable
Tell Lovable what you want to build. Now it knows how to structure everything for mobile:
"Build me a fitness tracking app with workout logging, progress charts, and a premium subscription"
Lovable will automatically:
Create mobile-optimized layouts with safe areas
Add proper scrolling containers
Structure it ready for Despia conversion
Step 3: Add Native Features
Ask for specific native capabilities:
"Add local push notifications to remind users about workouts" "Add Face ID authentication" "Implement a premium subscription paywall"
Lovable will reference Despia's documentation and implement these correctly using the despia-native SDK.
Step 4: Export to Despia
Once your app is ready in Lovable, connect it to Despia to compile it into native mobile apps.
Step 5: Publish
Submit to the App Store and Google Play. Because everything was built with proper native patterns, your approval chances skyrocket.
Why This Changes Everything
Before this prompt:
Developers waste hours fixing safe area issues
Native features break or don't work
Apps get rejected for poor mobile UX
Converting web to mobile feels painful
After this prompt:
Pages automatically follow mobile-first structure
Native features work flawlessly
Safe areas handled automatically
Apps feel truly native and get approved
Real-World Impact
Imagine building:
A meditation app with local notifications and in-app subscriptions
A meal planning app with camera access and Apple/Google Pay
A productivity tool with biometric authentication
All of this, starting from a chat interface in Lovable, then shipping to millions of users via app stores - in a fraction of the time traditional development would take.
The Bottom Line
The combination of Lovable + Despia + this custom knowledge prompt is genuinely revolutionary. You get:
AI-powered development speed
Real native mobile capabilities
App Store/Play Store approval
No Swift or Kotlin required
Full control over your codebase
The secret isn't just using these tools - it's teaching Lovable how to use them correctly through custom knowledge. Most developers skip this step and wonder why things don't work. Now you know better.
Ready to build? Add the custom knowledge prompt to Lovable today and start shipping real mobile apps. Your next app idea is just a conversation away.
