React Nativeで `expo-apple-targets`を使ってiOS WidgetとLive Activityの簡易実装 #@iOS

📂 Root
📂 targets
📂 widget
📄 expo-target.config.js
📄 Widget.swift
📂live-activity
...

module.exports = {
  type: "widget",
  entitlements: {
    "com.apple.security.applicationgroups": ["group.{project-name}.widget"],
  },
};

import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), item: "Loading")
    }

    func snapshot(in context: Context) async -> SimpleEntry {
        SimpleEntry(date: Date(), item: "Loading")
    }

    func timeline(in context: Context) async -> TimelineSimpleEntry> {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 .. 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, item: "トンカツ")
            entries.append(entry)
        }

        return Timeline(entries: entries, policy: .atEnd)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let item: String
}

struct WidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.date, style: .time)

            Text("おすすめ")
            if let url = URL(string: "any image url"),
               let imageData = try? Data(contentsOf: url),
               let uiImage = UIImage(data: imageData) {
               Image(uiImage: uiImage)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: 50)
            }
            Text(entry.item)
        }
    }
}

struct widget: Widget {
    let kind: String = "widget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            WidgetEntryView(entry: entry)
                .containerBackground(.fill.tertiary, for: .widget)
        }
    }
}

@main
struct widgetBundle: WidgetBundle {
    var body: some Widget {
        widget()
    }
}