Table of Contents
Apple recently announced the release of a feature called App Clips. If you don’t know why it’s a big deal, here’s a quick overview.
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.
App Clip Use Cases
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. 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.
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:
- In React Native:
- Add a lightweight view for the App Clip.
- Create a one-way connection with Native Module (get URL or parameters from Native part and pass it to React Native).
- In the iOS app:
- Add a new target using the App Clip template.
- Add a bridge between the App Clip and React Native (new view for App Clip should use the React Native module).
- Configure Associated Domains Entitlement, for example URL:
`appclips:<fully qualified domain>`
- 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
```
- Support associated domains in the app.
More to Come
We hope this will work and we’re currently creating a Proof of Concept. If everything goes well, we will potentially release an open-source bridge for React Native. For those who know Android in and out, and would like to have a bridge for the same feature — we haven’t forgotten about you!
So stay tuned for the more detailed info!
:quality(90))
Błażej Cepil
App Clip Use Cases
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. 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.
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:
- In React Native:
- Add a lightweight view for the App Clip.
- Create a one-way connection with Native Module (get URL or parameters from Native part and pass it to React Native).
- In the iOS app:
- Add a new target using the App Clip template.
- Add a bridge between the App Clip and React Native (new view for App Clip should use the React Native module).
- Configure Associated Domains Entitlement, for example URL:
`appclips:<fully qualified domain>` - 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 ``` - Support associated domains in the app.
More to Come
We hope this will work and we’re currently creating a Proof of Concept. If everything goes well, we will potentially release an open-source bridge for React Native. For those who know Android in and out, and would like to have a bridge for the same feature — we haven’t forgotten about you!
So stay tuned for the more detailed info!