feat(demo): [SDK-4217] add Live Activities demp example (#1933)

Author: fadi-george

examples/demo/.env.example

@@ -0,0 +1 @@
+ONESIGNAL_API_KEY=your_rest_api_key

examples/demo/.gitignore

@@ -1,3 +1,6 @@
+# Environment
+.env
+
 # OSX
 #
 .DS_Store

examples/demo/App.tsx

@@ -84,6 +84,11 @@ function App() {
         OneSignal.setConsentGiven(privacyConsent);
         OneSignal.initialize(appId);
 
+        OneSignal.LiveActivities.setupDefault({
+          enablePushToStart: true,
+          enablePushToUpdate: true,
+        });
+
         OneSignal.InAppMessages.setPaused(iamPaused);
         OneSignal.Location.setShared(locationShared);
 

examples/demo/babel.config.js

@@ -1,3 +1,15 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      'module:react-native-dotenv',
+      {
+        envName: 'APP_ENV',
+        moduleName: '@env',
+        path: '.env',
+        safe: false,
+        allowUndefined: true,
+      },
+    ],
+  ],
 };

examples/demo/bun.lock

@@ -3,44 +3,140 @@ import WidgetKit
 import SwiftUI
 import OneSignalLiveActivities
 
-struct OneSignalWidgetAttributes: OneSignalLiveActivityAttributes  {
-    public struct ContentState: OneSignalLiveActivityContentState {
-        var emoji: String
-        var onesignal: OneSignalLiveActivityContentStateData?
+@available(iOS 16.2, *)
+struct OneSignalWidgetLiveActivity: Widget {
+
+    private func statusIcon(for status: String) -> String {
+        switch status {
+        case "on_the_way": return "box.truck.fill"
+        case "delivered":  return "checkmark.circle.fill"
+        default:           return "bag.fill"
+        }
+    }
+
+    private func statusColor(for status: String) -> Color {
+        switch status {
+        case "on_the_way": return .blue
+        case "delivered":  return .green
+        default:           return .orange
+        }
+    }
+
+    private func statusLabel(for status: String) -> String {
+        switch status {
+        case "on_the_way": return "On the Way"
+        case "delivered":  return "Delivered"
+        default:           return "Preparing"
+        }
     }
-    var name: String
-    var onesignal: OneSignalLiveActivityAttributeData
-}
 
-struct OneSignalWidgetLiveActivity: Widget {
     var body: some WidgetConfiguration {
-        ActivityConfiguration(for: OneSignalWidgetAttributes.self) { context in
-            VStack {
-                Text("Hello \(context.attributes.name) \(context.state.emoji)")
+        ActivityConfiguration(for: DefaultLiveActivityAttributes.self) { context in
+            let orderNumber = context.attributes.data["orderNumber"]?.asString() ?? "Order"
+            let status = context.state.data["status"]?.asString() ?? "preparing"
+            let message = context.state.data["message"]?.asString() ?? "Your order is being prepared"
+            let eta = context.state.data["estimatedTime"]?.asString() ?? ""
+
+            VStack(spacing: 10) {
+                HStack {
+                    Text(orderNumber)
+                        .font(.caption)
+                        .foregroundColor(.gray)
+                    Spacer()
+                    if !eta.isEmpty {
+                        Text(eta)
+                            .font(.caption)
+                            .foregroundColor(.white.opacity(0.7))
+                    }
+                }
+
+                HStack(spacing: 12) {
+                    Image(systemName: statusIcon(for: status))
+                        .font(.title2)
+                        .foregroundColor(statusColor(for: status))
+
+                    VStack(alignment: .leading, spacing: 2) {
+                        Text(statusLabel(for: status))
+                            .font(.headline)
+                            .foregroundColor(.white)
+                        Text(message)
+                            .font(.subheadline)
+                            .foregroundColor(.white.opacity(0.8))
+                            .lineLimit(1)
+                    }
+                    Spacer()
+                }
+
+                DeliveryProgressBar(status: status)
             }
-            .activityBackgroundTint(Color.cyan)
-            .activitySystemActionForegroundColor(Color.black)
+            .padding()
+            .activityBackgroundTint(Color(red: 0.11, green: 0.13, blue: 0.19))
+            .activitySystemActionForegroundColor(.white)
 
         } dynamicIsland: { context in
-            DynamicIsland {
+            let status = context.state.data["status"]?.asString() ?? "preparing"
+            let message = context.state.data["message"]?.asString() ?? "Preparing"
+            let eta = context.state.data["estimatedTime"]?.asString() ?? ""
+
+            return DynamicIsland {
                 DynamicIslandExpandedRegion(.leading) {
-                    Text("Leading")
+                    Image(systemName: statusIcon(for: status))
+                        .font(.title2)
+                        .foregroundColor(statusColor(for: status))
+                }
+                DynamicIslandExpandedRegion(.center) {
+                    Text(statusLabel(for: status))
+                        .font(.headline)
                 }
                 DynamicIslandExpandedRegion(.trailing) {
-                    Text("Trailing")
+                    if !eta.isEmpty {
+                        Text(eta)
+                            .font(.caption)
+                            .foregroundColor(.secondary)
+                    }
                 }
                 DynamicIslandExpandedRegion(.bottom) {
-                    Text("Bottom \(context.state.emoji)")
+                    Text(message)
+                        .font(.caption)
+                        .foregroundColor(.secondary)
                 }
             } compactLeading: {
-                Text("L")
+                Image(systemName: statusIcon(for: status))
+                    .foregroundColor(statusColor(for: status))
             } compactTrailing: {
-                Text("T \(context.state.emoji)")
+                Text(statusLabel(for: status))
+                    .font(.caption)
             } minimal: {
-                Text(context.state.emoji)
+                Image(systemName: statusIcon(for: status))
+                    .foregroundColor(statusColor(for: status))
+            }
+        }
+    }
+}
+
+@available(iOS 16.2, *)
+struct DeliveryProgressBar: View {
+    let status: String
+
+    private var progress: CGFloat {
+        switch status {
+        case "on_the_way": return 0.6
+        case "delivered":  return 1.0
+        default:           return 0.25
+        }
+    }
+
+    var body: some View {
+        GeometryReader { geo in
+            ZStack(alignment: .leading) {
+                RoundedRectangle(cornerRadius: 3)
+                    .fill(Color.white.opacity(0.2))
+                    .frame(height: 6)
+                RoundedRectangle(cornerRadius: 3)
+                    .fill(progress >= 1.0 ? Color.green : Color.blue)
+                    .frame(width: geo.size.width * progress, height: 6)
             }
-            .widgetURL(URL(string: "http://www.apple.com"))
-            .keylineTint(Color.red)
         }
+        .frame(height: 6)
     }
 }

examples/demo/ios/OneSignalWidget/OneSignalWidgetLiveActivity.swift

@@ -1446,7 +1446,7 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-  - react-native-onesignal (5.4.0):
+  - react-native-onesignal (5.4.1):
     - hermes-engine
     - OneSignalXCFramework (= 5.5.0)
     - RCTRequired
@@ -2349,7 +2349,7 @@ SPEC CHECKSUMS:
   React-logger: 9e51e01455f15cb3ef87a09a1ec773cdb22d56c1
   React-Mapbuffer: 92b99e450e8ff598b27d6e4db3a75e04fd45e9a9
   React-microtasksnativemodule: 2fe0f2bd2840dedbd66c0ac249c64f977f39cc18
-  react-native-onesignal: 95e69fd48dbdd28700ee6ebe6a5548c107127bf3
+  react-native-onesignal: 21bb718c560cd7e6e763594ace7a4599606d0452
   react-native-safe-area-context: 37e680fc4cace3c0030ee46e8987d24f5d3bdab2
   React-NativeModulesApple: 44a9474594566cd03659f92e38f42599c6b9dee4
   React-networking: db73d91466cb134fcbdaaa579fb2de14e2c2ea01

examples/demo/ios/Podfile.lock

@@ -37,6 +37,7 @@
     "@react-native/typescript-config": "0.84.0",
     "@types/react": "^19.2.0",
     "@types/react-native-vector-icons": "^6.4.18",
+    "react-native-dotenv": "^3.4.11",
     "react-native-svg-transformer": "^1.5.3",
     "typescript": "^5.8.3"
   },