Clix Documentation

1. Create Widget Extension

Create a Widget Extension to host your Live Activity UI.

In Xcode, go to File > New > Target.
Search for Widget Extension and select it.
Click Next.
Enter a name for your widget (e.g., DeliveryWidget).
Check “Include Live Activity” to generate the Live Activity template.
Click Finish.

When the “Activate scheme?” dialog appears, select Don’t Activate to continue using your main app scheme.

2. Configure Info.plist

Enable Live Activities support in your main app’s Info.plist.

Open your main app target’s Info.plist.
Add a new key: NSSupportsLiveActivities
Set the value to YES (Boolean).

Alternatively, add this to your Info.plist source:

<key>NSSupportsLiveActivities</key>
<true/>

3. Define ActivityAttributes

Define the data structure for your Live Activity. ActivityAttributes contains static data that doesn’t change, while ContentState holds dynamic data that updates in real-time.

import ActivityKit
import Foundation

struct DeliveryAttributes: ActivityAttributes {
    // Static data - set when Live Activity starts
    public struct ContentState: Codable, Hashable {
        // Dynamic data - updates in real-time
        var currentStatus: String
        var estimatedArrival: Date
        var distanceRemaining: Double
    }

    // Static attributes
    var orderNumber: String
    var driverName: String
    var restaurantName: String
}

The ActivityAttributes struct name (e.g., DeliveryAttributes) must match the attributes_type value you send via the API.

4. Design Live Activity UI

Implement the UI for your Live Activity. This includes the Lock Screen view and Dynamic Island presentations.

import ActivityKit
import SwiftUI
import WidgetKit

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DeliveryAttributes.self) { context in
            // Lock Screen / Banner UI
            LockScreenView(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                // Expanded view (long press)
                DynamicIslandExpandedRegion(.leading) {
                    Label(context.attributes.driverName, systemImage: "person.circle")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text(context.state.estimatedArrival, style: .timer)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text(context.state.currentStatus)
                        .font(.headline)
                }
            } compactLeading: {
                // Compact leading (pill left side)
                Image(systemName: "box.truck.fill")
            } compactTrailing: {
                // Compact trailing (pill right side)
                Text(context.state.estimatedArrival, style: .timer)
            } minimal: {
                // Minimal (when multiple activities)
                Image(systemName: "box.truck.fill")
            }
        }
    }
}

struct LockScreenView: View {
    let context: ActivityViewContext<DeliveryAttributes>

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack {
                Image(systemName: "box.truck.fill")
                    .foregroundColor(.blue)
                Text(context.attributes.restaurantName)
                    .font(.headline)
                Spacer()
                Text("Order #\(context.attributes.orderNumber)")
                    .font(.caption)
                    .foregroundColor(.secondary)
            }

            Text(context.state.currentStatus)
                .font(.subheadline)

            HStack {
                Text("Driver: \(context.attributes.driverName)")
                Spacer()
                Text("ETA: ")
                Text(context.state.estimatedArrival, style: .time)
            }
            .font(.caption)
        }
        .padding()
    }
}

6. Initialize Live Activity

Register your ActivityAttributes type with Clix to enable remote Live Activity starts.

iOS Native
React Native (AppDelegate.swift)
React Native (AppDelegate.mm)

Add the setup call in your AppDelegate.swift after initializing Clix:

AppDelegate.swift

import UIKit
import Clix
import FirebaseCore

class AppDelegate: ClixAppDelegate {
    override func application(_ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        FirebaseApp.configure()

        Task {
            await Clix.initialize(
                config: ClixConfig(
                    projectId: YOUR_PROJECT_ID,
                    apiKey: YOUR_PUBLIC_API_KEY
                )
            )

            // Register Live Activity attributes type (iOS 16.1+)
            if #available(iOS 16.1, *) {
                Clix.LiveActivity.setup(DeliveryAttributes.self)
            }
        }

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

If your React Native app uses AppDelegate.swift, add the setup call directly:

AppDelegate.swift

import UIKit
import Firebase
import clix_react_native_sdk

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        FirebaseApp.configure()

        // Register Live Activity attributes type (iOS 16.1+)
        if #available(iOS 16.1, *) {
            ClixLiveActivity.setup(DeliveryAttributes.self)
        }

        return true
    }

    // ... rest of AppDelegate
}

If your React Native app uses AppDelegate.mm, you need to create a Swift helper file first.Step 1: Create LiveActivitySetup.swift in your project:

LiveActivitySetup.swift

import Foundation
import clix_react_native_sdk

@objc public class LiveActivitySetup: NSObject {
    @objc public static func setup() {
        if #available(iOS 16.1, *) {
            ClixLiveActivity.setup(DeliveryAttributes.self)
        }
    }
}

Step 2: Make sure this file has target membership for your main app.Step 3: Call the helper from your AppDelegate.mm:

AppDelegate.mm

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <Firebase.h>

// Import Swift bridging header
#import "YourApp-Swift.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

  self.moduleName = @"YourApp";
  self.initialProps = @{};

  // Register Live Activity
  [LiveActivitySetup setup];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

// ... rest of AppDelegate
@end

Clix.LiveActivity.setup() automatically registers the push-to-start token with Clix servers, enabling remote Live Activity starts.

iOS Live Activity

Overview

Prerequisites

Setup Guide

Triggering Live Activities

Additional Resources

Apple Live Activity Documentation

Clix iOS SDK

iOS SDK Setup

React Native SDK Setup

​Overview

​Prerequisites

​Setup Guide

​Triggering Live Activities

​Additional Resources

Apple Live Activity Documentation

Clix iOS SDK

iOS SDK Setup

React Native SDK Setup

Overview

Prerequisites

Setup Guide

Triggering Live Activities

Additional Resources