Create App Clips for iOS 14 in React Native
Apple announced the release of a feature called App Clips in WWDC 2020.
I think App Clips are the most useful feature of iOS 14. If you don’t hear yet, you may this news useful.
After seeing this feature, I started to think about how can create POC for that with React Native. so I did something it can be useful for everyone interested in this feature.
Let's get started to create App Clip
Firstly I created a very very normal React Native project.
npx react-native init ReactNativeAppClipsThen I opened the project in Xcode. (Version 12.0 beta)
Then I click File -> New -> Target. search App Clip
More info:
https://developer.apple.com/documentation/app_clips/creating_an_app_clip
After that, I use this selection to create App Clip. I also tried with SwiftUI but no luck. maybe there is a way to work with Swift but for now, I skipped it.
Then you will see your target inside your project. RNClip is our App Clip. it seems to be a very regular iOS project.
Now we have App Clip Target. When I run this it open clip app but there is nothing inside.
so I tried to add React Native on App Clip project. in normal project React and other dependencies consume Cocoapods. so I went through to Podfile and add RNClip as a target and run pod install again
After that step, I can access React’s RCTRootView inside my App Clip project.
I implemented loadView method of UIViewController like above.
but as you can see App Clip have different bundle root and module name
so I also made some addition to Javascript side
I created one file named index.appclip.js
then I run the main project to start the packager.(after packager start I kill the main app and removed it from the simulator) after that, I changed the target then run again.
But there was one small problem in the app. it doesn’t load an insecure bundle. so I added this to Info.plist file to solve the problem. React Native apps have by default.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
so that's it. It worked very well.
Here is the repo of the project.
some people asked me about app size. Because there is a 10 MB limitation for App Clips.
I simply exported App. Here is the result without any optimization. I may remove some pod from App Clip.
I also noticed when I run on release mode. App didn’t locate bundle correctly. To solve this problem, I’ve created Run Script in Build Phase step.
export NODE_BINARY=node../node_modules/react-native/scripts/react-native-xcode.sh index.appclip.js
https://github.com/nazrdogan/ReactNativeAppClips
PART — 2- Handling App Clips URL in React Native
https://mobiledevtutorials.com/handling-app-clip-url-in-react-native
