Visual building done right.

When you make changes in Draftbit, you aren't just building your app, but you're building your source code too. That's why both developers and non-developers love Draftbit.

New App
Screens (23)
Welcome
Login
Push Notifications
Location Permissions
Messages
Contacts
Groups
Inbox
Schedule
Tasks List
Now Playing
Gallery
Article View
Feed
List
People Feed
Products List
Profile
Homepage
Order Details
Store View
Splash Screen
Contact
Components
Screen
Live Preview
Scan the QR code with your device.
Close
Restart Session
Need the live preview app?
Download expo for iOS or Android to connect, or enter your email / phone and we'll send you a link.
Email or phone number
Design
Navigate
Preview
Title
Now Playing
List Item
Progress
Push Notifications
Location Permissions
Text SMS
-
0
+
Add to Cart
Hello!
A
Task #1
Task #2
Profile
First, Last
Email
Edit
Title
Now Playing
List Item
Progress
Push Notifications
Location Permissions
Text SMS
-
0
+
Add to Cart
Hello!
A
Task #1
Task #2
Profile
First, Last
Email
Edit
Publish
Commit
Today
Progress
112 5th Ave
Directions ›
Add Notes
 
Icon
View
Text
Image BG
Image
Map
Video
Web View
Avatar
Divider
Scroll View
Blur View
Container
KB Avoiding View
Icon
View
Text
Image BG
Image
Map
Video
Web View
Avatar
Divider
Scroll View
Blur View
Container
KB Avoiding View
List
Query
Radio Button
Checkbox
Touchable
Switch
TextInput
Slider
Carousel
Fields
Buttons
Progress
Cards
Custom Block
List
Query
Radio Button
Checkbox
Touchable
Switch
TextInput
Slider
Carousel
Fields
Buttons
Progress
Cards
Custom Block

Build anything.

Bits

Low-level components that let you build anything from scratch.

Blocks

Higher order components to help you move fast.

Add Custom Code

Inject custom source code into any screen in your app.

Create your design system.

Themes

Customize the look-and-feel of your app.

Fonts and Icons

Low-level control of every detail of your app.

Saved Components

Build your own blocks, then save them for reuse throughout your app.

System Theme
New Theme
CerebriSans
Bold
Headline1
Aa
7811 Icons
Elevation 1
Elevation 2

Connect it up.

Navigation

Build complex navigators, including tabs and stacks of screens.

Actions and Interactions

Attach interactions to any component in your app.

State Management

Control the appearance of your app with logic or external data.

Navigation
Project Log
Add Photo
$2,000
Phase 1
$4,000
Phase 2
Tasks
Projects
Messages
Today
Progress
112 5th Ave
Directions ›
Add Notes
 

Data-enabled.

Pipe Installation
Phase 2
1. Remove Existing Piping
Edit
 
Existing piping has been removed.
 
Inspection completed and site has
 
been prepared for Phase 3.
Project Log
All Projects
+
View All
Hide Fields
Filter
Group
Project Name
Project Details
Attachment(s)
Last Updated
Status
Demolition Work
Job site is now pre..
3/10/2020
Completed
Pipe Installation
Existing piping has..
Today
import { Camera } from 'expo-camera';
import { Fetch } from 'react-request';

Access APIs Directly

Interact with any external data source connected via REST API.

Add Integrations

Connect your app directly to third-party platforms with supported custom integrations.

Source code at your fingertips.

View Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
import React from 'react';
import {
 withTheme,
 Container,
 Button,
 ScreenContainer,
 Image,
 FieldSearchBarFull,
} from '@draftbit/ui';
import { StyleSheet, ScrollView, Text, View } from 'react-native';
import Images from '../config/Images';

class Listings extends React.Component {
 state = { searchBarValue: undefined };

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

   return (
      <ScreenContainer scrollable={false} hasSafeArea={true}>
       
          showsVerticalScrollIndicator={true}
          showsHorizontalScrollIndicator={true}
          bounces={true}
          horizontal={false}
          contentContainerStyle={styles.scrollViewGw}
      >
        <Container
         elevation={0}
          useThemeGutterPadding={true}
          style={styles.containerBG}
      >
        
          accessible={true}
          style={StyleSheet.flatten([
            theme.typography.headline1,
            { color: theme.colors.primary }
          ])}
        >
          Search Listings
        
      
    
        elevation={0}
        useThemeGutterPadding={true}
        style={styles.containerWH}
    >
     
        useThemeGutterPadding={true}
        elevation={0}
        style={Stylesheet.flatten([
          styles.containerJz,
          {
            backgroundColor: theme.colors.primary,
            borderRadiustheme.borderRadius.button,
          },
        ])}
      >
       
         icon="Feather/search"
         placeholder="Search"
         value={this.state.searchBarValue}
         onChange={searchBarValue => this.setState({ searchBarValue })}
      />
    
    style={styles.viewTQ}>
      
        type="solid"
        color={theme.colors.light}
        labelColor={theme.colors.primary}
      >
         Place
        
       
        type="solid"
        labelColor={theme.colors.primary}
        color={theme.colors.light}
        style={styles.nbuttonGj}
      >
         Room
      
     
    
    style={styles.viewYi}>
       <container></container>
        elevation={0}
        useThemeGutterPadding={true}
        style={StyleSheet.flatten([
          styles.containerFR,
          {
            borderColor: theme.colors.light,
            backgroundColortheme.colors.light,
          },
        ])}
      >
        
          elevation={0}
          useThemeGutterPadding={true}
          style={styles.container74}
        >
          
            resizeMode="contain"
             source={Images.SkylineLofts}
             style={styles.imageTb}
          />
           
             useThemeGutterPadding={true}
             elevation={0}
             style={styles.containerR0}
           >
             
               style={StyleSheet.flatten([
                 styles.textBo
                 theme.typography.headline4,
                 { colortheme.colors.primary },
               })}
             >
               Skyline Lofts
             
             
               style={StyleSheet.flatten([
                 theme.typography.body2,
                 { colortheme.colors.primary },
               ])}
             >
               Chicago, IL
             
            
           
           elevation={0} useThemeGutterPadding={true}
>
           
             style={StyleSheet.flatten([
               theme.typography.body2,
               { color: theme.color.primary },
             ])}
           >
             2 bedrooms · 2 beds · 1 bath
           
          
         
        
       
      
     );
  }
}

const styles = StyleSheet.create({
  container74: {
    flexDirection: 'row',
    alignItems; 'center',
    justifyContent: 'space-between',
  },
 container8G: {
   alignItems: 'center',
    flexDirection:'row',
   paddingTop: 20,
   paddingBottom: 20,
  },
  containerJz: {
    marginBottom: 20,
  },
  scrollViewGw: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
  },
  containerFr: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingTop: 10,
    marginTop: 10,
    marginBottom: 10,
  },
  textBo: {
    marginBottom: 4,
  },
  imageTb: {
    height: 120,
    width: 120,
  },
 containerR0: {
    alignItems: 'flex-start',
  },
  buttonGj: {
    marginLeft: 10,
  },
  containerWh: {
    alignSelf: 'stretch',
    paddingBottom: 20,
    paddingTop: 20,
    flexGrow: 0,
    paddingRight: 10,
    paddingLeft: 10,
    alignItems: 'flex-start',
  },
  viewTQ: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
});

export default withTheme(Listings);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
import React from 'react';
import {
 withTheme,
 Container,
 Button,
 ScreenContainer,
 Image,
 FieldSearchBarFull,
} from '@draftbit/ui';
import { StyleSheet, ScrollView, Text, View } from 'react-native';
import Images from '../config/Images';

class Listings extends React.Component {
 state = { searchBarValue: undefined };

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

   return (
      <ScreenContainer scrollable={false} hasSafeArea={true}>
       
          showsVerticalScrollIndicator={true}
          showsHorizontalScrollIndicator={true}
          bounces={true}
          horizontal={false}
          contentContainerStyle={styles.scrollViewGw}
      >
        <Container
         elevation={0}
          useThemeGutterPadding={true}
          style={styles.containerBG}
      >
        
          accessible={true}
          style={StyleSheet.flatten([
            theme.typography.headline1,
            { color: theme.colors.primary }
          ])}
        >
          Search Listings
        
      
    
        elevation={0}
        useThemeGutterPadding={true}
        style={styles.containerWH}
    >
     
        useThemeGutterPadding={true}
        elevation={0}
        style={Stylesheet.flatten([
          styles.containerJz,
          {
            backgroundColor: theme.colors.primary,
            borderRadiustheme.borderRadius.button,
          },
        ])}
      >
       
         icon="Feather/search"
         placeholder="Search"
         value={this.state.searchBarValue}
         onChange={searchBarValue => this.setState({ searchBarValue })}
      />
    
    style={styles.viewTQ}>
      
        type="solid"
        color={theme.colors.light}
        labelColor={theme.colors.primary}
      >
         Place
        
       
        type="solid"
        labelColor={theme.colors.primary}
        color={theme.colors.light}
        style={styles.nbuttonGj}
      >
         Room
      
     
    
    style={styles.viewYi}>
       <container></container>
        elevation={0}
        useThemeGutterPadding={true}
        style={StyleSheet.flatten([
          styles.containerFR,
          {
            borderColor: theme.colors.light,
            backgroundColortheme.colors.light,
          },
        ])}
      >
        
          elevation={0}
          useThemeGutterPadding={true}
          style={styles.container74}
        >
          
            resizeMode="contain"
             source={Images.SkylineLofts}
             style={styles.imageTb}
          />
           
             useThemeGutterPadding={true}
             elevation={0}
             style={styles.containerR0}
           >
             
               style={StyleSheet.flatten([
                 styles.textBo
                 theme.typography.headline4,
                 { colortheme.colors.primary },
               })}
             >
               Skyline Lofts
             
             
               style={StyleSheet.flatten([
                 theme.typography.body2,
                 { colortheme.colors.primary },
               ])}
             >
               Chicago, IL
             
            
           
           elevation={0} useThemeGutterPadding={true}
>
           
             style={StyleSheet.flatten([
               theme.typography.body2,
               { color: theme.color.primary },
             ])}
           >
             2 bedrooms · 2 beds · 1 bath
           
          
         
        
       
      
     );
  }
}

const styles = StyleSheet.create({
  container74: {
    flexDirection: 'row',
    alignItems; 'center',
    justifyContent: 'space-between',
  },
 container8G: {
   alignItems: 'center',
    flexDirection:'row',
   paddingTop: 20,
   paddingBottom: 20,
  },
  containerJz: {
    marginBottom: 20,
  },
  scrollViewGw: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
  },
  containerFr: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingTop: 10,
    marginTop: 10,
    marginBottom: 10,
  },
  textBo: {
    marginBottom: 4,
  },
  imageTb: {
    height: 120,
    width: 120,
  },
 containerR0: {
    alignItems: 'flex-start',
  },
  buttonGj: {
    marginLeft: 10,
  },
  containerWh: {
    alignSelf: 'stretch',
    paddingBottom: 20,
    paddingTop: 20,
    flexGrow: 0,
    paddingRight: 10,
    paddingLeft: 10,
    alignItems: 'flex-start',
  },
  viewTQ: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
});

export default withTheme(Listings);
New App
Screens (8)
Listings
Places
Rooms
Settings
Login
Components
Screen
ScrollView
Container
Text
Container
Container
Search Bar
View
Filter Button
Filter Button
View
Listing Card
Preview Image
Container
Text
Fetch
Text
Live Preview
Scan the QR code with your device.
Close
Restart Session
Need the live preview app?
Download expo for iOS or Android to connect, or enter your email / phone and we'll send you a link.
Email or phone number
Design
Navigate
Preview
West Coast Villa
San Diego, CA
Amenities
Free parking on premises
P
Wifi
W
5 nights
Reserve
Search Listings
Place
Room
2 bedrooms · 2 beds · 1 bath
3 bedrooms · 3 beds · 2 baths
Publish
Commit

Instant Screen Code

Source code generates live as you build. Copy it to the clipboard with a mouse click.

Full Source Code Download

Export your entire build as one clean, repo-ready package.

Completely Open Source

All source code is based on open-sourced libraries and languages.

Iterate, experiment and share.

Rentbit V1
10 Screens
Rentbit V2
20 Screens
Live Preview
Scan the QR code with your device.
Close
Restart Session
Need the live preview app?
Download expo for iOS or Android to connect, or enter your email / phone and we'll send you a link.
Email or phone number
Rentbit_V2.zip

Preview As-You-Go

Pixel-perfect renders on your mobile device using Live Preview.

Publish Quickly

Deploy a draft build to the web in moments.

Share Easily

Get a private landing page for your project that you can share with anyone.

Collaborate with others.

Invite Your Team

Add collaborators to your workspaces to build together.

Freelancer & Agency Support

Unlimited workspaces and unlimited collaboration for one fixed price.

Launch your app.

Calendar
Clock
Settings
Camera
App Store
Activity
Photos
Facetime
Reminders
Stocks
Find My
Maps
Expo
6,174
‹ Apps
Rentbit
Discover your next stay.
Get
5.0
4+
56 Ratings
Age

Publish Multiple Versions

With version control and Draft apps.

App Store Binaries

Compile your app's source code into APK & IPA and you're ready for the App Stores or Test Flight.

Enterprise Distribution

Custom binaries and managed distribution for Enterprises.

Custom Domains

Publish your PWA to your own domain.

Get help as you go.

A suite of free resources to help you get the most out of Draftbit.

Skip the engineering hassle and go from idea to app store in days.