Draftbit is a visual app builder for creating native mobile apps with React Native. It combines drag-and-drop design with the ability to export clean, production-ready code for custom development or app store deployment.
Create Your Account
Go to draftbit.com and click Get Started. Sign up with your email or GitHub account. Draftbit sends a verification email, so confirm your account to unlock the builder.
After logging in, Draftbit displays your project dashboard. Click New Project and choose a template like “Social Feed,” “E-commerce,” or “Fitness Tracker.” Templates include pre-built screens, navigation, and sample API integrations.
Name your project and select a starting screen size (iOS or Android preview). Draftbit’s builder is responsive, so your app adapts to both platforms automatically.
Set Up Your First Project
The Draftbit builder opens with a Component Tree on the left, a Canvas in the center, and a Properties Panel on the right. The component tree shows your app’s structure: screens, stacks (navigation), and nested components.
Click Data in the top menu and add an API endpoint. Draftbit supports REST and GraphQL APIs out of the box. For testing, use Draftbit’s sample API or connect your own backend. Configure headers, authentication tokens, and query parameters in the API settings.
Under Theme, customize your app’s color palette, typography, and spacing. Draftbit uses a design token system, so changes to the theme automatically update all screens.
Build Your First Screen
Select the default Home Screen in the component tree. Drag a View component onto the canvas to create a container, then add a Text component inside it. Update the text to “Welcome to Draftbit” and adjust font size and color in the properties panel.
Add a Button below the text and label it “View List.” Click the button and set its On Press action to Navigate > List Screen. Create the List Screen by clicking + Screen in the component tree.
On the List Screen, drag a Fetch component onto the canvas. Connect it to your API endpoint by selecting the endpoint in the properties panel. Add a FlatList inside the Fetch component to display API data. Map list items to fields like title, description, or image.
Connect and Publish
Go to Build in the top menu to configure your app for deployment. Add your app name, package identifier (for iOS), and bundle ID (for Android). Upload an app icon and splash screen to complete the branding.
Under Integrations, connect third-party services like Firebase, Stripe, or RevenueCat for analytics, payments, or subscriptions. Draftbit generates the necessary configuration files automatically.
Click Preview to test your app in the Draftbit mobile app (available on iOS and Android). Scan the QR code with your device to see your app in real time. When ready, click Export Code to download your React Native source code or use Draftbit’s built-in deployment to publish directly to the App Store or Google Play.
Next Steps
You’ve built and tested your first Draftbit app. Dive deeper into Draftbit’s custom code blocks to add JavaScript logic, use Draftbit’s state management for complex UI, and explore the component marketplace for pre-built features like maps, charts, and payment forms. Upgrade to a Pro plan for unlimited projects, team collaboration, and priority support.