# RapidNative > Source: https://rapidnative.com > Full docs: https://rapidnative.com/docs/introduction/welcome RapidNative is an AI-powered tool that transforms natural language prompts into production-ready React Native mobile apps. Build native apps in a blink with our chat-based interface designed for product teams. ## Important Links - Homepage: https://rapidnative.com - Documentation: https://rapidnative.com/docs/introduction/welcome - Getting Started: https://rapidnative.com/docs/introduction/getting-started - Pricing: https://rapidnative.com/pricing - Features: https://rapidnative.com/docs/features - Blog: https://rapidnative.com/blogs - Contact: https://rapidnative.com/contact - Showcase: https://rapidnative.com/showcase - For Founders: https://rapidnative.com/founders - For Developers: https://rapidnative.com/developers - For Designers: https://rapidnative.com/designers - For Product Managers: https://rapidnative.com/agencies - For Enterprises: https://rapidnative.com/enterprises ## Full Documentation The following is the complete documentation for RapidNative. --- Source: https://rapidnative.com/docs/introduction/welcome # Welcome to RapidNative RapidNative is the AI-native full-stack mobile app builder. You describe an app, and you get a working app. Not a mockup. Not a frontend with placeholder data. A real React Native app with a real database, authentication, file storage, and real-time updates. All generated together and running in your browser in minutes. Fullstack from the first run Real database, auth, file storage, and realtime updates generated alongside your UI. Not a mock backend. Browser-native runtime A real React Native runtime in the browser, powered by ReactNative.run and browser-metro. Mock data while you design Every screen comes pre-populated with realistic content. You're never staring at empty states. ## What you can do here Turn a prompt, a sketch, a screenshot, or a PRD into a full-stack React Native app. Preview it live in the browser. Add it to your phone's homescreen as a PWA. Invite collaborators. Export clean Expo code whenever you want. ## What makes RapidNative different Every other AI app builder stops at the UI. We build the whole thing. Frontend and backend, generated as one coherent app. - A real database powered by Vibecode DB, our open-source type-safe database layer. - Auth, file storage, and real-time updates built in from the first generation. - A real React Native runtime in the browser powered by ReactNative.run and browser-metro. - Full mock data while you design, so you're never staring at empty screens. - Build on the go from any device. Play in the browser. Add to homescreen. Run on your phone. ## Where to go next - New here? Start with What is RapidNative? - Ready to build? Jump to Getting Started - Curious about the open-source stack? Read Open Source - Want to see plans? Check rapidnative.com/pricing --- --- Source: https://rapidnative.com/docs/introduction/what-is-rapidnative # What is RapidNative? RapidNative is an AI-native full-stack builder for mobile apps. You describe what you want, and it generates a real React Native app, backend included, running live in your browser. Most AI app builders give you screens. We give you a working product. That's the whole difference. ## Fullstack, for real When your app is generated in RapidNative, you get all of this wired up and working from the first run: - **A real database.** Tables, relationships, and data models. Not placeholders. - **Authentication.** Sign up, log in, and password reset. - **File storage.** Uploads, profile photos, documents. No S3 wrangling. - **Realtime updates.** Data changes show up instantly across sessions. - **Mock data populated from day one.** So you're designing with context. Frontend and backend are generated together as one coherent app. One prompt, one working product. ## Built on open-source infrastructure we wrote ourselves We didn't want to duct-tape RapidNative on top of someone else's broken stack. So we built the foundations first and open-sourced them. - ReactNative.run is our browser-based React Native runtime, powered by browser-metro. It bundles everything client-side in a Web Worker. No remote build servers. Any npm package. Full Expo Router support. MIT licensed. - Vibecode DB is a type-safe database abstraction layer. Define your schema once, swap between SQLite, Supabase, Firebase, or REST without rewriting a line. This is why RapidNative can do full-stack and why preview and hot reload feel instant. ## The stack React Native, Expo, Expo Router, NativeWind, browser-metro, Vibecode DB. Standard stack. No proprietary runtime. You can export the code at any time and keep building in VS Code. ## Who it's for Founders, PMs, agencies, designers, and anyone who has an idea and wants to stop waiting for infrastructure to get out of the way. --- --- Source: https://rapidnative.com/docs/introduction/getting-started # Getting Started Your first full-stack app in under ten minutes. ## 1. Sign in Head to rapidnative.com and sign in with email. No credit card. You land on your dashboard. ## 2. Start a new project Click **New Project**. Name it. You're now in the builder. ## 3. Describe your app You have four ways to tell RapidNative what you want: Prompt Type it in plain English. For example, 'A recipe app where users can save favorites and share collections.' Image Upload a screenshot, a Figma export, or a photo of a whiteboard sketch. Sketch Draw it inline with our whiteboarding tool. PRD Paste an existing product doc and generate from it. Hit generate. RapidNative builds a full-stack app. Frontend, database schema, auth flows, file storage, and real-time wiring. All together. ## 4. Explore it live Your app runs live in the browser powered by ReactNative.run. Every screen is populated with realistic mock data so you can actually see what it'll look like in production. Click through flows. Sign up as a test user. Upload a file. It all works. ## 5. Iterate - **Inline edits** for quick tweaks to specific elements. - **Prompt-based changes** for bigger shifts ("add a messaging screen", "switch the color scheme to dark mode"). - **Rollback** to jump back to any earlier version. - **Fix with AI** if anything breaks. ## 6. Take it to your phone Hit **Add to Homescreen** and install your app as a PWA on any device. Or scan the QR to open it in Expo Go and test on a real phone. ## 7. Invite collaborators Share a link. Your co-founder, client, or designer joins the same project and sees everything live. ## 8. Export when you're ready Download the code anytime. Open it in VS Code, extend it, push it to your own repo. Standard Expo project. No lock-in. Note: code export for apps you build on RapidNative is included with any paid plan (Starter at $20/month and above). If you imported a project from an external tool (Lovable, Bolt, .zip upload, etc.) via the Deploy service, the source code export is a separate one-time fee on the Deploy Export tier. See rapidnative.com/deploy/pricing for current prices. That's it. You have a working app. --- --- Source: https://rapidnative.com/docs/introduction/benefits # Key Benefits RapidNative gets you from idea to a real, full-stack React Native app in minutes. Here's what makes it different. Real fullstack - Real database, auth, file storage, and realtime updates in every generated app - Powered by Vibecode DB, our open-source type-safe database layer - Frontend and backend generated together as one coherent app Browser-native - Runs entirely in the browser. No downloads, no Xcode, no setup - Build from a laptop, tablet, or phone - Real React Native runtime via ReactNative.run, not a simulation Mock data ready - Screens come populated with realistic content from the start - Design with context, not blank states - Sign up as a test user, upload files, browse lists. It all works Add to homescreen - Built-in PWA support. Install on any device - No App Store review cycle - From idea to someone's phone in an afternoon Open source - ReactNative.run runtime is open source and MIT licensed - Vibecode DB is open source and adapter-based - No vendor lock-in. Inspect it, contribute, take it with you Real collaboration - Invite co-founders, clients, or early users into a live project - Everyone sees the same app and the same changes - No more screenshots over WhatsApp Exportable code - Clean Expo project using Expo Router, NativeWind, and Vibecode DB - Open in VS Code, push to GitHub, ship to the App Store - It's your code, no rewrites needed --- --- Source: https://rapidnative.com/pricing # Plans & Pricing RapidNative's plans scale from "just exploring" to "running an agency." Every plan includes full-stack generation, real databases via Vibecode DB, and the full in-browser runtime. For live prices and to pick a plan, head to rapidnative.com/pricing. ## Free. $0 per month. For exploring the product and building hobby apps. - 20 requests per month (max 5 per day) - Up to 5 screens per project - Full-stack AI app generation - Live in-browser preview powered by ReactNative.run - Real database, auth, and file storage in fullstack apps - Public projects - Community support ## Starter. $20 per month. For solo founders and early MVPs. - 50 requests per month - Everything in Free - Unlimited screens per project - Private projects - Download the full Expo source code - Access to code editor in browser - Team collaboration - Priority support ## Pro – $49 / month _(Most Popular)_ For PMs, freelancers, small agencies, and teams shipping multiple apps. - 150 requests per month - Everything in Starter - Priority support - Real-time collaboration on projects ## Enterprise. Custom. For large teams and organizations. - Custom credit tiers - SSO and enterprise security - Team collaboration and version control - Dedicated support - Custom integrations See full pricing and sign up at rapidnative.com/pricing. ## What every plan includes - AI-native full-stack generation (prompt, sketch, image, or PRD to working app in minutes) - Mobile-first stack: React Native, Expo, Expo Router, NativeWind, Vibecode DB - Browser-native runtime via ReactNative.run - PWA "Add to Homescreen" support - No vendor lock-in. Full Expo source code export on all paid plans for apps built on RapidNative. Projects imported from external tools via the Deploy service have separate export pricing (see rapidnative.com/deploy/pricing). ## Pricing your own work Building for a client or pricing your own SaaS? These free tools help you frame the cost conversation: --- --- Source: https://rapidnative.com/docs/introduction/who # Who is RapidNative for? RapidNative is for people who have ideas and want to see them running as real apps today, not next quarter. ## Founders You have an MVP in your head. You don't want to spend three months and thirty thousand dollars finding out if it resonates. Build a full-stack version in an afternoon, put it on your own phone, share it with ten users, and learn. RapidNative's real database and auth mean your MVP can actually collect users and data from day one. ## Product managers Stop briefing prototypes and waiting a week. Generate a working flow in the morning, run user sessions on it in the afternoon. Ship learnings, not slides. Invite your team in to poke at the same live app. ## Agencies and freelancers Start every client project with a full-stack scaffold instead of a blank Figma file. Show working apps in the first meeting. Deliver faster, iterate faster, bill faster. Real-time collaboration means your client can live in the same project with you. ## Designers You shouldn't have to wait for engineering to see your designs as a real app. Sketch it, upload it, or describe it. Get a running React Native app with real interactions and mock data. Iterate independently. ## Builders, students, and tinkerers If you've ever had an idea and wished you could just try it, this is for you. No install. No setup. Open a browser, describe your app, and see what happens. --- --- Source: https://rapidnative.com/docs/introduction/open-source # Open Source RapidNative is built on open-source infrastructure that we wrote ourselves. We couldn't build the product we wanted on top of someone else's stack, so we built the foundations and released them to the community. ## ReactNative.run ReactNative.run is an open-source, browser-based React Native runtime. It's the engine behind RapidNative's live preview. - **browser-metro.** An open-source bundler that runs entirely in a Web Worker in your browser. No remote build server. Everything bundles client-side on your machine. - **Any npm package.** Not a curated whitelist. Install anything. - **Full Expo Router support.** File-based routing and in-browser API routes. - **Hot module replacement.** Real instant feedback while you iterate. - **MIT licensed.** Read the code, use it, contribute. When you hit Play in RapidNative, you're not looking at a simulation. You're running a real React Native app in a real runtime. Resources: reactnative.run, docs, browser-metro on npm. ## Vibecode DB Vibecode DB is our open-source, type-safe database SDK with a 1:1 Supabase-compatible API on the frontend that delegates to swappable backend adapters. It's what makes fullstack generation actually work. Define your schema once. Query any backend. In-memory for prototyping, Supabase for production. Same code, same types, no rewrites when you switch. It ships with two adapters: - **MockAdapter** for in-memory prototyping and testing. - **SupabaseAdapter** for production, a direct passthrough to `@supabase/supabase-js`. This is why your RapidNative app gets a real database the moment it generates, and why there's no vendor lock-in. You own the schema, and you can move it anywhere. ## Why we open-sourced all of it Most AI app builders are stitched together from third-party services and proprietary runtimes. That's why they're slow, why they can't do full-stack, and why their exports never quite work. We decided the infrastructure had to be public, inspectable, and yours to keep. The product is better because of it, and so is the ecosystem. --- --- Source: https://rapidnative.com/docs/features # Features Features are organized into Core, Fullstack, Build & Preview, and Collaboration. Core The everyday building blocks: prompt to app, edits, rollback, mock data. Fullstack Real database, auth, storage, and realtime updates in every project. Build & Preview Live in-browser runtime, PWA install, and real-device testing. Collaboration Real-time multiplayer, shared previews, and project remixing. ## Core - **Prompt to App.** Describe your app in plain English and get a fullstack running project. - **Image to App.** Upload a screenshot, Figma export, or photo of a sketch. - **Sketch to App.** Draw directly on the whiteboard. - **PRD to App.** Paste your product doc and generate from it. - **Full Mock Data.** Every generated screen comes populated with realistic content. - **Canvas View.** Map and navigate your entire app flow visually. - **Inline Edits.** Click any element and tweak it directly. - **Quick Edit.** Fast text and style changes without re-prompting. - **Rollback.** Restore any earlier version of your project. - **Fix with AI.** Auto-detect and fix errors. - **Asset Upload.** Drop in logos, images, and media. ## Fullstack - **Real Database.** Tables, relationships, and data models powered by Vibecode DB. - **Authentication.** Email sign-up, sign-in, and password reset generated with your app. - **File Storage.** Upload and serve files without configuring buckets. - **Realtime Updates.** Data changes propagate live across sessions. - **Schema Inspector.** See and edit your app's data model. - **Multi-backend Support.** Swap between in-memory mock and Supabase without rewriting code. ## Build & Preview - **Live In-Browser Runtime.** Your app runs for real in the browser via ReactNative.run. Not a simulation. - **Any npm Package.** No whitelist. - **Expo Router Support.** File-based routing, including API routes. - **Add to Homescreen (PWA).** Install your app on any device without an App Store. - **Run on Phone.** Open in Expo Go via QR for real-device testing. - **Build from Anywhere.** Works on laptop, tablet, or phone. No install required. - **Download Code.** Export the clean Expo project for VS Code or GitHub. ## Collaboration - **Real-time Collaboration.** Invite teammates, clients, or early users into a live project. - **Project Remixing & Showcase.** Fork public projects and explore community examples. - **Share Previews.** Send a link so anyone can test your app in their browser. ## Coming soon - **Integrations.** RevenueCat (payments and subscriptions), Google Maps, AI SDK. - **Admin Dashboard.** Manage users, content, and data for your app. - **Analytics.** Built-in usage and engagement tracking. - **One-click Deploy.** Ship to production and the app stores from inside RapidNative. --- --- Source: https://rapidnative.com/docs/features/core-feature/prompt-to-design # Prompt to Design The Prompt to Design feature lets you describe your idea in plain language, and RapidNative instantly generates mobile app screens on the canvas. It's the fastest way to go from concept → working UI without starting from scratch. ## Example prompts "A mobile app with a login page, a dashboard showing user stats, and a settings page." Outputs: - A login screen with email & password fields - A dashboard screen with placeholder stats cards - A settings screen with toggles for notifications and account info - All screens linked together on the canvas for flow navigation "A to-do list app with a home screen, add-task screen, and completed tasks view." Outputs: - Home screen with task list - Add task screen with input field + save button - Completed tasks screen showing archived items - Connected via navigation flow so you can preview instantly ## Why it matters - [x] **Faster validation** - Get real UI in minutes - [x] **No wasted cycles** - Skip boilerplate and static mockups - [x] **Stay in control** - Polish one screen first, then continue with pending tasks - [x] **Ship real code** - Export React Native components ready for VS Code or GitHub ## How to use Prompt to Design Start a new project Click New Canvas. Enter a prompt Describe your app in plain language. Pending tasks Other requested screens are queued here. Continue when ready Once happy with one screen, generate the rest --- --- Source: https://rapidnative.com/docs/features/core-feature/canvas # Canvas View The Canvas is where your app takes shape in RapidNative. Instead of working with isolated screens, you can see and arrange the entire journey of your app — from login screens to dashboards to settings. Zoom controls let you focus on the details of one screen or step back to view the bigger picture of your flow. ## Why the canvas matters - Visualize complete user journeys, not just screens - Easily spot gaps, missing links, or flow bottlenecks - Make edits directly on the canvas without losing context - Switch between detail view and overview mode with zoom ## How to use the canvas Start a new project Click New Canvas from the dashboard. Generate screens Use a prompt, upload an image, or sketch with Excalidraw. View your flow Screens appear on the canvas, connected as a journey. Zoom in Focus on one screen to refine layout, text, or styles. Zoom out See how all screens connect across the app. ## Screen toolbar Each screen on the canvas has a small toolbar above it for per-screen actions: - **Reload.** Refresh the live preview of that screen — useful when you want to re-run effects or recover a stuck render without regenerating the screen. - **View code.** Open the screen's React Native source inline so you can read or copy the code that's actually rendering. - **Select whole screen.** Select the entire screen as a single target so your next prompt or quick edit applies to the whole layout instead of a specific element. - **More menu (⋮).** Edit the file name inline or delete the file. See File Management for details. ## Example workflow - **Zoomed in** → You're editing a login form, tweaking the input field with QuickEdit. - **Zoomed out** → You see the login → dashboard → settings path, ensuring the flow makes sense before generating more screens. ## Key benefits - Keep control of both details and big picture - Design and test flows instead of isolated screens - Faster alignment for PMs, designers, and devs — everyone can see the journey clearly --- --- Source: https://rapidnative.com/docs/features/core-feature/preview # Play & Preview Two buttons in the header let you experience your app the way users will: **Play** runs the app fully in the browser, and **Run on Phone** gives you a QR code to open it as a PWA or in Expo Go on a real device. ## Video Tutorial (YouTube video included) ## How Preview Works RapidNative's browser preview is powered by browser-metro, an open-source client-side bundler for Expo projects that runs entirely in your browser, with no Node.js required. It's the same technology behind the reactnative.run playground, where you can experiment with React Native code directly in the browser. ## Play Click the Play button in the header to open your app in a new tab at a shareable URL. The app runs as a fully interactive build connected to a real backend, so reads, writes, and auth all behave the way they will in production. - Tap, scroll, and navigate like a real app - Sign up, sign in, and persist data across sessions - Share the URL with teammates so anyone with the link can interact with the same live build ## Run on Phone Next to Play, click **Run on Phone** to open a QR menu with two options: - **Run as web app.** Scan the QR with your phone camera to open the app as a Progressive Web App. From there, Add to Home Screen for a native-feeling icon, no App Store needed. - **Run as Android/iOS app.** Install Expo Go on your phone, scan the QR, and the project runs as a real React Native build on your device. A **Reload Preview** button under the QR refreshes the bundle after edits. ## Why it matters 1. Validate flows the way users will actually experience them 2. Catch design and navigation issues before exporting code 3. Share a working demo URL with stakeholders without deploying anything 4. Test on a real device with no build pipeline or App Store setup ## How to use it - Build or refine your screens on the canvas - Click Play to open the app in a new tab as a fully interactive build - Or click Run on Phone, choose Web app or Android/iOS, and scan the QR with your phone - Use the app like a real user, navigate, log in, and create data - Return to the canvas to keep editing ## Example workflow - You've created login, feed, and profile screens. - Click **Play** to open the live app, sign up a test user, and post your first item. - Click **Run on Phone** and pick **Run as Android/iOS app** to scan the QR with Expo Go and check the same flow on your phone. - Spot a layout issue on mobile, edit on the canvas, hit **Reload Preview**, and see the fix on the device. --- --- Source: https://rapidnative.com/docs/features/core-feature/copy-code-snippets # Copy Code Snippets The Copy Code Snippets feature lets you grab small chunks of React Native code directly from the chatbox or after edits. It's designed for quick testing and validation before downloading the full project. ## Video Tutorial (YouTube video included) ## Where to find it After every chat response, you'll see a Copy Code Snippet option in the chatbox. ## Types of snippets Code Projects Gives you the code for the specific screen currently rendered in its flow. Quick edits Provides just the line of code that was edited during an inline edit. Here you get both the "before (original)" code and the "after" (modified) code for easy reference. ## Example snippet **Prompt:** > "Add a login button to the screen." **Before (original):** ```jsx { /* Header */ } Profile ; ``` **After (modified):** ```jsx { /* Header */ } Profile router.push('/login')} > Login ; ``` This lets you quickly test the code for the edit you just made. ## Why it matters - [x] Great for testing snippets without downloading the whole project - [x] Available to all users (free and paid) - [x] Exporting the entire project is available to paid users --- --- Source: https://rapidnative.com/docs/features/core-feature/file-management # File Management As your app grows, managing your screens and flows becomes just as important as creating them. The File Name Edit & Delete feature helps you stay organized by letting you rename screens and remove the ones you no longer need. This keeps your canvas clear, your project structure tidy, and your exported code easy to follow. ## Video Tutorial (YouTube video included) ## Why it matters - [x] **Clarity in large projects** → meaningful screen names make it easier for you (and your team) to navigate - [x] **Clean code exports** → renamed screens reflect in your downloaded React Native project structure - [x] **Less clutter** → deleting unused or test screens keeps your canvas focused on the actual flow ## How to use File Name Edit / Delete Open the screen menu Click the three-dot menu in the toolbar above the screen you want to manage. You'll see two options: Edit filename and Delete file. Edit filename Click Edit filename, type the new name inline (for example, change '/signup' to '(auth)/signup'), and click OK to confirm. Delete file Click Delete file. A confirmation dialog appears showing the file path — click Delete File to remove it. This action cannot be undone. Home screen note The home screen is always labeled '/' as a standard. This cannot be renamed, since it represents the entry point of your app. Exported project Your file names update automatically in the generated React Native code. ## Example workflow 1. You start with a prompt: _"App with login, dashboard, and profile"_. 2. Screens are generated as _Screen1, Screen2, Screen3_. 3. Rename them to _LoginScreen.js, DashboardScreen.js, ProfileScreen.js_ for clarity. 4. Later, if you decide you don't need the profile screen → delete it, keeping your canvas clean and codebase lean. ## Collaboration note Consistent naming is even more important when you're working in teams: 1. Clear file names reduce confusion during handoffs between PMs, designers, and developers 2. For agencies and enterprises, organized projects make multi-seat collaboration smoother 3. When exporting, teammates see the same structure they worked on in the canvas — no translation gaps --- --- Source: https://rapidnative.com/docs/features/core-feature/project-download # Project Download The Download Project feature lets you export your app as a complete React Native project — ready to open in VS Code, extend with your logic, and ship. Unlike Copy Code Snippets, which gives you small pieces of code to test, Download Project provides the entire app scaffold with all screens, navigation, and styles included. ## Video Tutorial (YouTube video included) ## Why it matters - [x] Get a production-ready codebase, not throwaway mockups - [x] Built on Expo + React Native + NativeWind for immediate compatibility - [x] Saves weeks of setup time by giving you boilerplate-free code - [x] Works seamlessly with developer tools like VS Code and GitHub ## How to use Download Project 1. Finish generating and refining your screens on the canvas. 2. Click the Download Project button from the header. 3. RapidNative generates a zipped project with: - Screens and navigation - Components styled with NativeWind - Expo configuration for instant running 4. Open the project in VS Code and run your app instantly. ## Snippets vs Download Project - **Copy Code Snippets** → Small code samples for quick testing (available to all users). - **Download Project** → Full production-ready React Native project (available on paid plans). For apps built on RapidNative, export is included with the subscription. For projects imported from external tools via Deploy, a separate one-time export fee applies. --- --- Source: https://rapidnative.com/docs/features/core-feature/remix # Project Remixing Remixing lets you learn from others and build faster by starting with an existing project. You can explore the Public Projects library, view apps created by the community, and remix the ones you like into your own workspace. ## Video Tutorial (YouTube video included) ## Public Projects - A complete library of all projects created by free-tier users - Available at: **Public Projects** - Anyone (free or paid) can browse, view, and remix from here Within Public Projects, the RapidNative team also curates Featured Projects — a smaller set of standout templates that showcase the best work from the community. - Browse featured apps at: **Showcase** ## Viewing & Remixing a project - Browse the Public Projects library or Showcase - Click any project to view it in detail — explore its screens, flows, and layout - If you like what you see, click Remix to copy the project into your own workspace - Once remixed, it becomes your project — you can edit, adjust, or expand it as needed Viewing is open to everyone, while remixing lets you take the project further. ## Public vs Private projects Freemium users All projects are public by default and appear in the Public Projects library (and may be highlighted in Showcase) Starter/Pro users All projects are private by default for their entire lifetime and is accessible from the user dashboard. Upgrading note If you created projects as a free user and later upgrade, your older projects remain public unless you manually set them to private ## Why it matters - [x] Explore and learn from real-world app templates - [x] Save time by remixing instead of starting from scratch - [x] Get inspired by featured community projects - [x] Share your own work if you want visibility - [x] Keep control of your private projects on paid plans --- --- Source: https://rapidnative.com/docs/features/business-feature/image-to-screen # Image to Screen The Image to Screen feature lets you upload an image — whether it's a design file, a Figma screenshot, or even a rough sketch — and convert it into a working React Native screen in minutes. This makes it not just a prototyping tool, but also a design-to-code tool: bring in your design, and RapidNative will recreate it as functional UI with exportable code. ## Video Tutorial (YouTube video included) ## How it works - Open any existing project - In the chatbox, click the Image icon - Upload one image at a time (mockup, screenshot, or sketch) - Add an optional prompt to guide the generation - Example: "Make this signup screen responsive with modern styling." - RapidNative generates a functional screen and places it on your canvas - Refine details using Inline Edits for text, layout, or styling Viewing is open to everyone, while remixing lets you take the project further. ## Example workflow **Input :** 1. Upload a Figma screenshot of a signup page with name, email, and password fields 2. Add a prompt: **"Style this with a modern card layout."** **Output :** 1. RapidNative generates a SignUpScreen with inputs and a button, styled with NativeWind classes, and ready to export. ## Supported formats & guidelines Supported formats: image/jpeg, image/png, image/gif, image/webp File size: Keep under 5MB for best results (larger files are auto-compressed) Upload limit: One image at a time ## Why it matters - [x] Works as a design-to-code tool — upload your Figma screenshots and get React Native code in minutes - [x] Skip the manual redraw → directly test designs as working screens - [x] Turn inspiration, sketches, and UI ideas into real apps faster - [x] Always outputs exportable React Native + NativeWind code you can extend in VS Code or GitHub - [x] Keep control of your private projects on paid plans --- --- Source: https://rapidnative.com/docs/features/business-feature/fix-with-ai # Fix with AI RapidNative repairs broken screens for you, in two layers: an **automatic** pass that runs silently right after every AI generation, and a **manual** Fix with AI button you can click if an error still surfaces. ## Video Tutorial (YouTube video included) ## Automatic fixing The moment AI generation finishes, RapidNative scans the new code for build and runtime errors. If something is broken, an auto-retry kicks in behind the scenes and dispatches the same repair the manual button would, with no click required. - Most errors are resolved before you ever notice them - You'll see a small auto-fix bubble in the chat thread when a silent repair runs - The session waits until you've sent at least one prompt, so pre-existing errors on page load don't trigger spurious fixes ## Manual Fix with AI If an error survives the automatic pass (for example, a runtime error that only appears after you interact with the screen), a **Fix with AI** button shows up on the affected screen and in the chat panel. - RapidNative detects an error that the auto-fix did not resolve - A "Fix with AI" button appears on the affected screen and in the chat - Click Fix with AI to trigger the repair - The AI analyzes the error, updates the code, and refreshes the screen automatically ## Why it's valuable - [x] No manual debugging — the AI handles it for you, often invisibly - [x] Keeps your build momentum going without getting stuck on errors - [x] Works on generated screens and edited screens alike - [x] Always produces valid **React Native + NativeWind code** after the fix --- --- Source: https://rapidnative.com/docs/features/business-feature/inline-edits # Inline Edits Feature The Inline Edits feature lets you refine screens directly on your canvas. Instead of regenerating a whole screen, you can select any element and make precise changes — text, layout, color, or style. ## Video Tutorial (YouTube video included) ## How it works - On the canvas, click the "Select" option from the toolbar - Click on the element you want to edit (e.g., button, header, text field) - Type your change request in the Inline Edit box - Example: "Change button color to blue and make it rounded." - RapidNative instantly updates the screen and refreshes the underlying React Native + NativeWind code ## Example workflow Before A plain 'Submit' button Inline Edit Prompt Change text to 'Login' and make it green. After A green button labeled 'Login,' updated on the canvas and in code. ## Why it's valuable - [x] Edit visually, directly on the canvas - [x] Faster iteration — no need to rewrite full prompts - [x] Smooth workflow for polishing details - [x] Always generates **real React Native code** behind the scenes --- --- Source: https://rapidnative.com/docs/features/business-feature/whiteboarding # Whiteboarding The Whiteboarding feature gives you a space to brainstorm and sketch out the skeleton of a screen before generating it. Powered by Excalidraw, it turns rough ideas into functional app screens you can refine and export. ## Video Tutorial (YouTube video included) ## How it works - From the project canvas, open the toolbox and click Draw (Whiteboarding) - A whiteboarding canvas (powered by Excalidraw) opens - Use shapes, boxes, and text to sketch the structure of a screen (e.g., header, fields, buttons) - Add an optional prompt to describe your intent - Example: "Make this a modern login screen with inputs and a login button." - RapidNative generates a real screen from your sketch + prompt and places it on your project canvas ## Example workflow **Input (Whiteboard sketch):** 1. A rectangle for a header 2. Two boxes for text inputs 3. One box for a button **Optional Prompt:** 1. *"Login screen with email, password, and blue submit button."* **Output:** 1. RapidNative generates a LoginScreen with styled inputs and a button, ready to refine with inline edits. ## Why it's valuable - [x] Brainstorm flows quickly without polished designs - [x] Sketch → screen → code in minutes - [x] Works well for MVPs, stakeholder demos, or internal idea validation - [x] Easy for non-designers to capture ideas visually - [x] Always generates exportable React Native + NativeWind code --- --- Source: https://rapidnative.com/docs/features/business-feature/rollback # Rollback Feature The Rollback Feature lets you undo changes and restore an earlier version of your screen. It acts as a safety net while you experiment, so you can try different edits and always get back to a stable version when needed. ## Video Tutorial (YouTube video included) ## How it works - Open the chat section for the screen you're working on - Find the three-dot menu in the chat entry - Select Rollback to restore the screen to that version - Continue editing knowing you can always return to an earlier state ## Example workflow 1. You update a login screen with multiple inline edits. 2. One version breaks the alignment of the inputs. 3. From the chat section, open the three-dot menu on the earlier version and hit **Rollback**. 4. Your screen instantly reverts to the earlier layout. ## Why it's valuable - [x] Restore **earlier versions of screens** quickly - [x] Undo unwanted edits without regenerating from scratch - [x] Experiment more confidently, knowing you can roll back - [x] Keeps your workflow smooth and efficient --- --- Source: https://rapidnative.com/docs/features/business-feature/expo-go # Run on Phone (Expo Go & PWA) The **Run on Phone** button in the RapidNative header lets you open your app on a real phone in seconds. It surfaces two QR codes — one launches the app as a Progressive Web App, the other launches it as a real React Native build inside Expo Go. For the in-browser Play button and the broader preview flow, see [Play & Preview](/docs/features/core-feature/preview). ## Video Tutorial (YouTube video included) ## Run as Android/iOS app (Expo Go) This is the closest thing to running a native build of your app without setting up a build pipeline. - Open your project in the RapidNative editor - Click Run on Phone in the header - Switch to the "Run as Android/iOS app" tab - Open Expo Go on your phone and scan the QR code - Your app loads and runs live on your device. Tap Reload Preview under the QR to refresh after edits. - Download Expo Go from the App Store (iOS) or Google Play (Android). ## Run as web app (PWA) If your stakeholder doesn't have Expo Go and you don't want them to install anything, share the **Run as web app** QR instead. Scanning it with the phone camera opens your app as a Progressive Web App in the browser. - Tap the share menu and choose **Add to Home Screen** for a native-feeling icon - Works on iOS and Android with no app store account - Same live build, just rendered in the browser engine instead of Expo Go ## Sharing with others Either QR is shareable. Pick the one that matches the audience: - **Expo Go QR** for developers and anyone who already has the app installed. You get the closest-to-production rendering. - **PWA QR** for clients, founders, or non-technical stakeholders. Zero setup, no app installs. Your teammates don't need a RapidNative account either way. ## Why it's valuable - [x] Test your app on a real device with zero setup - [x] Share a live preview with clients or teammates instantly - [x] No build process or deployment required - [x] Works on both **iOS and Android**, via Expo Go or PWA --- --- Source: https://rapidnative.com/docs/features/business-feature/asset-upload # Asset Upload Feature The Asset Upload feature lets you bring your brand into RapidNative by uploading assets like logos. RapidNative then applies them across your app screens, so your prototypes and exports feel aligned with your brand identity from the very beginning. ## Video Tutorial (YouTube video included) ## How it works - Open a project in RapidNative - In the chatbox, use the Upload option to add your logo (or another asset) - Ask RapidNative to apply your logo or use it to style your app - Example: "Use this logo in the header of every screen." - RapidNative customizes your app with the uploaded asset, updating your screens and exported code ## Example workflow - Upload your company's logo file. - Ask: _"Place this logo on the login screen and dashboard header."_ - RapidNative updates the screens, displaying your brand logo consistently. ## Supported assets File types: PNG, JPG, WebP Recommended size: Keep under 5MB (larger files are auto-compressed) Best use case: Logos, icons, or small brand graphics ## Why it's valuable - [x] Add your **brand identity** directly into prototypes - [x] Make apps feel customized and pitch-ready instantly - [x] Save time by avoiding repetitive manual logo placement ## Don't have brand assets yet? Generate them in seconds, then upload: --- --- Source: https://rapidnative.com/docs/features/business-feature/prd # PRD Feature The PRD Feature lets you paste a Product Requirements Document into RapidNative. The tool reads through multiple requirements, breaks them down into tasks, and begins creating screens step by step — with full control given to you at each stage. Instead of generating everything at once, RapidNative helps you perfect one screen first, while queuing the rest in Pending Tasks. ## Video Tutorial (YouTube video included) ## How it works - Open a project and paste your PRD text into the chatbox - RapidNative breaks down the PRD into individual tasks (e.g. login screen, dashboard, settings page) - The first screen is created and shown on your canvas - Other tasks are placed into Pending Tasks (visible in the chat area) - Review and refine the first screen - Use Inline Edits or additional prompts and pending tasks are updated automatically as you refine - Once satisfied, you can send tasks one by one to generate the next screens or cancel tasks you no longer want carried out ## Example workflow **PRD input:** > "The app should have: > > - A login page with email and password fields > - A dashboard with recent activity > - A settings page with toggle options" **RapidNative output:** - Generates the Login Screen first - Places Dashboard and Settings into Pending Tasks - User refines the login screen (e.g. adds "Forgot Password" link) - Pending tasks update accordingly - User sends dashboard and settings tasks once login is finalized ## Why it matters - [x] **Control your workflow** → perfect one screen before moving forward - [x] **Save credits** → avoid regenerating multiple screens unnecessarily - [x] **Stay flexible** → cancel tasks you don't need, refine tasks before they're built - [x] **Team alignment** → PMs and founders can validate requirements step by step without wasting dev effort --- --- Source: https://rapidnative.com/docs/features/business-feature/launch # Launch on App Store & Google Play You built it with RapidNative. We'll handle the rest: certificates, builds, store listings, and submission. Stress-free. For pricing, payment, and to start, visit rapidnative.com/deploy. ## Why this exists Building the app is the easy part. Getting it into the app stores is where most people get stuck: - **Certificates & Code Signing.** Apple certificates, provisioning profiles, code signing. It's confusing and one mistake means starting over. - **Store Listings & Compliance.** Screenshots, descriptions, privacy policies, data safety forms, content ratings. Every platform has different requirements. - **Rejections & Delays.** One wrong setting and Apple rejects your app. Then you're debugging review guidelines instead of building your product. ## Plans ### Single Store (one platform) - App Store OR Google Play submission - Code signing & certificate setup - Build generation from your RapidNative project - App icon formatting (all required sizes) - Store listing creation (title, description, keywords) - Screenshot formatting for all device sizes - Privacy policy, terms of service, and support pages (generated) - Content rating / age rating completion - Data safety / App Privacy form completion - First submission + rejection fix handling ### Both Stores (most popular) Everything in Single Store, plus: - Both App Store AND Google Play submission - Push notification setup (APNs + FCM) - Analytics integration (basic event tracking) - Custom splash screen & app icon design - Store listing optimization (ASO basics) - Additional rounds of rejection fix handling ### Payment options - **Split payment** — Pay 50% upfront as a deposit, remaining 50% on delivery. - **Pay in full** — Single payment for the full amount. - Prices are managed dynamically. See current pricing at https://rapidnative.com/pricing#deploy-to-stores. ## How it works (4 steps) 1. **Choose Your Plan.** Pick Launch or Launch Pro and complete payment. You'll get instant access to the onboarding form. 2. **Share Access.** Invite us to your App Store Connect and Google Play Console with limited permissions. Share your RapidNative project. We'll walk you through every step. 3. **We Build & Submit.** We export your code, configure everything, create the store listing, and submit to Apple and Google for review. 4. **You're Live.** Apple typically reviews in 1-3 days, Google in hours to 2 days. Once approved, your app is live and we send you the store links. ## What you provide **Required:** - Apple Developer Account ($99/year). Apple requires identity verification, so we can't create this on your behalf. - Google Play Developer Account ($25 one-time). Same requirement. - Your RapidNative project (we'll export the code). - App name and a short description of what it does. **Nice to have:** - Your own app description or marketing copy - Brand colors / style preferences for the listing - Specific keywords you want to rank for ## What we handle - Full store listing copy (descriptions, keywords, category) - Screenshots, generated from your app - Privacy policy, generated for your use - Content rating questionnaire - Data safety / App Privacy forms - App icon formatting (or custom design as a Launch Pro feature / +$99 add-on) ## Timeline - We submit within **5 to 7 business days** for a single platform (Launch), **7 to 10** for both (Launch Pro). Add expedited for **3 business days**. - Apple review usually takes **1 to 3 days** after submission. Google is usually faster (hours to 2 days). - Total time from start to live: **roughly 2 to 3 weeks** depending on the platforms and any rejection fixes. ## Account security You stay the owner. We don't store credentials. - For Apple, you invite us to **App Store Connect** as an **App Manager** (a limited role). We never see your password. - For Google, you invite us with **Release Manager** permissions on your Play Console. - Once your app is live, you can revoke our access immediately. - If you'd rather not invite a third party, we can run the submission via a screen-sharing session instead. ## Ownership 100%. Everything is published under YOUR developer account. We never own or control your app. You can revoke our access anytime after launch. ## Rejections Rejections happen, it's normal. The Launch plan includes **one round** of rejection fixes. Launch Pro includes **two rounds**. Common rejection reasons include missing privacy policy, incomplete metadata, or UI issues. We fix these and resubmit. ## Refund policy - If we haven't started work yet: **full refund**. - If we've started but your app isn't submitted yet: **50% refund**. - Once submitted: **no refund** (the work is done). - If your app gets rejected and we can't fix it after the included rounds: **50% refund**. ## Building it yourself? If you'd rather submit on your own, you can download the full Expo project and follow the Developer Handoff Guide for your project type (Fullstack or Frontend) for the self-deploy walkthrough. These free tools cover most of what we'd otherwise generate for you: --- --- Source: https://rapidnative.com/docs/developer-handoff/frontend # Developer Handoff: Frontend You're inheriting a **frontend-only** React Native app generated by RapidNative. It's a clean Expo + Expo Router scaffold with NativeWind theming and light/dark mode. **No backend, no database, no auth wired up by default.** Bring your own data layer when you're ready. This guide gets you from clone to running in about five minutes. > If your project has a `src/db/` folder or auth screens under `app/(auth)/`, you have a fullstack project. Use the Developer Handoff: Fullstack guide instead. ## Mental model in 60 seconds Standard Expo + Expo Router app. Theming is **CSS-variable-driven**: `theme.ts` exports `lightTheme` and `darkTheme` as bundles of CSS variables (via NativeWind's `vars()`), and `ThemeProvider` applies the active bundle through `useColorScheme()`. `tailwind.config.js` then resolves Tailwind classes like `bg-background` and `text-foreground` to those CSS variables. There's no global state library, no auth, no API client. The data layer is yours to choose. ## The stack | Layer | Technology | | ---------------- | ----------------------------------------------------- | | Framework | Expo 54 + React Native 0.81 + React 19 | | Routing | Expo Router 6 (file-based) | | Language | TypeScript (extends `expo/tsconfig.base`, not strict) | | Styling | NativeWind 4 + Tailwind CSS 3.4 | | Theming | `theme.ts` (NativeWind `vars`) + `ThemeProvider` | | Safe areas | react-native-safe-area-context | | Navigation | @react-navigation/bottom-tabs + native + elements | | Icons | lucide-react-native | | Storage | @react-native-async-storage/async-storage | | Variant helpers | `lib/cva.ts` (custom) + `tailwind-variants` | No database. No auth. No state library. No API client. ## Folder structure ``` project-root/ ├── app/ # Expo Router pages (file-based routing) │ └── _layout.tsx # Wraps children in ThemeProvider + SafeAreaProvider ├── components/ │ ├── ThemeProvider.tsx # Light/dark switching + applies CSS vars │ └── ThemeToggle.tsx # Ready-made theme switcher button ├── lib/ │ └── cva.ts # Custom class-variance-authority style helper ├── theme.ts # lightTheme / darkTheme as vars() bundles + fonts ├── theme.md # Theming guide ├── layout.md # Layout / screen structure guide ├── tailwind.config.js # Maps CSS vars to Tailwind color classes ├── global.css # Tailwind base/components/utilities directives ├── nativewind-env.d.ts # NativeWind TypeScript augmentation ├── app.json # Expo config ├── babel.config.js ├── metro.config.js ├── tsconfig.json # `@/*` path alias to root ├── eslint.config.js ├── rapidnative.json # Internal RapidNative metadata (safe to ignore) ├── package.json ├── README.md # Default Expo template README └── .claude/ # AI agent settings used during generation ``` A few notes: - **`theme.md` and `layout.md`** are part of the scaffold. They walk through theming rules and the screen-structure conventions the AI follows. Worth a five-minute skim. - **`global.css`** is intentionally minimal, just `@tailwind base/components/utilities`. The actual color values are not in CSS; they're injected at runtime by `ThemeProvider` from `theme.ts`'s `vars()` exports. - **`@/*` path alias** points to project root, configured in `tsconfig.json` and matched in `babel.config.js` via `babel-plugin-module-resolver`. Imports like `@/components/ThemeProvider` work out of the box. - **`.claude/` and `rapidnative.json`** are RapidNative metadata used during AI-assisted generation. ## Installation **Prerequisites** - Node.js 20+ - Expo CLI (installed globally or via `npx`) - iOS Simulator (Xcode) or Android Emulator (Android Studio), or the Expo Go app on a physical device **Install dependencies** ```bash npm install ``` No `.env` setup needed. There's no backend to point at. ## Quick start ```bash # Start the Expo dev server npm start # Open the app # Press 'i' for iOS Simulator # Press 'a' for Android Emulator # Or scan the QR code with Expo Go on your phone ``` ## Theming The scaffold ships with a CSS-variable-driven theme. Both light and dark themes live in `theme.ts` as `vars(...)` exports: ```ts // theme.ts (excerpt) import { vars } from 'nativewind'; export const lightTheme = vars({ '--background': '255 255 255', // RGB space-separated, NOT hex '--foreground': '23 23 23', '--primary': '...', // ... }); export const darkTheme = vars({ /* ... */ }); ``` `ThemeProvider` reads `useColorScheme()` from NativeWind, picks the right bundle, and applies the CSS variables. On web it sets them on `document.documentElement` so RN Modal portals (which mount outside the wrapper View) still inherit theme values. `tailwind.config.js` then maps those CSS variables to Tailwind classes: ```js // tailwind.config.js (excerpt) colors: { background: 'rgb(var(--background) / )', foreground: 'rgb(var(--foreground) / )', // ... } ``` So in components you write `bg-background`, `text-foreground`, `bg-primary`, etc., and they automatically follow the active theme. **To rebrand:** 1. Open `theme.ts`. 2. Replace the **RGB space-separated values** (e.g. `'255 255 255'`) for the tokens you want to change. Don't use hex. `tailwind.config.js` defines colors as `rgb(var(--token) / )`, so opacity utilities like `bg-foo/50` only work when the channels are separated. 3. Restart Metro. NativeWind picks up the new values. `theme.md` in the scaffold walks through the full token list and how to add new tokens. `ThemeToggle.tsx` is a ready-made button that flips between light and dark. The scaffold also pre-loads **Inter** and **JetBrains Mono** via `expo-font` (configured in `theme.ts` and loaded in `_layout.tsx`). Use Tailwind classes like `font-heading`, `font-body`, `font-mono`, or the more direct `font-inter-semibold` / `font-jetbrains` etc. ## Layout & theming guidelines `layout.md` and `theme.md` in the scaffold are guideline documents. `layout.md` covers screen structure and layout conventions, `theme.md` covers theming tokens and how the color system works. They're written primarily so RapidNative's AI agents follow consistent patterns during generation, and they double as a quick reference for any developer inheriting the project. Skim both before making structural or visual changes. ## Variant helpers When you write variant-driven components (multiple sizes, intents, states on the same primitive), two helpers ship with the project: - **`lib/cva.ts`**: a small custom helper with a `class-variance-authority`-style API. - **`tailwind-variants`**: the full third-party library, also installed. Pick whichever you prefer. Stay consistent within a feature so future readers (human or AI) don't have to context-switch. ## Adding a backend The scaffold ships without one by design. When you're ready to plug in data: - **Quickest swap to the same stack RapidNative's fullstack template uses:** install Vibecode DB, point it at Supabase, and access the client via a context provider. The Fullstack Handoff covers this stack in detail (folder structure, the adapters, schema sync rule). - **Bring your own:** any data layer works. TanStack Query + your REST API, Apollo + GraphQL, the Supabase JS SDK, Firebase, etc. The frontend isn't coupled to anything. ## Going to production The scaffold does **not** ship `eas.json`. To configure EAS for the first time: ```bash # Generate eas.json with default profiles npx eas build:configure # Build for production (iOS + Android) eas build --platform all # Submit to App Store / Play Store eas submit --platform all ``` Before shipping: 1. Configure the generated `eas.json` profiles for your team's signing identity. 2. Add app store metadata, icons, and screenshots. 3. Wire up your data layer if you haven't yet (see above). If your team would rather skip the certificates / store listings / submission grind, RapidNative offers an end-to-end deployment service. See rapidnative.com/pricing#deploy-to-stores for current pricing. ## Where to get help - **`theme.md`** in the scaffold: full theming reference (color tokens, dark mode, fonts, radius). - **`layout.md`** in the scaffold: screen structure, spacing, safe area, ScrollView patterns. - **`.claude/` directory**: AI agent settings used during generation. Useful if you continue AI-assisted development on the project. - **Expo & React Native**: standard docs apply, no overrides. - **Expo Router**: docs.expo.dev/router - **NativeWind**: nativewind.dev (especially the theming guide for how `vars()` works) - **`tailwind-variants`**: tailwind-variants.org If something doesn't make sense after reading this, the answer is almost certainly in `theme.md`, `layout.md`, or one of the other markdown guides shipped inside the project. --- --- Source: https://rapidnative.com/docs/developer-handoff/fullstack # Developer Handoff: Fullstack You're inheriting a **fullstack** React Native app that was generated by AI: app + Vibecode DB + auth + Supabase backend. This guide gets you from "what is all this" to shipping confidently in about ten minutes. It assumes you've shipped React Native or Expo apps before. We won't explain `useEffect` or what a `FlatList` is. The focus is on **what's RapidNative-specific**: namely, the Vibecode DB layer and how the project is wired around it. > If you downloaded a **frontend-only** project (no backend, no `src/db/` folder), use the Developer Handoff: Frontend guide instead. ## Mental model in 60 seconds The codebase is a standard Expo + Expo Router project. Screens are in `app/`. Components in `components/`. Hooks in `src/hooks/`. Styling is NativeWind (Tailwind for React Native). State and data fetching is TanStack Query. The one piece you haven't seen before is **Vibecode DB**: a thin database layer that gives you a Supabase-style API but lets you swap backends (in-memory mock / Supabase) by changing config. No app code changes when you switch. That's it. If you've shipped Expo apps with TanStack Query and a Supabase-like backend, you already know 95% of this stack. ## The stack | Layer | Technology | | ------------ | ------------------------------------------- | | Framework | Expo 54 + React Native 0.81 | | Routing | Expo Router 6 (file-based) | | Language | TypeScript (extends `expo/tsconfig.base`, not strict) | | Styling | NativeWind 4 (Tailwind CSS for RN) | | State / Data | TanStack Query 5 (with offline persistence) | | Database | Vibecode DB (Mock / Supabase) | | Icons | lucide-react-native | | Build | EAS Build + EAS Submit | Everything is standard except Vibecode DB. We'll cover that in detail below. ## Folder structure ``` project-root/ ├── app/ # Expo Router pages (file-based routing) │ ├── _layout.tsx # Root layout, wraps in providers, auth guard │ ├── (auth)/ # Public routes (sign in / sign up) │ │ ├── _layout.tsx │ │ ├── signin.tsx │ │ └── signup.tsx │ └── (app)/ # Protected routes │ ├── _layout.tsx # Auth-gated layout │ └── (tabs)/ # Bottom tab navigation ├── components/ # Reusable UI components │ └── index.ts # Barrel export ├── src/ │ ├── db/ │ │ ├── client.ts # buildClient() factory + getEnvConfig() │ │ ├── schema.ts # defineTable() exports + TypeScript types │ │ └── seeds/ │ │ ├── index.ts # Seed registry: `seeds` array │ │ └── .ts # Per-table seed data │ ├── hooks/ │ │ ├── index.ts # Barrel export │ │ ├── useAuth.ts # Auth wrapped in React Query │ │ └── useOffline.ts # Network state │ ├── lib/ │ │ └── queryClient.ts # TanStack Query client + persistence │ └── providers/ │ ├── AppProvider.tsx # Vibecode client context (useApp hook) │ └── ThemeProvider.tsx # Dark / light theme │ # (Provider tree is composed in app/_layout.tsx) ├── theme.ts # Color tokens (light + dark) ├── tailwind.config.js # NativeWind config ├── global.css # Tailwind base styles ├── app.json # Expo config ├── eas.json # EAS Build profiles ├── package.json ├── README.md └── claude.md # AI agent context (skim this, it's useful) ``` A few notes: - **What's always there**: everything in the tree above is in your downloaded project. - **One conditional**: `app/(auth)/` only exists if your app uses authentication. - **Load-bearing files** (read before refactoring): `src/db/schema.ts`, `src/db/seeds/index.ts`, `src/providers/AppProvider.tsx`, `app/_layout.tsx` (composes the provider tree). - **`claude.md` and `.claude/` directory**: these power AI-assisted development inside the project. You can keep using them, ignore them, or delete them. They don't affect runtime. ## Installation **Prerequisites** - Node.js 20+ - Expo CLI (installed globally or via `npx`) - iOS Simulator (Xcode) or Android Emulator (Android Studio), or the Expo Go app on a physical device **Install dependencies** ```bash npm install ``` **Environment** Your downloaded project already ships with a working `.env` file. RapidNative pre-fills it with credentials for your project's Supabase backend, so the app talks to a real database out of the box. No setup required. You'll see something like: ```env EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co EXPO_PUBLIC_SUPABASE_ANON_KEY=... ``` To swap to your own Supabase backend, update these values in `.env`. ## Environment variables Your downloaded `.env` is already populated with what the app needs to run. Reference table below for what each variable does, in case you need to wire your own backend. App-side variables (Expo bundles `EXPO_PUBLIC_*` into the client at build time): | Variable | Purpose | Pre-filled in download? | | ------------------------------ | ---------------------------------------- | ----------------------- | | `EXPO_PUBLIC_SUPABASE_URL` | Supabase project URL | ✅ your project's URL | | `EXPO_PUBLIC_SUPABASE_ANON_KEY`| Supabase anon/public key | ✅ your project's key | ## Quick start ```bash # 1. Install npm install # 2. Start the Expo dev server npm start # 3. Open the app # Press 'i' for iOS Simulator # Press 'a' for Android Emulator # Or scan the QR code with Expo Go on your phone ``` The downloaded project is wired to the Supabase instance RapidNative provisioned for it, so signing up / logging in / creating data all work against a real backend on first run. No extra setup. ## Core concepts ### Vibecode DB Vibecode DB is the data layer the app talks to. It exposes a Supabase-style query builder (`from(...).select(...)`, `.eq()`, `.insert()`, etc.) but the actual backend behind it is configurable. You access the client through React context, **not** a global import: ```tsx import { useApp } from '@/src/providers/AppProvider'; import { useAuth } from '@/src/hooks'; function PostsScreen() { const { client } = useApp(); // DB client const { user } = useAuth(); // Current user (NEVER from useApp) // Query data: const { data, error } = await client .from('posts') .eq('user_id', user.id) .order('created_at', { ascending: false }) .limit(50) .select('*'); } ``` Two rules that aren't optional: 1. **Never import a global `vibecode` client.** Always go through `useApp()`. The client is built async on app start and stored on context. 2. **`user` comes from `useAuth()`, never from `useApp()`.** `useApp()` returns only the `client`. Mixing these up is the most common bug when devs first touch the codebase. The full Vibecode DB API reference (filter methods, query patterns, auth methods) lives at vibecode-db.geekyants.com. What's documented there applies one-for-one inside this codebase, with the one exception that `vibecode` here is `useApp().client`. ### The adapters The same `client.from('posts').select('*')` call hits a different backend depending on configuration. Two options: **Supabase**: what your downloaded project is wired to by default. Cloud Postgres with auth, storage, and realtime. RapidNative provisions a Supabase instance for every project and pre-fills the URL + anon key in your `.env`. ```env EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key ``` **Mock**: In-memory data seeded from `src/db/seeds/`. Auto-signs in as `demo@example.com`. Persists session via AsyncStorage but data resets when the user clears storage. Use it when you want to develop offline, write tests, or work without touching the production backend. > **Note:** When you preview your project inside the RapidNative editor, the bundler defaults to the **mock** adapter, so the in-product preview shows seed data from `src/db/seeds/`, not live Supabase data. Your downloaded project hits the real Supabase backend. This is why the editor preview and your local build can show different data. You can swap adapters without touching app code. The same `client.from(...)` calls work against any backend. ### Authentication Auth is handled by Vibecode DB and exposed through the `useAuth()` hook. Never call `client.auth.*` directly in screens. Use the hook. It wraps auth in React Query mutations so cache invalidation, optimistic updates, and loading states all work correctly. ```tsx import { useAuth } from '@/src/hooks'; function SignInScreen() { const { user, isAuthenticated, signIn, signOut } = useAuth(); // Sign in: signIn.mutate( { email, password }, { onSuccess: () => router.replace('/') } ); // Sign out: signOut.mutate(); } ``` The Mock adapter auto-signs the user in during client build, so you don't need to wire up sign-in screens for development. They still work, they're just not required. ### The schema 3-file sync rule This is the one rule that bites people if they don't know about it. Every database table is described in **three files**, and all three must stay in sync: 1. **`src/db/schema.ts`**: `defineTable()` call + TypeScript type 2. **`src/db/seeds/
.ts`**: mock data (`SeedEntry` export) 3. **`src/db/seeds/index.ts`**: registers the seed in the `seeds` array When you add, rename, or drop a column or table, update all three in the same change. Skipping one will either crash the build or break the mock adapter silently. Example, adding a `posts` table: ```tsx // 1. src/db/schema.ts import { defineTable, belongsTo } from '@vibecode-db/client'; export const posts = defineTable('posts', { id: 'string', user_id: 'string', caption: 'string', created_at: 'string', updated_at: 'string', author: belongsTo(() => users, 'user_id'), }); export type Post = { id: string; user_id: string; caption: string; created_at: string; updated_at: string; }; ``` ```tsx // 2. src/db/seeds/posts.ts import type { Post } from '../schema'; import type { SeedEntry } from './index'; const seed: SeedEntry = { table: 'posts', rows: [ { id: '1', user_id: 'user-1', caption: 'Hello', created_at: '...', updated_at: '...' }, // 6–7 rows ideally. List screens with 2 items look broken ], }; export default seed; ``` ```tsx // 3. src/db/seeds/index.ts import users from './users'; import posts from './posts'; export type SeedEntry> = { table: string; rows: T[] }; export const seeds: SeedEntry[] = [users, posts]; ``` The project's `claude.md` covers this rule in detail and the AI slash commands inside the project (`/new-table`) automate it for you. ## Going to production Standard Expo path: ```bash # Build for production (iOS + Android) npm run build:production # Submit to App Store / Play Store npm run submit ``` Before shipping: 1. Ensure your Supabase backend is configured with the correct URL and anon key in `.env` 2. Push the schema to your backend (Supabase migrations via dashboard or SQL editor) 3. Configure EAS Build profiles in `eas.json` for your team's signing identity 4. Add app store metadata, icons, screenshots If your team would rather skip the certificates / store listings / submission grind, RapidNative offers an end-to-end deployment service. See rapidnative.com/pricing#deploy-to-stores for current pricing. ## Where to get help - **The project's own `claude.md`**: covers conventions, file locations, and rules in detail. Worth a five-minute skim even if you're not using AI tooling. - **The `.claude/skills/` directory**: pattern guides for `vibecode-db`, `tanstack-query`, `react-native-patterns`, and `data-patterns`. Useful as quick references when extending the app. - **Vibecode DB official docs**: vibecode-db.geekyants.com - **Expo & React Native**: standard docs apply, no overrides - **NativeWind**: nativewind.dev - **TanStack Query**: tanstack.com/query If something doesn't make sense after reading this, the answer is almost certainly in `claude.md` or one of the skill files inside the project. --- --- Source: https://rapidnative.com/docs/faq/general # General FAQ ## What is RapidNative? RapidNative is an AI-native full-stack mobile app builder. You describe an app and you get a real React Native app, backend and all, running live in your browser in minutes. ## Who is RapidNative for? Founders, PMs, agencies, designers, and anyone with an idea who wants a working app today instead of next quarter. ## How do I create my first app? 1. Sign in at rapidnative.com. 2. Click **New Project**. 3. Describe your app (prompt, image, sketch, or PRD). 4. Watch it generate, full-stack, in a few minutes. See Getting Started for the full walkthrough. ## How do I preview my app? You don't preview, you run. Hit Play, and your app opens in a new tab as a fully interactive build via ReactNative.run, complete with real data, auth, and file storage. ## How do I test on my phone? Two ways. Click **Add to Homescreen** to install the PWA, or scan the QR code to open the app in Expo Go on a real device. ## Can I edit screens after they generate? Yes. Use Inline Edits for element tweaks, Quick Edit for text and style, or send a new prompt for larger changes. ## Can I undo changes? Yes. Rollback lets you restore any earlier version of your project. ## Does my app have a real backend? Yes. Every project ships with a real database, authentication, file storage, and real-time updates. Powered by Vibecode DB under the hood. ## Can I switch databases later? Yes. Vibecode DB is built for this. You can swap between the in-memory mock adapter and Supabase without rewriting your queries. ## Do I need to know how to code? No. But if you do know React Native, you can export the project and extend it in any direction. ## What does the exported code look like? A clean Expo project using Expo Router, NativeWind, and Vibecode DB. Runs with `npx expo start`. Open it in VS Code, push it to GitHub, ship it. ## How do I hand off the project to a developer? Send your developer the right Developer Handoff Guide for your project type: - **Fullstack project** (with backend, auth, database): Developer Handoff — Fullstack. Covers the stack, folder structure, env vars, Vibecode DB and the adapters, and going to production. Designed for senior devs to read in about ten minutes. - **Frontend-only project**: Developer Handoff — Frontend. Shorter guide covering the Expo + Expo Router + NativeWind setup with no backend assumptions. ## Does RapidNative replace developers? No. It replaces the slow parts of starting a project. Developers are still the ones who take it to production, scale it, and add the business logic that makes it yours. ## Project privacy - **Free plan:** projects are public. - **Starter and Pro:** projects are private by default. - **Enterprise:** private with team access controls. See rapidnative.com/pricing for plan details. ## What are Showcase and Remixing? Showcase is a curated set of public projects you can browse for inspiration. Remixing lets you fork any public project into your own workspace and keep building. ## Can I invite collaborators? Yes. Pro and Enterprise plans support real-time collaboration so your team can work in the same project live. ## Is my data secure? Yes. Projects are stored on a secure cloud infrastructure. Exported code is entirely yours. ## Is there a mobile app for RapidNative? RapidNative runs in any browser, on any device, including phones and tablets. No install needed. ## Affiliate program? Yes. 30% commission for up to 12 months per referral. Sign up at rapidnative.getrewardful.com. ## Support Email support@rapidnative.com, visit the Contact page, or file a bug on the Report a Bug page. ## Can I hire help? Yes. The Experts page lists vetted developers and agencies who specialize in RapidNative and React Native. --- --- Source: https://rapidnative.com/docs/faq/billing # Billing & Subscription ## Plans - **Free:** $0 per month. Public projects only. - **Starter:** $20 per month. 50 requests. - **Pro:** $50 per month. 150 requests. Most popular. - **Enterprise:** custom. All plans include full-stack generation, Vibecode DB, and ReactNative.run in-browser runtime. See rapidnative.com/pricing for live pricing. ## Upgrades Upgrade anytime from the header button. You get access to the new tier immediately and are billed on the spot. ## Downgrades Downgrades take effect at the end of your current billing cycle. You keep your existing features until then. ## Cancellations Cancel anytime from Account Settings. You keep access until the end of your current cycle, then revert to Free. Your projects stay intact. ## Do I lose my projects if I cancel? No. All projects remain in your account. Paid projects stay private, free projects stay public. ## Billing cadence Monthly or annual. Annual plans include a discount. ## Payment methods Credit and debit cards (Visa, MasterCard, Amex). Enterprise can pay by bank transfer or PO. ## Invoices Download past invoices as PDFs from Account Settings → Billing. ## Free trials No free trial on Starter or Pro right now. The Free plan is the trial. Use it to build something real, then decide. ## Team subscriptions Starter and Pro are individual plans. Enterprise includes team collaboration, shared projects, and multi-seat billing. See rapidnative.com/pricing. ## Student, non-profit, and startup discounts Not available today. We'll announce it if that changes. --- --- Source: https://rapidnative.com/docs/faq/credits # Credits & Usage Limits ## How are credits consumed? Credits scale with the complexity of each task: bigger screens or PRDs use more, small edits use fewer. AI work that consumes credits includes generating a project, generating a new screen, applying an inline edit, or making a prompt-based change. Previewing, running, and remixing are free. ## Credits by plan - **Free:** 20 per month, max 5 per day - **Starter:** 50 per month - **Pro:** 150 per month - **Enterprise:** Custom tiers, typically unlimited Full plan details at rapidnative.com/pricing. ## Reset cycle Credits reset on the first day of your billing cycle each month. ## What happens when I run out? You have a few options regardless of plan: - **Refer a friend.** Click **Refer to Earn Credits** in the editor to invite friends. When they sign up, both of you get non-expiring bonus credits, separate from your monthly plan. - **Wait for the next cycle.** Credits reset on the first day of your billing cycle. - **Upgrade your plan.** Free users can move to Starter or Pro for more monthly credits at rapidnative.com/pricing. ## Do credits carry over? No. Unused credits don't roll over. ## Does preview use credits? No. Previewing your app, running it, installing it to the homescreen, and remixing existing projects are all free. Only generation and edits consume credits. ## Enterprise Enterprise plans can be configured with custom credit allocations or fully unlimited usage based on your team's needs. Email support@rapidnative.com. --- --- Source: https://rapidnative.com/docs/faq/troubleshooting-performance # Troubleshooting & Performance ## The builder feels slow RapidNative bundles your app in a Web Worker in your browser. If that's slow, usually one of these is the cause: - **Too many screens open in the canvas.** Close a few or use Zoom out. - **Browser.** Chrome or Edge give the best performance today. - **Low-spec device with a very large project.** Try on a laptop. ## Preview or runtime fails to start - Reload the page. The runtime re-bundles cleanly on refresh. - Check your internet connection (initial package fetch needs network). - RapidNative auto-fixes most generation errors silently. If something still surfaces, click **Fix with AI** on the affected screen or in the chat panel. ## My database is empty Every project comes with mock data populated by default. If you're seeing an empty state, your app likely dropped into "fresh user" mode. Sign out of the in-browser test user and sign back in, or reset mock data from the schema panel. ## Auth, file upload, or real-time isn't working These are provided by Vibecode DB's backend adapters. New projects use the in-memory **MockAdapter** by default, which works out of the box. If you've swapped to **SupabaseAdapter**, double-check your URL and anon key are set. ## Generation fails or returns errors - Make your prompt more specific. - Check that you haven't hit your monthly request limit. You can upgrade at rapidnative.com/pricing. - Retry. If it keeps failing, email support@rapidnative.com with the project URL. ## The exported project behaves differently The in-browser runtime is a real React Native runtime, but minor differences can show up in exported Expo builds as upstream versions change. Run `npx expo start` locally and test on a real device to confirm. File any mismatch as a bug so we can track it. ## Crash recovery Your work auto-saves continuously. Reopen the project, and you'll resume exactly where you left off. Use Rollback if you need to jump back to an earlier version. ## Browser compatibility RapidNative works in all modern browsers. Chrome, Edge, Safari, and Firefox. Older browsers without Web Workers and WASM support are not supported. ## Reporting bugs Email support@rapidnative.com or use the Report a Bug page. Include the project URL and steps to reproduce. That's usually all we need.