expo-live-activity 0.4.3-alpha1 → 0.5.0-alpha1

package/ios-files/LiveActivityWidget.swift

@@ -10,6 +10,10 @@ public struct LiveActivityAttributes: ActivityAttributes {
     var progress: Double?
     var imageName: String?
     var dynamicIslandImageName: String?
+    var smallImageName: String?
+    var elapsedTimerStartDateInMilliseconds: Double?
+    var currentStep: Int?
+    var totalSteps: Int?
 
     public init(
       title: String,
@@ -17,7 +21,11 @@ public struct LiveActivityAttributes: ActivityAttributes {
       timerEndDateInMilliseconds: Double? = nil,
       progress: Double? = nil,
       imageName: String? = nil,
-      dynamicIslandImageName: String? = nil
+      dynamicIslandImageName: String? = nil,
+      smallImageName: String? = nil,
+      elapsedTimerStartDateInMilliseconds: Double? = nil,
+      currentStep: Int? = nil,
+      totalSteps: Int? = nil
     ) {
       self.title = title
       self.subtitle = subtitle
@@ -25,6 +33,10 @@ public struct LiveActivityAttributes: ActivityAttributes {
       self.progress = progress
       self.imageName = imageName
       self.dynamicIslandImageName = dynamicIslandImageName
+      self.smallImageName = smallImageName
+      self.elapsedTimerStartDateInMilliseconds = elapsedTimerStartDateInMilliseconds
+      self.currentStep = currentStep
+      self.totalSteps = totalSteps
     }
   }
 
@@ -43,8 +55,14 @@ public struct LiveActivityAttributes: ActivityAttributes {
   var imageHeight: Int?
   var imageWidthPercent: Double?
   var imageHeightPercent: Double?
+  var smallImageWidth: Int?
+  var smallImageHeight: Int?
+  var smallImageWidthPercent: Double?
+  var smallImageHeightPercent: Double?
   var imageAlign: String?
   var contentFit: String?
+  var progressSegmentActiveColor: String?
+  var progressSegmentInactiveColor: String?
 
   public init(
     name: String,
@@ -62,8 +80,14 @@ public struct LiveActivityAttributes: ActivityAttributes {
     imageHeight: Int? = nil,
     imageWidthPercent: Double? = nil,
     imageHeightPercent: Double? = nil,
+    smallImageWidth: Int? = nil,
+    smallImageHeight: Int? = nil,
+    smallImageWidthPercent: Double? = nil,
+    smallImageHeightPercent: Double? = nil,
     imageAlign: String? = nil,
-    contentFit: String? = nil
+    contentFit: String? = nil,
+    progressSegmentActiveColor: String? = nil,
+    progressSegmentInactiveColor: String? = nil
   ) {
     self.name = name
     self.backgroundColor = backgroundColor
@@ -80,8 +104,14 @@ public struct LiveActivityAttributes: ActivityAttributes {
     self.imageHeight = imageHeight
     self.imageWidthPercent = imageWidthPercent
     self.imageHeightPercent = imageHeightPercent
+    self.smallImageWidth = smallImageWidth
+    self.smallImageHeight = smallImageHeight
+    self.smallImageWidthPercent = smallImageWidthPercent
+    self.smallImageHeightPercent = smallImageHeightPercent
     self.imageAlign = imageAlign
     self.contentFit = contentFit
+    self.progressSegmentActiveColor = progressSegmentActiveColor
+    self.progressSegmentInactiveColor = progressSegmentInactiveColor
   }
 
   public enum DynamicIslandTimerType: String, Codable {
@@ -118,7 +148,7 @@ public struct LiveActivityAttributes: ActivityAttributes {
 @available(iOS 16.1, *)
 public struct LiveActivityWidget: Widget {
   public var body: some WidgetConfiguration {
-    ActivityConfiguration(for: LiveActivityAttributes.self) { context in
+    let baseConfiguration = ActivityConfiguration(for: LiveActivityAttributes.self) { context in
       LiveActivityView(contentState: context.state, attributes: context.attributes)
         .activityBackgroundTint(
           context.attributes.backgroundColor.map { Color(hex: $0) }
@@ -141,7 +171,17 @@ public struct LiveActivityWidget: Widget {
           }
         }
         DynamicIslandExpandedRegion(.bottom) {
-          if let date = context.state.timerEndDateInMilliseconds {
+          if let startDate = context.state.elapsedTimerStartDateInMilliseconds {
+            ElapsedTimerText(
+              startTimeMilliseconds: startDate,
+              color: context.attributes.progressViewTint.map { Color(hex: $0) } ?? .white
+            )
+            .font(.title2)
+            .fontWeight(.semibold)
+            .padding(.top, 5)
+            .padding(.horizontal, 5)
+            .applyWidgetURL(from: context.attributes.deepLinkUrl)
+          } else if let date = context.state.timerEndDateInMilliseconds {
             dynamicIslandExpandedBottom(
               endDate: date, progressViewTint: context.attributes.progressViewTint
             )
@@ -162,7 +202,18 @@ public struct LiveActivityWidget: Widget {
             .applyWidgetURL(from: context.attributes.deepLinkUrl)
         }
       } compactTrailing: {
-        if let date = context.state.timerEndDateInMilliseconds {
+        if let startDate = context.state.elapsedTimerStartDateInMilliseconds {
+          ElapsedTimerText(
+            startTimeMilliseconds: startDate,
+            color: nil
+          )
+          .font(.system(size: 15))
+          .minimumScaleFactor(0.8)
+          .fontWeight(.semibold)
+          .frame(maxWidth: 60)
+          .multilineTextAlignment(.trailing)
+          .applyWidgetURL(from: context.attributes.deepLinkUrl)
+        } else if let date = context.state.timerEndDateInMilliseconds {
           compactTimer(
             endDate: date,
             timerType: context.attributes.timerType ?? .circular,
@@ -175,7 +226,15 @@ public struct LiveActivityWidget: Widget {
           ).applyWidgetURL(from: context.attributes.deepLinkUrl)
         }
       } minimal: {
-        if let date = context.state.timerEndDateInMilliseconds {
+        if let startDate = context.state.elapsedTimerStartDateInMilliseconds {
+          ElapsedTimerText(
+            startTimeMilliseconds: startDate,
+            color: context.attributes.progressViewTint.map { Color(hex: $0) }
+          )
+          .font(.system(size: 11))
+          .minimumScaleFactor(0.6)
+          .applyWidgetURL(from: context.attributes.deepLinkUrl)
+        } else if let date = context.state.timerEndDateInMilliseconds {
           compactTimer(
             endDate: date,
             timerType: context.attributes.timerType ?? .circular,
@@ -189,6 +248,12 @@ public struct LiveActivityWidget: Widget {
         }
       }
     }
+
+    if #available(iOS 18.0, *) {
+      return baseConfiguration.supplementalActivityFamilies([.small])
+    } else {
+      return baseConfiguration
+    }
   }
 
   public init() {}
@@ -272,3 +337,27 @@ public struct LiveActivityWidget: Widget {
       .padding(.top, 5)
   }
 }
+
+// MARK: - Elapsed Timer View
+
+struct ElapsedTimerText: View {
+  let startTimeMilliseconds: Double
+  let color: Color?
+
+  private var startTime: Date {
+    Date(timeIntervalSince1970: startTimeMilliseconds / 1000)
+  }
+
+  var body: some View {
+    // Use Text with timerInterval for Live Activities - iOS handles the updates automatically
+    // The range goes from startTime to a far future date, with countsDown: false to count UP
+    Text(
+      timerInterval: startTime ... Date.distantFuture,
+      pauseTime: nil,
+      countsDown: false,
+      showsHours: true
+    )
+    .monospacedDigit()
+    .foregroundStyle(color ?? .primary)
+  }
+}

package/ios-files/ViewHelpers.swift

@@ -11,6 +11,47 @@ func resizableImage(imageName: String, height: CGFloat?, width: CGFloat?) -> som
     .frame(width: width, height: height)
 }
 
+@ViewBuilder
+func fixedSizeImage(name: String, size: CGFloat) -> some View {
+  Image.dynamic(assetNameOrPath: name)
+    .resizable()
+    .scaledToFit()
+    .frame(width: size, height: size)
+    .layoutPriority(0)
+}
+
+@ViewBuilder
+func smallTimerText(
+  endDate: Double,
+  isSubtitleDisplayed: Bool,
+  carPlayView: Bool = false,
+  labelColor: String?
+) -> some View {
+  Text(timerInterval: Date.toTimerInterval(miliseconds: endDate))
+    .font(carPlayView
+      ? (isSubtitleDisplayed ? .footnote : .title2)
+      : (isSubtitleDisplayed ? .footnote : .callout))
+    .fontWeight(carPlayView && !isSubtitleDisplayed ? .semibold : .medium)
+    .modifier(ConditionalForegroundViewModifier(color: labelColor))
+    .padding(.top, isSubtitleDisplayed ? 3 : 0)
+}
+
+@ViewBuilder
+func styledLinearProgressView<Content: View>(
+  tint: Color?,
+  labelColor: String?,
+  @ViewBuilder content: () -> Content
+) -> some View {
+  content()
+    .progressViewStyle(.linear)
+    .tint(tint)
+    .frame(height: 8.0)
+    .scaleEffect(x: 1, y: 2, anchor: .center)
+    .clipShape(RoundedRectangle(cornerRadius: 10))
+    .modifier(ConditionalForegroundViewModifier(color: labelColor))
+    .padding(.bottom, 6)
+}
+
 private struct ContainerSizeKey: PreferenceKey {
   static var defaultValue: CGSize?
   static func reduce(value: inout CGSize?, nextValue: () -> CGSize?) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-live-activity",
-  "version": "0.4.3-alpha1",
+  "version": "0.5.0-alpha1",
   "description": "A module for adding Live Activity to a React Native app for iOS.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -8,8 +8,7 @@
     "build": "expo-module build",
     "clean": "expo-module clean",
     "clean:plugin": "rm -rf plugin/build plugin/tsconfig.tsbuildinfo",
-    "format:check": "prettier --check .",
-    "format:fix": "prettier --write . && swiftformat --exclude \"**/node_modules/\" .",
+    "lint:fix": "expo-module eslint --fix && swiftformat --exclude \"**/node_modules/\" .",
     "lint": "expo-module eslint",
     "lint:libOnly": "expo-module eslint --ignore-pattern 'example/*'",
     "test": "expo-module test",

package/plugin/build/index.js

@@ -7,6 +7,7 @@ const config_plugins_1 = require("expo/config-plugins");
 const withConfig_1 = require("./withConfig");
 const withPlist_1 = __importDefault(require("./withPlist"));
 const withPushNotifications_1 = require("./withPushNotifications");
+const withUnsupportedOS_1 = require("./withUnsupportedOS");
 const withWidgetExtensionEntitlements_1 = require("./withWidgetExtensionEntitlements");
 const withXcode_1 = require("./withXcode");
 const withWidgetsAndLiveActivities = (config, props) => {
@@ -37,6 +38,7 @@ const withWidgetsAndLiveActivities = (config, props) => {
     if (props?.enablePushNotifications) {
         config = (0, withPushNotifications_1.withPushNotifications)(config);
     }
+    config = (0, withUnsupportedOS_1.withUnsupportedOS)(config, { silentOnUnsupportedOS: props?.silentOnUnsupportedOS ?? false });
     return config;
 };
 exports.default = withWidgetsAndLiveActivities;

package/plugin/build/types.d.ts

@@ -1,6 +1,7 @@
 import { ConfigPlugin } from '@expo/config-plugins';
 interface ConfigPluginProps {
     enablePushNotifications?: boolean;
+    silentOnUnsupportedOS?: boolean;
 }
 export type LiveActivityConfigPlugin = ConfigPlugin<ConfigPluginProps | undefined>;
 export {};

package/plugin/build/withUnsupportedOS.d.ts

@@ -0,0 +1,4 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+export declare const withUnsupportedOS: ConfigPlugin<{
+    silentOnUnsupportedOS: boolean;
+}>;

package/plugin/build/withUnsupportedOS.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withUnsupportedOS = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+const withUnsupportedOS = (config, { silentOnUnsupportedOS }) => (0, config_plugins_1.withInfoPlist)(config, (mod) => {
+    mod.modResults['ExpoLiveActivity_SilentOnUnsupportedOS'] = silentOnUnsupportedOS;
+    return mod;
+});
+exports.withUnsupportedOS = withUnsupportedOS;

package/plugin/src/index.ts

@@ -4,6 +4,7 @@ import type { LiveActivityConfigPlugin } from './types'
 import { withConfig } from './withConfig'
 import withPlist from './withPlist'
 import { withPushNotifications } from './withPushNotifications'
+import { withUnsupportedOS } from './withUnsupportedOS'
 import { withWidgetExtensionEntitlements } from './withWidgetExtensionEntitlements'
 import { withXcode } from './withXcode'
 
@@ -39,6 +40,8 @@ const withWidgetsAndLiveActivities: LiveActivityConfigPlugin = (config, props) =
     config = withPushNotifications(config)
   }
 
+  config = withUnsupportedOS(config, { silentOnUnsupportedOS: props?.silentOnUnsupportedOS ?? false })
+
   return config
 }
 

package/plugin/src/types.ts

@@ -2,6 +2,7 @@ import { ConfigPlugin } from '@expo/config-plugins'
 
 interface ConfigPluginProps {
   enablePushNotifications?: boolean
+  silentOnUnsupportedOS?: boolean
 }
 
 export type LiveActivityConfigPlugin = ConfigPlugin<ConfigPluginProps | undefined>

package/plugin/src/withUnsupportedOS.ts

@@ -0,0 +1,10 @@
+import { ConfigPlugin, withInfoPlist } from '@expo/config-plugins'
+
+export const withUnsupportedOS: ConfigPlugin<{ silentOnUnsupportedOS: boolean }> = (
+  config,
+  { silentOnUnsupportedOS }
+) =>
+  withInfoPlist(config, (mod) => {
+    mod.modResults['ExpoLiveActivity_SilentOnUnsupportedOS'] = silentOnUnsupportedOS
+    return mod
+  })

package/plugin/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/types.ts","./src/withConfig.ts","./src/withPlist.ts","./src/withPushNotifications.ts","./src/withWidgetExtensionEntitlements.ts","./src/withXcode.ts","./src/lib/getWidgetExtensionEntitlements.ts","./src/lib/getWidgetFiles.ts","./src/xcode/addBuildPhases.ts","./src/xcode/addPbxGroup.ts","./src/xcode/addProductFile.ts","./src/xcode/addTargetDependency.ts","./src/xcode/addToPbxNativeTargetSection.ts","./src/xcode/addToPbxProjectSection.ts","./src/xcode/addXCConfigurationList.ts"],"version":"5.8.3"}
+{"root":["./src/index.ts","./src/types.ts","./src/withConfig.ts","./src/withPlist.ts","./src/withPushNotifications.ts","./src/withUnsupportedOS.ts","./src/withWidgetExtensionEntitlements.ts","./src/withXcode.ts","./src/lib/getWidgetExtensionEntitlements.ts","./src/lib/getWidgetFiles.ts","./src/xcode/addBuildPhases.ts","./src/xcode/addPbxGroup.ts","./src/xcode/addProductFile.ts","./src/xcode/addTargetDependency.ts","./src/xcode/addToPbxNativeTargetSection.ts","./src/xcode/addToPbxProjectSection.ts","./src/xcode/addXCConfigurationList.ts"],"version":"5.8.3"}

package/src/index.ts

@@ -7,14 +7,38 @@ type Voidable<T> = T | void
 
 export type DynamicIslandTimerType = 'circular' | 'digital'
 
+export type ElapsedTimer = {
+  startDate: number // milliseconds timestamp (past time when timer started)
+}
+
 type ProgressBarType =
   | {
       date?: number
       progress?: undefined
+      elapsedTimer?: undefined
+      currentStep?: undefined
+      totalSteps?: undefined
     }
   | {
       date?: undefined
       progress?: number
+      elapsedTimer?: undefined
+      currentStep?: undefined
+      totalSteps?: undefined
+    }
+  | {
+      date?: undefined
+      progress?: undefined
+      elapsedTimer?: ElapsedTimer
+      currentStep?: undefined
+      totalSteps?: undefined
+    }
+  | {
+      date?: undefined
+      progress?: undefined
+      elapsedTimer?: undefined
+      currentStep?: number
+      totalSteps?: number
     }
 
 export type LiveActivityState = {
@@ -23,6 +47,7 @@ export type LiveActivityState = {
   progressBar?: ProgressBarType
   imageName?: string
   dynamicIslandImageName?: string
+  smallImageName?: string
 }
 
 export type NativeLiveActivityState = {
@@ -51,8 +76,8 @@ export type ImageAlign = 'top' | 'center' | 'bottom'
 
 export type ImageDimension = number | `${number}%`
 export type ImageSize = {
-  width: ImageDimension
-  height: ImageDimension
+  width?: ImageDimension
+  height?: ImageDimension
 }
 
 export type ImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
@@ -69,7 +94,10 @@ export type LiveActivityConfig = {
   imagePosition?: ImagePosition
   imageAlign?: ImageAlign
   imageSize?: ImageSize
+  smallImageSize?: ImageSize
   contentFit?: ImageContentFit
+  progressSegmentActiveColor?: string
+  progressSegmentInactiveColor?: string
 }
 
 export type ActivityTokenReceivedEvent = {
@@ -107,15 +135,24 @@ function assertIOS(name: string) {
 function normalizeConfig(config?: LiveActivityConfig) {
   if (config === undefined) return config
 
-  const { padding, imageSize, ...base } = config
+  const { padding, imageSize, smallImageSize, progressSegmentActiveColor, progressSegmentInactiveColor, ...base } =
+    config
   type NormalizedConfig = LiveActivityConfig & {
     paddingDetails?: Padding
     imageWidth?: number
     imageHeight?: number
     imageWidthPercent?: number
     imageHeightPercent?: number
+    smallImageWidth?: number
+    smallImageHeight?: number
+    smallImageWidthPercent?: number
+    smallImageHeightPercent?: number
+  }
+  const normalized: NormalizedConfig = {
+    ...base,
+    progressSegmentActiveColor,
+    progressSegmentInactiveColor,
   }
-  const normalized: NormalizedConfig = { ...base }
 
   // Normalize padding: keep number in padding, object in paddingDetails
   if (typeof padding === 'number') {
@@ -124,33 +161,38 @@ function normalizeConfig(config?: LiveActivityConfig) {
     normalized.paddingDetails = padding
   }
 
-  // Normalize imageSize: object with width/height each a number (points) or percent string like '50%'
-  if (imageSize) {
+  // Helper to parse a dimension value (number or percent string like '50%')
+  const parseDimension = (
+    value: ImageDimension | undefined,
+    fieldName: string
+  ): { absolute?: number; percent?: number } => {
+    if (value === undefined) return {}
+
+    if (typeof value === 'number') return { absolute: value }
     const regExp = /^(100(?:\.0+)?|\d{1,2}(?:\.\d+)?)%$/ // Matches 0.0% to 100.0%
+    const match = value.trim().match(regExp)
+    if (match) return { percent: Number(match[1]) }
+    throw new Error(`${fieldName} percent string must be in format "0%" to "100%"`)
+  }
 
-    const { width, height } = imageSize
-
-    if (typeof width === 'number') {
-      normalized.imageWidth = width
-    } else if (typeof width === 'string') {
-      const match = width.trim().match(regExp)
-      if (match) {
-        normalized.imageWidthPercent = Number(match[1])
-      } else {
-        throw new Error('imageSize.width percent string must be in format "0%" to "100%"')
-      }
-    }
+  // Normalize imageSize
+  if (imageSize) {
+    const w = parseDimension(imageSize.width, 'imageSize.width')
+    const h = parseDimension(imageSize.height, 'imageSize.height')
+    if (w.absolute !== undefined) normalized.imageWidth = w.absolute
+    if (w.percent !== undefined) normalized.imageWidthPercent = w.percent
+    if (h.absolute !== undefined) normalized.imageHeight = h.absolute
+    if (h.percent !== undefined) normalized.imageHeightPercent = h.percent
+  }
 
-    if (typeof height === 'number') {
-      normalized.imageHeight = height
-    } else if (typeof height === 'string') {
-      const match = height.trim().match(regExp)
-      if (match) {
-        normalized.imageHeightPercent = Number(match[1])
-      } else {
-        throw new Error('imageSize.height percent string must be in format "0%" to "100%"')
-      }
-    }
+  // Normalize smallImageSize
+  if (smallImageSize) {
+    const w = parseDimension(smallImageSize.width, 'smallImageSize.width')
+    const h = parseDimension(smallImageSize.height, 'smallImageSize.height')
+    if (w.absolute !== undefined) normalized.smallImageWidth = w.absolute
+    if (w.percent !== undefined) normalized.smallImageWidthPercent = w.percent
+    if (h.absolute !== undefined) normalized.smallImageHeight = h.absolute
+    if (h.percent !== undefined) normalized.smallImageHeightPercent = h.percent
   }
 
   return normalized

package/.prettierignore

@@ -1,5 +0,0 @@
-/build
-/example/.expo
-/example/ios
-/plugin/build
-/.eslintrc.js