Build your app, visually.

Create, customize, and launch mobile apps all from your browser. Source code included.

Add
Layers
Screens
Themes
Navigation
Assets
Settings
Profile
New App
Layout
Screen
ScrollView
Container
Image
Fetch
Icon Button
View
View
Text
Text
Fetch
View
Touchable
Map
Fetch
View
View
Text
Icon
View
View
Text
Icon
Publish
Search Listings
Place
Room
2 bedrooms · 2 beds · 1 bath
3 bedrooms · 3 beds · 2 baths
New App
Bits
Blocks
Basic
Basic
Icon
View
Text
Media
Image
Video
Layout
Lists & Data
Fetch
List
Draftbit Blocks
Carousel
Fields
Buttons
Headers
Progress
Cards
Your Blocks
Listing Card
Listings Filter
Apply Button
Dock
Inputs & Controls
Touchable
Search Bar
Switch
Checkbox
Search Listings
Place
Room
2 bedrooms · 2 beds · 1 bath
3 bedrooms · 3 beds · 2 baths
APIs & Services
Connected
REST API
https://api.github.com/...
Header
Skyline Lofts
Location
Chicago, IL
Bedrooms
2
Beds
2
Baths
1
Image
skyline-lofts.jpg
Header
West Coast Villa
Location
San Diego, CA
Bedrooms
3
Beds
3
Baths
2
Image
west-coast-villa.jpg
Header
Skyline Lofts
Location
Chicago, IL
Bedrooms
2
Beds
2
Baths
1
Image
skyline-lofts.jpg
Header
West Coast Villa
Location
San Diego, CA
Bedrooms
3
Beds
3
Baths
2
Image
west-coast-villa.jpg
Build

Bring your screens to life.

Start quickly with Bits, Blocks and Examples to help you move fast.

Customize every detail with advanced properties, themes and custom code.

Preview as you go on your device, or on the web.

Connect it up by adding actions, interactions, navigation and live data.

Welcome to Rentbit.
import React from 'react';
import {
 StatusBar,
 View,
 StyleSheet,
 KeyboardAvoidingView,
 Text,
} from 'react-native';
import { withTheme, ScreenContainer, Image, TextField } from '@draftbit/ui';
import Images from '../config/Images';

class Login extends React.Component {
 state = {};

 componentDidMount() {
   StatusBar.setBarStyle('dark-content');
 }

 render() {
   const { theme } = this.props;

   return (
<ScreenContainer
       scrollable={false}
       hasSafeArea={true}
       style {styles.screenContainerZc}
>
<KeyboardAvoidingView
         keyboardVerticalOffset={0}
         behavior="padding"
         enabled={true}
         style={styles.keyboardAvoidingView4W}
>
<View style={styles.viewU5}>
<Image
             resizeMode="contain"
             source={Images.LogoPrimary}
             style={styles.image0V}
           />
<Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
>
             Welcome to Rentbit.
</Text>
<TextField
             leftIconMode="inset"
             placeholder="Login with Facebook"
             label="Social Login"
             type="underline"
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             style={styles.textFieldDt}
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Create Your Account"
             label="Create Account"
             error={false}
             type="underline"
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Log In"
             label="Log In"
             error={false}
             type="underline"
           />
</View>
</KeyboardAvoidingView>
</ScreenContainer>
   );
 }
}

const styles = StyleSheet.create({
 viewU5: {
   paddingRight: 16,
   paddingLeft: 16,
   flexGrow: 1,
   justifyContent: 'center',
 },
 screenContainerZc: {
   justifyContent: 'space-between',
 },
 keyboardAvoidingView4W: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 image0V: {
   width: 150,
 },
 textFieldDt: {
   height: 82,
   marginBottom: 16,
 },
});

export default withTheme(Login);
import React from 'react';
import {
 StatusBar,
 View,
 StyleSheet,
 KeyboardAvoidingView,
 Text,
} from 'react-native';
import { withTheme, ScreenContainer, Image, TextField } from '@draftbit/ui';
import Images from '../config/Images';

class Login extends React.Component {
 state = {};

 componentDidMount() {
   StatusBar.setBarStyle('dark-content');
 }

 render() {
   const { theme } = this.props;

   return (
<ScreenContainer
       scrollable={false}
       hasSafeArea={true}
       style {styles.screenContainerZc}
>
<KeyboardAvoidingView
         keyboardVerticalOffset={0}
         behavior="padding"
         enabled={true}
         style={styles.keyboardAvoidingView4W}
>
<View style={styles.viewU5}>
<Image
             resizeMode="contain"
             source={Images.LogoPrimary}
             style={styles.image0V}
           />
<Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
>
             Welcome to Rentbit.
</Text>
<TextField
             leftIconMode="inset"
             placeholder="Login with Facebook"
             label="Social Login"
             type="underline"
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             style={styles.textFieldDt}
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Create Your Account"
             label="Create Account"
             error={false}
             type="underline"
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Log In"
             label="Log In"
             error={false}
             type="underline"
           />
</View>
</KeyboardAvoidingView>
</ScreenContainer>
   );
 }
}

const styles = StyleSheet.create({
 viewU5: {
   paddingRight: 16,
   paddingLeft: 16,
   flexGrow: 1,
   justifyContent: 'center',
 },
 screenContainerZc: {
   justifyContent: 'space-between',
 },
 keyboardAvoidingView4W: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 image0V: {
   width: 150,
 },
 textFieldDt: {
   height: 82,
   marginBottom: 16,
 },
});

export default withTheme(Login);
Launch

Publish a build in minutes and share it with the world.

Get it ready

With all of your app settings and code review.

On the web

Deploy a PWA of your app in under 60 seconds.

Test the water Coming Soon

Deploy into Apple’s Testflight or Google Play’s beta program.

Submit for release Coming Soon

App store review and publishing, with help from our team of app store veterans.

New App
24 Screens
Invite
New-App.zip
Iterate

Work together to explore & grow your product.

Add team members to collaborate & share feedback. Publish multiple versions to share externally and run user tests. If you need professional help, we’ll help you find a Draftbit Expert to work with.

On our very first project we saved hundreds of hours of engineering time — the value of Draftbit cannot be overstated.
Javier Otero
CEO and Founder, Futurehaus
Javier Otero
CEO and Founder, Futurehaus

Request access to the private beta.

```