> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/previewing-your-app/previewing-a-mobile-app.md).

# Previewing a mobile app

{% hint style="info" %}
This section describes previewing **mobile apps**. If you're looking for documentation on previewing **web apps**, see the article below:

Article: Previewing a web app
{% endhint %}

Previewing your app works much like the Bubble web app editor, letting you see and test changes as you make them. Keep in mind that some parts of the native mobile app editor rely on built-in features of mobile devices, which can vary between iOS and Android. As a result, not every element displays accurately in web preview.

There are three ways to preview your app:

<table><thead><tr><th width="170.73651123046875">Method</th><th>What it's for</th></tr></thead><tbody><tr><td><a href="#web-preview">Web preview</a></td><td>Test in the browser, right inside the editor. Fast for iterating on layout and logic.</td></tr><tr><td><a href="#bubblego">BubbleGo</a></td><td>Load your app on your device through Bubble's BubbleGo app.</td></tr><tr><td><a href="#dev-builds">Dev builds</a></td><td>Install a synced version of your own app on your device to test native features end to end.</td></tr></tbody></table>

## Web preview

### Differences from web app preview

Web preview works mostly like the preview in the Bubble web app editor, with a few key differences:

* There's no [update banner](#user-content-fn-1)[^1] in the preview when changes have been made to the app
* There's an extended bar for managing how the app will look across different devices (see below)

### Current web preview limitations

There are currently a few limitations in web preview:

* Native maps element will not render
* Native datetime picker will not render
* Push notifications cannot be sent to web preview
* Camera workflows will not work properly
* Permissions request workflows may not work properly
* Multi-line inputs in floating groups will not expand to fit height

### Device emulator bar

<figure><img src="/files/dwLCgPAVtmmX9wyhW9iX" alt=""><figcaption></figcaption></figure>

The bar at the top of the screen lets you emulate how the app will look on different devices, screen sizes, and with a specific zoom level.

1. **Show device frame**: Shows or hides the frame of the selected device (the frame, buttons, and notch, camera, or sensors of the device selected in setting 2).
2. **Select device**: Provides a list of widely used devices to emulate how the app will look and behave on that specific device.
3. **Screen size (px):** The actual screen size of the selected device. This is a locked field and updates according to the device selected in setting 2.
4. **Zoom level**: Zooms the emulator to a specific percentage or to fit the screen height. This zoom affects the entire emulated device, not just the screen.

We recommend testing your app across all devices, so it looks and works the way you expect everywhere.

## BubbleGo

BubbleGo is a native mobile app that lets you load and interact with your mobile app directly on your device. This mimics the experience of having the app installed on your phone, without needing to connect your project or publish it to the app store.

Use BubbleGo to get a feel for how your users will actually use your app, and to test more advanced interactions, flows, and system connections.

{% hint style="info" %}
BubbleGo can't send push notifications, and it can't run plugins that rely on their own third-party native libraries. To test either of those, use a [dev build](#dev-builds).
{% endhint %}

### Accessing BubbleGo for iOS

{% hint style="info" %}
In BubbleGo for iOS, you can refresh your app by shaking your iPhone.
{% endhint %}

1. Download the TestFlight app from the App Store.
2. Click on [this link](https://testflight.apple.com/join/uXuOrE3v).
3. Follow the link to download BubbleGo onto the TestFlight app.
4. Log into BubbleGo using your Bubble account credentials.
5. Select the mobile app you'd like to test and go.

### Accessing BubbleGo for Android

1. Download the app from the Google Play Store:
   * [Mobile link](https://play.google.com/store/apps/details?id=com.bubble.BubbleGo1)
   * [Computer link](https://play.google.com/apps/testing/com.bubble.BubbleGo1)
2. Log into BubbleGo using your Bubble account credentials.
3. Select the mobile app you'd like to test and go.

## Dev builds

A dev build is a version of your native mobile app that you install on your own device for testing. It looks and behaves like your real app, with your icon, your branding, and your plugins, but it stays synced with the Bubble editor, so changes appear on your phone right away. This lets you test your app the way your users will experience it, without publishing to the app stores.

The main thing that sets a dev build apart is that it can run your app's native features and plugins in full, which web preview and BubbleGo can't. Here's how the three compare:

<table><thead><tr><th width="136.43670654296875"></th><th>Web preview</th><th>BubbleGo</th><th>Dev build</th></tr></thead><tbody><tr><td>Where it runs</td><td>In your browser, in the editor</td><td>On your device, in the BubbleGo app</td><td>On your device, as your own app</td></tr><tr><td>Plugins</td><td>Shows a "can't render this" message</td><td>React Native and a few third-party libraries already installed by Bubble</td><td>All, including those with third-party native libraries</td></tr><tr><td>Best for</td><td>Quick iteration on layout and logic without leaving the browser.</td><td>Getting a feel for the app on a device</td><td>Testing native features like push notifications and deep linking</td></tr></tbody></table>

Because a dev build is compiled from your app specifically, it also uses your app's own URL scheme for deep linking and universal links, and runs against your app's real push notification configuration.

### Dev builds vs. production builds

A production build is pinned to one version of your app. To ship changes, you create a new build and release it through the app stores. A dev build works differently: it stays synced with the editor, so you rarely need a new one. Create it once, install it on your device, and keep testing as your app evolves.

Dev builds use the same bundle ID and package name as your production app, so push notifications and plugins run against your app's real configuration. This also means your dev build appears alongside production builds in TestFlight or the Google Play Console. To help you tell them apart, a dev build has a modified app icon and launch screen.

|                           | Dev build                                                           | Production build                           |
| ------------------------- | ------------------------------------------------------------------- | ------------------------------------------ |
| App version               | Any of your development branches                                    | Pinned to a single version                 |
| Getting changes live      | Appears as you edit, shake to refresh                               | Requires a new build and app store release |
| Bundle ID or package name | Your app's production identifiers                                   | Your app's production identifiers          |
| Icon and launch screen    | Modified, so you can tell it apart                                  | Your production branding                   |
|                           | <img src="/files/PDo5TglWIvczn1LbwTo7" alt="" data-size="original"> | ![](/files/VJUgQOuMSFliADHhufT9)           |

### Creating a dev build

{% hint style="warning" %}
Creating a dev build requires your app to be connected to the App Store and Google Play Store, since the build is delivered through TestFlight and the Google Play Console. If you haven't set this up yet, see [iOS App Store](/help-guides/publishing-your-app/native-mobile-app/ios-app-store.md) and [Google Play Store](/help-guides/publishing-your-app/native-mobile-app/google-play-store.md).
{% endhint %}

Dev builds are created per app.

{% stepper %}
{% step %}

#### Open the build manager

In the **Settings** tab, open **Manage builds and live versions**.
{% endstep %}

{% step %}

#### Start a new dev build

Click **+ Dev build** in the top-right corner.

<figure><img src="/files/FuxJqDVtCJVWcbKLy6FN" alt="The Manage builds and live versions page with the + Dev build button highlighted at the top right."><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Confirm and build

In the modal, add an optional description, confirm the version, and click **Build**.
{% endstep %}
{% endstepper %}

Building can take up to 15 minutes. You can track the status on the same page where your builds and live versions are managed, and we'll email you when the build is ready. From there, install it on your device the same way you install a regular test build:

<table><thead><tr><th width="154.35150146484375">Platform</th><th>How to install</th></tr></thead><tbody><tr><td>iOS</td><td>Through TestFlight</td></tr><tr><td>Android</td><td>Through the Google Play Console. You'll need to manually release the build to an internal testing track.</td></tr></tbody></table>

{% hint style="warning" %}
TestFlight builds expire 90 days after they're uploaded. If your dev build expires, create a new one.
{% endhint %}

### Testing with a dev build

{% stepper %}
{% step %}

#### Open the dev build

Open the dev build on your device. The launch screen shows your app's name with a *Dev build* tag.
{% endstep %}

{% step %}

#### Log in

Log in with your Bubble account credentials.
{% endstep %}

{% step %}

#### Select a branch

Select the branch you want to test. It loads immediately.

<figure><img src="/files/zLghmqiTydHegO9Nd4pq" alt="The dev build&#x27;s branch selection screen on a phone, with a Dev build tag and a popup explaining that shaking the phone reloads editor changes."><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Refresh to see updates

Shake your device to refresh and view new updates.
{% endstep %}
{% endstepper %}

Your dev build now loads your app as it exists in the editor for that branch. Changes you make in the editor become available in the dev build without a new deployment. Shake your device to refresh the app or return to the launch screen, for example to reload from scratch or switch to a different branch.

### When you need a new dev build

Most changes reach your dev build instantly, but some are baked into the native binary itself and can only be delivered by creating a new build. This includes:

* Adding or updating plugins that use third-party native libraries
* Changing native device permissions
* Bubble updates to its internal mobile engine

When this happens, the affected dev build is marked *Outdated* in **Manage builds and live versions**. An outdated dev build still receives your changes, but it won't reflect the ones listed above until you create a new build.

To help you keep track of what each build contains, every build card in **Manage builds and live versions** lists the plugins that were included when the build was created. Inside the dev build itself, branches that contain changes requiring a new build are flagged on the branch selection screen.

<figure><img src="/files/DKJ8Uns5KagjX1gVX05e" alt="The Manage builds and live versions page, listing mobile builds. The newest is tagged Dev and Outdated; one is marked Latest Version; older builds show a Deprecate button."><figcaption></figcaption></figure>

[^1]: Like the *We just updated the page* banner in the web app editor preview.