Beyond the App Boundary: Engineering Real-Time iOS Live Activities and Dynamic Islands with Expo

const { withXcodeProject, withInfoPlist } = require('@expo/config-plugins');
const fs = require('fs');
const path = require('path');

module.exports = function withLiveActivities(config) { 
  // 1. Add required keys to main Info.plist
  config = withInfoPlist(config, (config) => {
    config.modResults.NSSupportsLiveActivities = true;
    config.modResults.NSUserActivityTypes = ['DynamicIslandActivityIntent'];
    return config;
  });

  // 2. Manipulate the Xcode Project to inject the Widget Extension target
  config = withXcodeProject(config, async (config) => {
    const project = config.modResults;
    const targetName = 'LiveActivityWidget';
    
    // Ensure target doesn't already exist to prevent duplicate additions
    if (project.pbxTargetByName(targetName)) {
      return config;
    }

    // Programmatic target creation, linking files from our native-templates directory
    const target = project.addTarget(targetName, 'app_extension', targetName);
    project.addBuildPhase([], 'PBXSourcesBuildPhase', 'Sources', target.uuid);
    project.addBuildPhase([], 'PBXResourcesBuildPhase', 'Resources', target.uuid);
    project.addBuildPhase([], 'PBXFrameworksBuildPhase', 'Frameworks', target.uuid);
    
    // Write target files, set up bundle identifiers, and sign with provisioning profiles
    // (In production, you'll copy your Swift widget files into this build phase)
    
    return config;
  });

  return config;
};

import ActivityKit
import WidgetKit
import SwiftUI

// The static data that never changes during the activity's lifespan
struct OrderAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        var driverName: String
        var statusMessage: String
        var progress: Double // 0.0 to 1.0
    }
    
    var orderId: String
}

@main
struct OrderWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: OrderAttributes.self) { context in
            // 1. Lock Screen / Notification Banner UI
            VStack(alignment: .leading) {
                HStack {
                    Text("Order #\(context.attributes.orderId)")
                        .font(.headline)
                    Spacer()
                    Text(context.state.statusMessage)
                        .foregroundColor(.blue)
                }
                ProgressView(value: context.state.progress)
                    .tint(.blue)
            }
            .padding()
        } dynamicIsland: { context in
            // 2. Dynamic Island UI configurations
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    Text("🏎️")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text(context.state.driverName)
                        .font(.caption)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    VStack {
                        Text(context.state.statusMessage)
                        ProgressView(value: context.state.progress)
                    }
                }
            } compactLeading: { 
                Text("📦")
            } compactTrailing: {
                Text("\(Int(context.state.progress * 100))%")
            } minimal: {
                Text("📦")
            }
        }
    }
}

import ExpoModulesCore
import ActivityKit

public class ActivityBridge: Module {
  public func definition() -> ModuleDefinition {
    Name("ActivityBridge")

    Function("startActivity") { (orderId: String, driverName: String, statusMessage: String) -> String? in
      guard ActivityAuthorizationInfo().areActivitiesEnabled else {
        return "disabled"
      }
      
      let attributes = OrderAttributes(orderId: orderId)
      let initialContentState = OrderAttributes.ContentState(
        driverName: driverName,
        statusMessage: statusMessage,
        progress: 0.1
      )
      
      do { 
        // Start the activity requesting a push token for remote updates
        let activity = try Activity<OrderAttributes>.request(
          attributes: attributes,
          content: .init(state: initialContentState, staleDate: nil),
          pushType: .token
        )
        
        // Monitor the push token asynchronously and send it back to JS
        Task {
            for await tokenData in activity.pushTokenUpdates {
                let myToken = tokenData.map { String(format: "%02x", $0) }.joined()
                self.sendEvent("onPushTokenReceived", [
                    "token": myToken,
                    "orderId": orderId
                ])
            }
        }
        
        return activity.id
      } catch {
        return nil
      }
    }
    
    Function("stopActivity") { (activityId: String) in
      Task {
        for activity in Activity<OrderAttributes>.activities {
          if activity.id == activityId {
            await activity.end(dismissalPolicy: .immediate)
          }
        }
      }
    }
  }
}

import { NativeModulesProxy, EventEmitter } from 'expo-modules-core';
import { useEffect } from 'react';

const ActivityBridge = NativeModulesProxy.ActivityBridge;
const bridgeEmitter = new EventEmitter(ActivityBridge);

export function useLiveActivityTracking(orderId: string) {
  useEffect(() => {
    const subscription = bridgeEmitter.addListener('onPushTokenReceived', async (event) => {
      if (event.orderId === orderId) {
        // Handshake: Send this token to your backend immediately!
        await registerPushTokenWithBackend(orderId, event.token);
      }
    });

    return () => subscription.remove();
  }, [orderId]);

  const startTracking = (driver: string, status: string) => {
    return ActivityBridge.startActivity(orderId, driver, status);
  };

  const stopTracking = (activityId: string) => {
    ActivityBridge.stopActivity(activityId);
  };

  return { startTracking, stopTracking };
}

{
  "aps": {
    "timestamp": 1672531199,
    "event": "update",
    "content-state": {
      "driverName": "Alex",
      "statusMessage": "Arriving in 3 minutes",
      "progress": 0.85
    }
  }
}