Skip to main content
App Clips are lightweight versions of your app that launch instantly from QR codes, NFC tags, and Safari Smart App Banners, without requiring a full installation.

​
What are App Clips?

App Clips enable users to experience your app instantly:
  • 10 MB size limit (compressed, 50 MB uncompressed)
  • No installation required - Launch in seconds
  • Limited lifespan - Removed after inactivity
  • Full app upgrade path - Seamless transition to full app
  • Deep linking - Launch with context from URLs
App Clips are complex to set up correctly. Follow this guide carefully, as missing steps will prevent your App Clip from working.

​
Extension point

PropertyValue
Extension PointNone (standalone app)
Product Typecom.apple.product-type.application.on-demand-install-capable
FrameworksAll iOS frameworks available
App GroupsEnabled by default
React NativeSupported with exportJs: true

​
Creating an App Clip

1

Generate the App Clip

npx create-target clip
2

Configure the App Clip

Edit targets/clip/expo-target.config.js:
/** @type {import('@bacons/apple-targets/app.plugin').Config} */
module.exports = {
  type: "clip",
  // Enable React Native bundling for production
  exportJs: true,
  entitlements: {
    // CRITICAL: Associated domains for App Clip invocation
    "com.apple.developer.associated-domains": [
      "appclips:yourdomain.com"
    ],
  },
};
3

Set your Apple Team ID

In app.json, add your Apple Team ID:
{
  "expo": {
    "ios": {
      "appleTeamId": "YOUR_TEAM_ID"
    }
  }
}
4

Rebuild the project

npx expo prebuild -p ios --clean
5

Configure code signing in Xcode

Open Xcode and select signing for BOTH the main app and App Clip targets:
xed ios
This ensures the first build has correct provisioning profiles.

​
AASA configuration

Create a .well-known/apple-app-site-association file on your website: 
{
  "appclips": {
    "apps": ["TEAM_ID.com.yourcompany.yourapp.clip"]
  }
}
For Expo web projects, add this to public/.well-known/apple-app-site-association.
The value format is <Apple Team ID>.<App Clip Bundle ID>. Find your Team ID in Xcode under Signing & Capabilities.

​
Website meta tags

Add these meta tags to your website to enable the Smart App Banner: 
<!-- app/+html.tsx in Expo Router -->
<meta
  name="apple-itunes-app"
  content="app-id=YOUR_APP_STORE_ID, app-clip-bundle-id=com.yourcompany.yourapp.clip, app-clip-display=card"
/>
Add the Open Graph image (required for App Clip card): 
import Head from 'expo-router/head';

<Head>
  <meta property="og:image" content="https://yourdomain.com/og-image.png" />
</Head>
The og:image should be 1200×630 pixels. You’ll also need a separate 1800×1200 image for App Store Connect.

​
Deep linking

Handle App Clip invocations with Expo Router: 
// app/+native-intent.ts
export function redirectSystemPath({ path }: { path: string }): string {
  try {
    const url = new URL(path);
    
    // Handle App Clip default page redirection
    if (url.hostname === "appclip.apple.com") {
      return "/?ref=" + encodeURIComponent(path);
    }
    
    return path;
  } catch {
    return path;
  }
}
Get the initial URL: 
import * as Linking from 'expo-linking';

const url = await Linking.getInitialURL();
// Extract query parameters and route accordingly
Use expo-linking instead of React Native’s Linking - it has better App Clip support.

​
Using React Native

App Clips can use React Native with the exportJs option: 
// expo-target.config.js
module.exports = {
  type: "clip",
  exportJs: true, // Bundle JS for production builds
};
Your App Clip will:
  • Use Metro bundler in development
  • Embed a production JS bundle in Release builds
  • Share the same entry point as your main app
Detect which target is running: 
import * as Application from 'expo-application';

const isAppClip = Application.applicationId?.endsWith('.clip');

​
App Clip entitlements

App Clips require specific entitlements: 
<!-- Auto-generated by the plugin -->
<key>com.apple.developer.parent-application-identifiers</key>
<array>
  <string>$(AppIdentifierPrefix)com.yourcompany.yourapp</string>
</array>

<!-- You must add this manually -->
<key>com.apple.developer.associated-domains</key>
<array>
  <string>appclips:yourdomain.com</string>
</array>
The parent application identifier is automatically set by the plugin.

​
Size optimization

App Clips have a 10 MB size limit (compressed). Strategies:
Conditionally exclude heavy dependencies:
const isAppClip = Application.applicationId?.endsWith('.clip');

if (!isAppClip) {
  // Only load in main app
  const HeavyLibrary = require('heavy-library');
}
Download assets after launch instead of bundling them.
Use WebP format and appropriate resolutions for App Clip assets.
Use the blank template for development only:
npx expo prebuild --template ./node_modules/@bacons/apple-targets/prebuild-blank.tgz
Do not use this for production builds.

​
Testing App Clips

​
Local Experiences (Development)

  1. Install your app from Xcode
  2. Go to Settings > Developer > Local Experiences
  3. Add a local experience with your URL pattern
  4. Delete the full app
  5. Open Safari and navigate to your URL
  6. The App Clip should launch

​
TestFlight

App Clips work correctly in TestFlight builds with deep linking. This is the recommended testing method.

​
Production

After App Store approval:
  • The binary appears in ~5 minutes
  • The App Clip card appears on your website in ~25 minutes
  • Test by visiting your website in Safari on a real device

​
App Store Connect

Configure App Clip Experiences:
  1. Go to your app in App Store Connect
  2. Navigate to App Clips section
  3. Add Advanced App Clip Experiences
  4. Enter your URL and upload the 1800×1200 header image
  5. Configure the title and subtitle

​
Known issues

You may need this React Native patch to fix crashes when launching from TestFlight.
Ensure CURRENT_PROJECT_VERSION and CFBundleVersion match exactly across all targets, or the build will fail.
Remove expo-updates from App Clips - it causes build failures with cryptic errors about missing React in AppDelegate.

​
Production example

See Pillar Valley’s App Clip implementation - open on iOS to test.

​
Learn more

App Clip guide

Detailed implementation guide

Export JS

Bundle React Native in App Clips

Code signing

Code signing for App Clips

Apple documentation

Official App Clips documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us