Ipad OS finally here!

[mario11]

@residenzio.2227

Hi everyone,

I recently contacted Bubble support regarding iPad support for Bubble Native, and they provided me with the solution. I wanted to share this detailed guide for anyone else looking to enable iPad compatibility for their native mobile apps.​

Prerequisites

Before starting, make sure you have:

• An active Bubble Native mobile app project
• Access to your Apple App Store Connect credentials (Bundle ID, Team ID, Key ID, Issuer ID, and Private Key)
• Your app settings properly configured

Step-by-Step Instructions

Step 1: Access the Editor with Feature Flags

You need to access your Bubble editor with special feature flags enabled in the URL. Add the following parameters to your editor URL:

&mobile_settings_validation=true&device_family=true

Complete URL format:

https://bubble.io/page?id=[YOUR_APP_ID]&tab=Design&name=Home&type=page&mobile_settings_validation=true&device_family=true

Replace [YOUR_APP_ID] with your actual app ID.

Important: These feature flags unlock the iPad device family option that isn’t normally visible in the standard editor.​

Step 2: Navigate to Apple App Store Settings

Once you’re in the editor with the feature flags enabled:

1. Go to Settings in the left sidebar
2. Click on Apple app store
3. You’ll see the “Apple app store settings” screen with fields for your App Store Connect API credentials

Step 3: Connect to App Store (If Not Already Connected)

If you haven’t connected your app to App Store Connect yet, you’ll need to enter the following information

• Private Key: Your App Store Connect API private key
• Key ID: Your API Key ID
• Issuer ID: Your Issuer ID from App Store Connect
• Bundle ID: Your app’s Bundle ID (e.g., com.yourcompany.appname)
• Team ID: Your Apple Developer Team ID

After entering all the information, click the Connect button.​

Troubleshooting: If you see a red error message after clicking Connect, double-check that all your credentials are correct. Common issues include:

• Incorrect Key ID or Issuer ID formatting
• Expired or revoked private keys
• Mismatched Bundle IDs

Step 4: Refresh the Editor Tab

After successfully connecting (or if you were already connected), refresh your browser tab completely. This step is crucial for the device family options to appear correctly.

Step 5: Select iPhone and iPad

Once the page reloads, scroll down to the “Targeted device families” section. You should now see two options

• ☐ iPhone
• ☐ iPhone and iPad

Select “iPhone and iPad” to enable iPad support for your app.

Note: If you don’t see the iPad option after refreshing, go back to Step 1 and make sure the feature flags (&mobile_settings_validation=true&device_family=true) are still in your URL, then refresh again.

Step 6: Deploy a New Full Build

After selecting iPad support, you must deploy a completely new build of your mobile app for the changes to take effect.​

1. Navigate to Settings > Builds and live versions
2. Create a new full build (not just an update)
3. Submit the new build to App Store Connect

Important Considerations

Critical: Once you publish a build with iPad support enabled, you cannot remove iPad support in future builds. Apple’s App Store policies require that once an app supports iPad, all subsequent versions must continue to support it.

One-time setup: After you’ve successfully enabled iPad support once, you won’t need to add the feature flag parameters to your URL again. The setting will persist in your app configuration.​

Summary Checklist

• Add feature flags to editor URL (&mobile_settings_validation=true&device_family=true)
• Navigate to Settings > Apple app store
• Connect to App Store (if not already connected)
• Refresh the browser tab
• Select “iPhone and iPad” in Targeted device families
• Deploy a new full mobile build
• Submit to App Store Connect​

Hope this helps anyone else looking to enable iPad support! Feel free to ask if you have any questions.

Thanks @Oliver-wholegraintech and @nick.carroll for the guidance.

I found this post very interesting and finally we can do it on iPad too. My question is how can we see the app even on iPad and have screenshots? Does anyone know anything?

[mario11]

I managed to solve it simply by increasing the pixels of the web preview with the Google Chrome developer console if someone needed it. P.S. the build is now live also for iPad on iOS, really happy about that! @Nick.carroll do you think it’s planned to add tablet or iPad previews on the webview? @Fede.bubble