React Native App Clip: New Capabilities and Reduced App Size
Over the last few weeks, I've spent a lot of effort on further improving my Expo config plugin react-native-app-clip allows React Native developers to add an iOS App Clip to their app without writing any native code. As a result, I'm releasing a new version today, which includes many improvements.
For a quick summary including some video clips of the new features, please refer to my Twitter thread.
Refactored a lot of code and simplified the implementation where possible. Removed a lot of warnings that were still coming up when opening the generated project in Xcode.
The plugin now comes with a native module that makes it possible to use capabilities from within React Native that otherwise would require native code. The native module exposes the following functions:
isClip() allows determining whether the code is currently run within the App Clip and can be used to apply different content and behaviors for the full app and the App Clip.
displayOverlay() shows the native iOS banner to promote the full app within the App Clip (see Apple Developer Docs).
setSharedCredential() and getSharedCredential() allows sharing login data from the App Clip to the full app so that the user doesn't have to sign in again after downloading the full app (see Apple Developer Docs).
New config options
I added a bunch of config options. The current options are:
- groupIdentifier (string): Configures an app group to share data between App Clip and full app (see Apple Developer Docs)
- deploymentTarget (string): Sets the deployment target for the App Clip. If you set this to "16.0", your App Clip can be 15 MB instead of 10 MB.
- requestEphemeralUserNotification (boolean): Enables notifications for the App Clip (see Apple Developer Docs)
- requestLocationConfirmation (boolean): Allow App Clip access to location data (see Apple Developer Docs)
- appleSignin (boolean): Enable "Sign in with Apple" for the App Clip
- excludedPackages (string): Packages to exclude from autolinking for the App Clip to reduce bundle size (see below).
Reduce bundle size by excluding dependencies from autolinking
One of the most critical parts of building an App Clip is keeping the app size small, as there is a limit of 15 MB (10 MB if you are targeting iOS < 16). For me, there are three main points to focus on in this matter:
- Native modules: If you include dependencies that add native modules to your app, this also comes with a cost regarding the app size. Take the popular animation framework Skia for example. Adding @shopify/react-native-skia to your dependencies will add around 6 MB to your app size. This is not a problem for a full-blown app, but it is a lot of space if you only have 15 MB to spend. So I added the excludedPackages option to exclude packages from autolinking. So you can add dependencies you need in your full app and exclude them from the App Clip if you don't need them there. I plan to automate this, but for now, you'll have to specify the packages to be excluded manually.
The following screenshot shows my example app, which includes React Native Skia for the full app and therefore brings the app size just over the 15 MB limit (the app doesn't include much else, just some boilerplate code). The App Clip, however, doesn't include Skia and therefore stays well under the size limit.
That's all the updates for now; please let me know what you think via Twitter or in the GitHub repo.