How to Create App Clips for iOS in React Native–Tutorial

Table of Contents

What Are App Clips
App Clip Use Cases
New App Clips Capabilities–iOS 17
Creating App Clips in React Native
App Clip Triggers
Android’s Alternative: Instant Apps

React Native development has become a game-changer in the mobile app world. When choosing React Native app development services, businesses build mobile apps more efficiently and cost-effectively. Instead of creating separate apps for iPhone and Android, React Native allows companies to maintain a single codebase that works for both platforms.

What makes React Native development particularly attractive is its ability to create apps that feel truly native to each platform. Whether you're working with an experienced React Native development company or building in-house, the end result is an app that performs smoothly and looks natural on both iOS and Android devices. Both operating systems care of their users and constantly try to enrich the offer. One of the most important releases was App Clips.

Announced during the Apple Worldwide Developers Conference (WWDC) 2020, the release of a feature called App Clips was a really big deal in the technology world. Here’s a quick overview why.

An app clip is a small part of your app that’s discoverable at the moment it’s needed. App clips are fast and lightweight so a user can open them quickly. (...) users will be able to start and finish an experience from your app in seconds. And when they’re done, you can offer the opportunity to download your full app.

This article covers App Clip use cases and a short guide on how to create them when React Native development is considered.

What Are App Clips?

App Clips are lightweight versions of iOS apps that users can launch instantly without full app installation. Think of App Clips as bite-sized pieces of apps that you can use instantly - no download needed. But here's the thing: they're not really about giving you a test drive or demo of the app. Instead, they're about taking one specific thing you want to do (like paying for parking or ordering coffee) and making it quick and easy to do right when needed.

However, you can't just have an App Clip floating around on its own; there needs to be an entire app in the App Store to which it's connected. So you can treat the Clip basically as its mini-version. So you can take a part of your app, put it in an accessible spot, and gain a new way of promoting your business.

App Clip Use Cases

An example would be a clip of a food delivery app that allows you to order a meal from a specific restaurant hassle-free while allowing you to download the full app (and access more restaurants). Another example is a messaging app clip that lets you know which of your friends are using the service.

If you're still not convinced where App Clips could be helpful, recall a moment when a friend shared a TikTok video, and you didn't have the app installed. Rather than redirecting to Safari like most apps, TikTok uses App Clip. The link recipient can scroll through more videos and is occasionally prompted to download the full app for more.

The possibilities are virtually endless, and in theory, creating an App Clip is easy because it’s developed in the same Xcode project as your full app using the iOS SDK. If the user is happy and wants to download a full app, you can even persist with any information the user has provided and seamlessly transition.

The App Clips can be hidden under NFC tags, QR codes, Safari App Banners, and various links, so there are also a lot of cool ways to integrate them with the day-to-day environment of a potential user.

New App Clips Capabilities–iOS 17

Since their introduction in 2020, the Apple team has constantly improved the experience of using and implementing App Clips. Starting with iOS 17, Apple has increased its size limit, enabling developers to include even more features. Now, App Clips can be up to 50MB for digital invocations—such as links opened from Safari or Maps—and 15MB for invocations through NFC tags, QR codes, or App Clip Codes, a feature introduced with iOS 16. This marks a significant upgrade from the earlier limit of 10MB, enabling App Clips to provide a much richer and more functional user experience.

Another great feature introduced with iOS 17 is the ability to open an App Clip from any app. Previously, App Clips could only be triggered through specific methods, such as links or QR codes. Now, developers can launch an App Clip directly from within their app. For instance, a meal-planning app could seamlessly integrate with a grocery shopping app's App Clip, enabling users to order the ingredients needed for their planned meals quickly. This feature enhances user experience and creates opportunities for apps to attract a wider audience.

A small but powerful enhancement to App Clip links was introduced in iOS 16.4. Links to App Clips now support additional parameters, allowing developers to pass values directly through the URL. The link should look like this: https://appclip.apple.com/id?p=&key=value.

Parameters, added as key-value pairs, can be retrieved by the App Clip, opening up new possibilities for creating personalized experiences. For example, if your App Clip is a demo for a mobile game, this feature could allow you to specify which character the user starts with.

Creating App Clips in React Native

There are two answers if you’re wondering how to create a Clip by now. The easiest one is for those with a native iOS app: refer to the official documentation. For people who leverage React Native to develop their app, there are two options.

The simplest one is to try the react-native-app-clip expo plugin. It would handle the project’s app clip configuration - all it’s left to do is to write actual app clip code in react native. This solution has several drawbacks since your project must have at least react native 0.74 and expo SDK 51 (best react native 0.76 and expo SDK 52). In addition to that, it might be harder to fit in the 15MB limit using the library.

The second possibility is to create an app clip by yourself. It is quite simple, too.

Create a New Target

In Xcode create a new target using the App Clip template. This sets up the basic structure for your App Clip.

2. Add Required Pods

Add required pods for the App Clip and run pod install. Your Podfile should look like this.

target '<your app name>' do
inherit! :complete
 # Pods for testing
end
 # add to create app clips
target '<your app clip name>' do
 inherit! :complete
 # Pods for testing
end

3. Create the Entry Point for the App Clip

Create an index.appclip.js file, which will serve as the root entry point for your App Clip. This is where your React Native code for the App Clip will reside.

4. Modify the AppDelegate FileIn the ios/<app clip name>/AppDelegate.m file:

Add an RCTRootView to render the React Native App Clip UI.
Update the jsBundleURLForBundleRoot to reference index.appclip.js.

5. Update the Info.plist file

Add the required keys to the ios/<your app clip name>/Info.plist file to configure your App Clip.

6. Build and Run the App Clip

Use Xcode to build and run the App Clip target. Test it thoroughly to ensure it works as expected.

App Clip Triggers

The whole app clip concept bases on triggers because they need some kind of signal to know when the user wants to use them. When Apple designed App Clips, they set up several ways to kick them off:

Scanning a QR code
Tapping an NFC tag
Opening a link in Messages
Finding them in Maps
Using a business's card in the new App Library
Clicking special App Clip codes (those fancy Apple-designed codes that look like QR codes with an Apple twist)
Spotting them in Safari

Android’s Alternative: Instant Apps

So far, a solution for iOS users has been discussed, but is there a way to provide a similar experience for Android? There is; it’s called Google Play Instant Apps. Android Instant Apps are older than iOS App Clips. It was launched in 2017 and supports Android 5.0 and higher.

Android Instant Apps work similarly to App Clips by allowing users to open an app without downloading. There is a size limitation for Instant Apps, which is currently 15MB. To trigger an Instant App, users can scan a QR code, use an NFC tag, click a link to the app, find it in Google search results, or locate it directly in the Google Play Store and click the “Try Now” button.

Barbara Banaszak

Javascript Developer at Monterail