This gist provides a basic implementation of handling QR codes with App Clips using SwiftUI and React Native for iOS, and Google Play Instant for Android.
In Xcode, select your App Clip target and navigate to Signing & Capabilities. Add an Associated Domains entitlement, and include your domain in the format applinks:yourdomain.com.
Add the following code to your AppDelegate.swift:
import UIKit
import SwiftUI
import React
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
if userActivity.activityType == NSUserActivityTypeBrowsingWeb, let url = userActivity.webpageURL {
handleIncomingURL(url)
}
return true
}
func handleIncomingURL(_ url: URL) {
let bridge = RCTBridge(delegate: self, launchOptions: nil)
let initialProps: [String: Any] = ["url": url.absoluteString]
let rootView = RCTRootView(bridge: bridge, moduleName: "AppClip", initialProperties: initialProps)
if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
let window = UIWindow(windowScene: windowScene)
let rootViewController = UIHostingController(rootView: AppClipView(url: url.absoluteString))
window.rootViewController = rootViewController
self.window = window
window.makeKeyAndVisible()
}
}
}
extension AppDelegate: RCTBridgeDelegate {
func sourceURL(for bridge: RCTBridge!) -> URL! {
return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)
}
}Add the following code to your AppClipView.swift:
import SwiftUI
struct AppClipView: View {
let url: String
var body: some View {
VStack {
Text("App Clip Launched!")
.font(.largeTitle)
.padding()
Text("URL: \(url)")
.padding()
// Add more UI elements as needed
}
}
}
struct AppClipView_Previews: PreviewProvider {
static var previews: some View {
AppClipView(url: "https://example.com")
}
}Add the following code to your AppClip.js:
import React from 'react';
import { View, Text } from 'react-native';
const AppClip = ({ url }) => {
const params = new URLSearchParams(url.split('?')[1]);
const someValue = params.get('someValue'); // Extract parameters as needed
return (
<View>
<Text>QR Code Value: {someValue}</Text>
</View>
);
};
export default AppClip;- Generate a QR Code: Use a QR code generator to create a QR code with the URL associated with your App Clip.
- Scan the QR Code: Use the iPhone camera app or a QR code scanning app to scan the QR code. It should prompt the user to open the App Clip if everything is set up correctly.
- Testing on Device: Ensure to test on a real device since App Clips might not fully function in the simulator.
- Debugging: Use Xcode’s debugging tools to troubleshoot any issues with URL handling or launching the App Clip.
- Documentation: Refer to Apple’s official documentation on App Clips for more detailed information and best practices.
- Enroll your app in the Google Play Instant program through the Google Play Console.
- Create an instant app configuration and set up feature modules that can be launched instantly.
- Create a new feature module in your Android project for the instant app experience.
- Configure the
AndroidManifest.xmlto define the entry points and instant app capabilities.
Example AndroidManifest.xml for Instant App:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.yourcompany.instantapp">
<application
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:launchMode="singleTask"
android:theme="@style/AppTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>Ensure your React Native app is modular to allow specific features to be extracted into instant experiences.
Example MainActivity.java for Instant App:
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "InstantApp"; // Your instant app specific component
}
}Add the following code to your InstantApp.js:
import React from 'react';
import { View, Text } from 'react-native';
const InstantApp = ({ url }) => {
const params = new URLSearchParams(url.split('?')[1]);
const someValue = params.get('someValue'); // Extract parameters as needed
return (
<View>
<Text>Instant App Value: {someValue}</Text>
</View>
);
};
export default InstantApp;- Generate a QR Code: Use a QR code generator to create a QR code with the URL associated with your Instant App.
- Scan the QR Code: Use the Android device’s camera app or a QR code scanning app to scan the QR code. It should prompt the user to open the Instant App if everything is set up correctly.
- Testing on Device: Ensure to test on a real device since Instant Apps might not fully function in the emulator.
- Debugging: Use Android Studio’s debugging tools to troubleshoot any issues with URL handling or launching the Instant App.
- Documentation: Refer to Google’s official documentation on Google Play Instant for more detailed information and best practices.