Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building for...
        • Web
        • Native iOS and Android
          • Mobile app quick start guide
          • What is a native mobile app?
          • Native mobile vs. web development
          • Differences in native and web elements
          • Native mobile app terminology
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • Web app
          • The page
          • Containers
            • Groups
            • Repeating groups
            • Table elements
            • Popups
            • Floating groups
            • Group focus
          • Visual elements
          • Input forms
            • Text and numbers
            • Dates and time
            • File uploads
            • Selection controls
        • iOS and Android app
          • The view
          • Containers
          • Visual elements
          • Input forms
          • Mobile reusable elements
        • The element hierarchy
          • The element tree
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
      • Device resources
        • Location services
        • Camera/photo library
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Previewing your app
      • Previewing a web app
      • Previewing a mobile app
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • Native mobile elements
        • View element
        • List component
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • On-device resources
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps
Powered by GitBook
On this page
  • Getting started quickly
  • 1 – Your frontend: Mobile building blocks
  • 2 - Adding native mobile features
  • 3 – Adding mobile logic: Workflows
  • 4 - Testing your app
  • 5 - Publishing to app stores
  • 6 - Updating your app after launch
  • 7 - Getting discovered: App Store Optimization (ASO)

Was this helpful?

  1. User manual
  2. Getting started
  3. Building for...
  4. Native iOS and Android

Mobile app quick start guide

Last updated 1 day ago

Was this helpful?

Building a native mobile app with Bubble opens the door to new ways of designing, structuring, and delivering experiences — all while using the same powerful visual development tools you're already familiar with. This guide walks you through each step of the journey, from setting up your app’s interface to launching it on the App Store and Google Play.

Getting started quickly

1 – Your frontend: Mobile building blocks

If you’ve already built a web app in Bubble, building for mobile is a little different. Your backend setup—things like your database, workflows, conditions, and logic—can stay exactly the same. What changes is the frontend. Mobile apps follow different design patterns and user expectations, so the interface will need to be reimagined using mobile-specific building blocks like mobile views, sheets, and native navigation elements. The layout is more constrained, the interaction patterns are different, and performance expectations are higher—especially on smaller screens and devices.

If you're starting fresh with mobile, you'll use a set of native-first building blocks. Instead of web pages, you'll structure your app using mobile views. Navigation is handled with tab views, stack views, and modal views. To display data and content, you’ll use elements like short lists, selectable lists, and sheets. These tools are designed to help you build intuitive, native experiences that feel fast and familiar to users on mobile devices—all while using Bubble’s visual editor and connected backend.

Mobile views:

Instead of web “pages,” mobile apps have “views.” In your app interface manager, add and manage views like:

  • for primary navigation

  • for a smooth "back" button experience

  • for focused tasks like forms or settings

Mobile elements:

Swap out common web elements with native mobile elements:

  • instead of popups

  • and selectable lists instead of repeating groups

Need inspiration? Check out platforms like Mobbin to see how leading mobile apps structure their layouts.

2 - Adding native mobile features

A key difference between web and native mobile apps is that native apps can interact directly with the device they’re installed on. This gives you access to features like the camera, photo library, location services, and push notifications.

With Bubble, you're not limited to wrapping a web app. You can build a true native experience that takes full advantage of mobile capabilities and feels integrated, responsive, and intuitive to users.

Dropdowns:

Both approaches give you more control over the design and behavior of the selection experience—especially helpful on mobile where space and interaction patterns are different from the web.

Swipe actions:

Swipe actions are available for Vertical and Section Lists, and each list item can include up to three swipe actions on each side:

  • Leading (left) actions

  • Trailing (right) actions

To add swipe actions:

  1. Add a Vertical or Section List to your view.

  2. Select the List Item template. On the canvas, hover over the list item and click the leading or trailing swipe area to edit it.

  3. Drag visual elements (icons, labels, etc.) into the swipe frame to represent the action.

  4. In the workflow editor, use the When swipe action is tapped event to define the behavior (e.g., delete a task or mark it complete).

  5. Optionally, you can enable full swipe to trigger — letting the user trigger the action by swiping all the way across.

Swipe actions come with built-in animation and default behavior, making them quick to set up and easy to use. Layout controls are intentionally limited to ensure consistency and avoid clutter.

Device capabilities:

Native mobile apps can access on-device features like the camera, photo library, location services, and push notifications, helping you create more interactive, native-feeling experiences.

  • Camera an photo library: Use the Take photo and Pick photo actions in workflows to let users capture or upload images. Permission prompts are triggered automatically and can be customized in the Language settings.

  • Location services: Use the Get current location action or Current geographic position data source to access the device's location. You can also check permission status using Has granted location permission.

Read more in this article.

Embedding web views:

Keep in mind:

  • WebViews can only display pages from your own Bubble app — external URLs are not supported.

  • Users can’t navigate to other pages inside the WebView, so make sure all needed content is on the same page.

  • Native features like location, camera, or push notifications will not work inside a WebView. Use native mobile components if you need access to those.

3 – Adding mobile logic: Workflows

Once your mobile layout is ready, it's time to bring it to life with .

Frontend workflows:

Instant interactions that run on the user's device, such as:

  • Tapping a button

  • Requesting (e.g., camera or location)

Backend workflows:

Behind-the-scenes processes shared between web and mobile, including:

  • Integrating with a

4 - Testing your app

Testing is crucial to ensure your app performs smoothly across devices and scenarios.

Great for checking basic layouts and workflows, but it won't simulate mobile-only features like push notifications.

Download BubbleGo to preview your app on real devices — including full mobile functionality like camera access and swipe actions.

When you're ready to test with broader audiences, use Apple TestFlight or Google's internal testing tools. Make sure your Apple Developer and Google Play Console accounts are set up early — approvals can take time.

5 - Publishing to app stores

Publishing to the app store involves several steps that take place outside of the Bubble platform, and the process can be a bit complex. To make things easier, we’ve created a detailed guide that walks you through each part of the process.

Article series: Publishing your native mobile app

Once you've tested thoroughly, it's time to share your app with the world!

Prepare your global mobile settings:

Fill out required settings like app names, icons, app schemes, and platform-specific metadata.

Follow our publishing guides:

  • Publish to the App Store (iOS)

  • Publish to the Play Store (Android)

Plan for platform requirements:

Each store has its own guidelines and review processes, so make sure you meet their standards before submission.

When your app is live, celebrate by sharing it with the Bubble community!

6 - Updating your app after launch

Push minor changes - like text edits or design tweaks — without needing App Store or Play Store re-approval.

Major updates, like adding new features, require a new build submission and app store approval.

Quick tip: Bubble supports multiple live versions, allowing you to update new users while letting existing users continue using previous versions if needed.

7 - Getting discovered: App Store Optimization (ASO)

After publishing, your next goal is to help users find your app.

Keywords:

65% of downloads come from search. Use strong keywords in your app's title and description.

Visuals:

Your app icon and screenshots are often your first impression — make them count.

Metadata and descriptions:

Highlight your app's biggest benefits right away and back them up with real numbers or examples when possible.

Building and launching a native mobile app with Bubble puts you in control of the entire process — from idea to live product — all within a single visual development platform. By following the steps in this guide, you'll not only create a mobile app that looks and feels polished, but also one that scales alongside your ambitions.

You’re building something incredible. Let’s bring it to life 🚀

– These are mobile-native elements that slide up from the bottom of the screen and feel familiar to mobile users. To use one, add the Sheet element from the visual elements panel. Sheets can contain other elements just like a regular group.

– For cases where users need to pick from a list (like choosing a category or filter), you can add a Sheet or Modal element, then place a Selectable List inside it. This creates a mobile-friendly alternative to dropdowns that’s easier to use on smaller screens.

let users swipe left or right on list items to trigger actions like deleting or archiving — a familiar mobile interaction pattern.

To send push notifications, you must first request permission using the Request push notification permission action. Then, use Send push notification to deliver messages to the user’s device.

You can embed web pages inside mobile views using the . This is useful if you’ve already built parts of your app for the web and want to reuse them without recreating everything from scratch. Simply add a WebView element to your mobile view and point it to the relevant page in your app.

on a list item

:

:

:

Web preview
BubbleGo (iOS and Android)
Modals with selectable lists
WebView element
Push notifications:
Stack views
Modal views
OTA (Over-the-Air) Updates
New builds:
Bottom sheets
Swipe actions
Swiping
Sheets
Short lists
Tab views