How to Create App Clips for iOS 14–React Native Development

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 how to create them when React Native development is considered.

What Are App Clips?

App Clips are lightweight versions of iOS apps (under 10MB) 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 super quick and easy to do right when you need it.

However, you can't just have an App Clip floating around on its own, there needs to be a full app in the App Store that it's connected to. So you can treat the Clip as basically its' mini-version. So what you can do is 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 in a hassle-free way while giving you the option to download the full app (and get access to more restaurants). Another example — a clip of a messaging app that lets you know which of your friends are using the service.

If you'r still not convinced where App Clips could be useful, recall a moment when a friend shared with you a TikTok video and you didn't have the app installed. Rather than redirecting to Safari like most apps, TikTok uses App Clip. The recipient of the link 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. And if the user is happy, and wants to download a full app, you can even persist 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.

Creating App Clips in React Native

If you’re wondering by now how you can create a Clip, there are two answers. The easiest one is for those who have a native iOS app: refer to the official documentation. It gets harder for people who leverage React Native to develop their app.

Currently, there’s no proven path of doing it. However, the moment we took notice of this fact, we started working on a solution. It’s not ready yet but the first path we’ll try (based on the documentation) is refactoring a part of an application to share logic between lightweight clip view and the whole app. We will do the following:

1. In React Native:
1. Add a lightweight view for the App Clip.
2. Create a one-way connection with Native Module (get URL or parameters from Native part and pass it to React Native).
2. In the iOS app:
1. Add a new target using the App Clip template.
2. Add a bridge between the App Clip and React Native (new view for App Clip should use the React Native module).
3. Configure Associated Domains Entitlement, for example URL: `appclips:<fully qualified domain>`
4. Setup custom code with these directives
   

   ``` 
   #if !APPCLIP
   // Code you don't want to use in your app clip.
   #else 
   // Code your app clip may access. 
   #endif 
   ```

5. Support associated domains in the app.