Using Live Preview

The builder allows you to view and modify the layout of your screen live in the browser. However, when designing and building mobile apps, it's much better to separate layout from aesthetics and look directly at your phone for a sense of how it will actually look. That's exactly what live preview allows you to do: view the screens live, on your phone, and they are instantly updated when you make changes.

How do I get Live Preview set up?

1. Download the Expo app to your phone. To use live preview, you need to install the Expo Client app. You can download it for iOS or Android.

2. Locate Your Device ID. Open the Expo Client app, and navigate to the Projects tab at the bottom. In small lettering, you should see "Device ID: XXXX-XXXX". See screenshot examples below.

3. In Draftbit, open the Live Preview modal. Along the top of the builder, click Live Preview. In the modal window, you should see a field labeled Device Id. Enter your Device ID, including the dash, and hit Save.

4. That's it! Now when you are editing app projects, you'll see them automatically in your list of projects in the Expo Client app, and you can open them from there. You can also use the QR code for faster access, see below.

Alternatively, you can use the QR Code:

1. Download the Expo app to your phone. To use live preview, you need to install the Expo Client app. You can download it for iOS or Android.

2. Scan the QR code. Along the top of the builder, click Live Preview. In the modal window, you should see a QR code. Open your phone or QR code reader app, and scan the QR code.

3. That's It! When detected, this QR code will open the project in Expo, and will let you (or anyone you know) live preview the project you're working on. This is a great way to collaborate with friends or coworkers.

Updated 29 days ago