react-native-app-clip
react-native-app-clip copied to clipboard
bndkt
Brand new build has a really large bundle size
Hey there!
I'm working on implementing an App Clip on an existing project and figured I would give this package a try!
Before doing so on my existing app, I tested it out on a brand new Expo SDK 51 project. When trying to deploy it to TestFlight for testing, I was declined due to the Clip being over 15mb.
After testing over and over again, I continue to discover that the uncompressed size (through the App Size Report generated in Xcode) is over 9mb. When using an app that includes Expo Router, the size is over 14mb. The project only has a single JS file in it.
I'm hoping that I'm just doing something wrong on my end and would love to know if it's just me or if this issue is able to be replicated by others?
try setting your deploymentTarget to "17.0". This will increase the size limit to 50mb
This is great! Thanks for the suggestion. I'll check this out, for sure!
I've done everything to try and minimise the bundle size but the smallest I can get the App Clip is 16mb 😭 The last thing I tried was switching from Yarn to NPM. This could make a difference for someone who is close to getting below the 15mb limit. I use AWS Cognito which is quite a large library so it makes it hard to get below 15mb, even after reducing the library size by over 75% by tweaking the imports.
try setting your deploymentTarget to "17.0". This will increase the size limit to 50mb
Be aware that if your app is > 15mb, you can't open it by scanning a QR code! With this target set.
This is great! Thanks for the suggestion. I'll check this out, for sure!
What JS Engine are you using? I was using hermes and my App Clip was 16mb. I switched to JSC and it is now below 12mb! 😄
That's really interesting! I could try that. Unfortunately, this project is requiring that we qualify for use of the QR codes
I'd recommend avoiding any large packages like AWS's Cognito when trying to create a minimal App Clip. As a personal anecdote, I've previously switched authentication providers instead of trying to support Cognito's massive size requirements on web. App Clip size limitations would be similar.
If you're trying to optimize your bundle size for an existing application, I'd recommend checking out the new .clip extension added in v0.5.0 which allows you to remove heavy components or other large files from the App Clip bundle. However, this won't do much for the boilerplate application bundle size issues.
Hopefully, an implementation of #1 can help with this issue.
My current recommendation is to bite the bullet of > 15 MB and switch to minimum iOS 17. If that's not an option, then you'll likely need to hyper-optimize the size of your App Clip by just writing it entirely natively.
Hi all,
I’m building an App Clip with React Native (Expo + Xcode). I’ve uninstalled dependencies, excluded assets, and stripped things down, but the size doesn’t change. The Unix Executable File alone is ~16MB and seems unaffected by what I remove.
Has anyone found a way to shrink the executable or overall App Clip size? Any tips would help.
Be sure to follow Apple's guide on verifying the size of App Clip when evaluating the bundled size. The executable doesn't accurately reflect the submitted size which Apple uses for its 10/15/100 MB limits. Viewing the size displayed on TestFlight is the most surefire way for evaluation here.
React Native unfortunately has a large baseline bundle. There's several optimization techniques (some highlighted above) that can be used to try to optimize, but if you're targeting an extremely slim App Clip (<10 MB), you may want to just write it completely separately in Swift. You would still be able to use React Native for your main app and just link the fully native App Clip with something like expo-apple-targets.
So what I mean is after I archive my app on Xcode to determine the size. The uncompressed size is 18mb and when I unzipped I could see that the app clips executable file was what took over 16mb the rest like assets and all were just in kbs which is not an issue.
Be sure to follow Apple's guide on verifying the size of App Clip when evaluating the bundled size. The executable doesn't accurately reflect the submitted size which Apple uses for its 10/15/100 MB limits. Viewing the size displayed on TestFlight is the most surefire way for evaluation here.
React Native unfortunately has a large baseline bundle. There's several optimization techniques (some highlighted above) that can be used to try to optimize, but if you're targeting an extremely slim App Clip (<10 MB), you may want to just write it completely separately in Swift. You would still be able to use React Native for your main app and just link the fully native App Clip with something like
expo-apple-targets.
Hi, I tried the swift method using the expo apple targets. Which started going fine but it also imports all the dependencies from react native
@tsmusty I'd recommend exploring how others have fixed the issue of multi-target Pods in the iOS development space. This issue is outside the scope of this package.
I have switched along time ago, I even had to totally uninstall firebase from and switch to using apis but the size still remains. No change @pdyby
@tsmusty I don't have any resources on hand. My work (and this repository) generally pertains to implementing App Clip in the context of React Native, not as a fully native, distinct target.
I totally understand @nathan-ahn but if there is something you think I'm doing wrong i would appreciate it. Because I'm honestly frustrated at this point.
@tsmusty If the App Clip is the core functionality of your app and it's not too much of a time loss, I'd recommend considering whether a fully native app is better than React Native for your needs. App Clip has unique constraints and native optimizations required that make it somewhat unideal for React Native. Since you're running into issues with separating the dependencies in the target, I'd recommend considering just writing your entire application in Swift. At the very least, it'll likely help you debug why the dependencies are being shared across targets. Of course, I don't know the full context here so take my suggestion with a hefty grain of salt.
Thanks @nathan-ahn i think I would go back to writing just the appclip in swift
I created a hello world expo app, added this plugin, built the app with Expo and attempted uploading to TestFlight, but I get back this error from apple:
ITMS-90865: Thinned App Clip size is too large - The main bundle of the “/Payload/My App Clip.app” App Clip is 27 MB, which exceeds the maximum allowable size. After app thinning, the main bundle of any App Clip variant must be less than 10 MB.
Has anyone successfully uploaded to TestFlight using this plugin? My hello world app was created from the CLI, with no additional code changes. How am I supposed to upload to TestFlight if the app clip size is 27MB? cc: @bndkt
@sean-hill The maximum size for App Clip has been increased to 100 MB if you target iOS 17 or later. You can use the deploymentTarget property in the plugin configuration to target "17.0". If you need to target earlier versions of iOS or have physical invocation requirements, then I'd recommend seeing my above advice on using Swift. I don't think it's feasible to optimize a React Native App Clip to less than 10 MB while maintaining the same codebase for a fully-fledged application.
Though, 27 MB is surprisingly high for a hello world app. I suspect the boilerplate you're using has large assets bundled in or large libraries. I would've expected closer to the ~15 MB for a simple application (but I haven't tested in a while). For reference, we have our entire app's functionality built into our App Clip and have a 33.3 MB compressed file size.
Thanks @nathan-ahn! So our use case will be to have the user scan a QR code to launch the App Clip. Does that fall under the "physical invocation requirements"? Ah probably not:
The App Clip doesn’t support physical invocations such as App Clip Codes, QR codes, or NFC tags.
@sean-hill Unfortunately, seems like it. There's likely an unreliable solution which depends on the iPhone detecting the correct app link, but you'll want a good web-based fallback. If you need reliable QR-code scanning, you'll need to fit within 15 MB. I believe 15 MB is theoretically possible with good optimization, but it'll likely be easier to do in Swift.
Here was what I did. I changed the minimum to iOS 17 but with that you don't get QR invocations only safari (if you scan you get "appclip unavailable")
So added two domains as app links and one domain for appclip. The QR code will be like "e.link.com/test" which would be redirected to "link.com/test" which avoids the whole appclip unavailable. From there safari would pick it up and you have to an invocation.
Thanks @nathan-ahn @tsmusty! Question for you guys, say I get this working, and my QR Code / App Clip code is something like https://example.com/test/<id> is there a way to get the invocation URL of the app clip on the react native side, so I could parse out the <id>?
@sean-hill Yep! In my experience, expo-linking works out of the box. We just use getInitialURL.
Edit: Accidentally tagged the wrong person. Sorry tsmusty!
Mmmkay, I got it uploaded to Testflight after targeting iOS 17.0. In TestFlight I added this:
I'm not sure what is supposed to be the invocation URL, but when I launch the App Clip via TestFlight, I get this:
I was just curious what you guys have used to test the App Clip from TestFlight. Thanks!
Ah it looks like it is trying to go to a /testing route, which my react native app doesn't handle right now. Perfect! I can take care of that.
@sean-hill Glad to hear it's working! If anything else comes up, feel free to open up a new Issue unless it's related to bundle size.