expo-live-activity 0.4.2 → 0.5.0-alpha1

package/ios-files/LiveActivityView.swift

@@ -18,6 +18,8 @@ import WidgetKit
   struct DebugLog: View {
     #if DEBUG
       private let message: String
+
+      @discardableResult
       init(_ message: String) {
         self.message = message
         print(message)
@@ -29,11 +31,31 @@ import WidgetKit
           .foregroundStyle(.red)
       }
     #else
+      @discardableResult
       init(_: String) {}
       var body: some View { EmptyView() }
     #endif
   }
 
+  struct SegmentedProgressView: View {
+    let currentStep: Int
+    let totalSteps: Int
+    let activeColor: Color
+    let inactiveColor: Color
+    var height: CGFloat = 4
+
+    var body: some View {
+      let clampedCurrentStep = min(max(currentStep, 0), totalSteps)
+      HStack(spacing: 4) {
+        ForEach(0 ..< totalSteps, id: \.self) { index in
+          RoundedRectangle(cornerRadius: 2)
+            .fill(index < clampedCurrentStep ? activeColor : inactiveColor)
+            .frame(height: height)
+        }
+      }
+    }
+  }
+
   struct LiveActivityView: View {
     let contentState: LiveActivityAttributes.ContentState
     let attributes: LiveActivityAttributes
@@ -43,7 +65,7 @@ import WidgetKit
       attributes.progressViewTint.map { Color(hex: $0) }
     }
 
-    private var imageAlignment: Alignment {
+    private var imageVerticalAlignment: VerticalAlignment {
       switch attributes.imageAlign {
       case "center":
         return .center
@@ -54,69 +76,142 @@ import WidgetKit
       }
     }
 
-    private func alignedImage(imageName: String) -> some View {
-      let defaultHeight: CGFloat = 64
-      let defaultWidth: CGFloat = 64
+    private var hasImage: Bool {
+      contentState.imageName != nil
+    }
+
+    private var isLeftImage: Bool {
+      (attributes.imagePosition ?? "right").hasPrefix("left")
+    }
+
+    private var isStretch: Bool {
+      (attributes.imagePosition ?? "right").contains("Stretch")
+    }
+
+    var body: some View {
+      if #available(iOS 18.0, *) {
+        LiveActivityView_iOS18(
+          contentState: contentState,
+          attributes: attributes,
+          imageContainerSize: $imageContainerSize,
+          smallView: {
+            LiveActivitySmallView(
+              contentState: contentState,
+              attributes: attributes,
+              imageContainerSize: $imageContainerSize,
+              alignedImage: { imageName, horizontalAlignment, isSmallView in
+                AnyView(alignedImage(imageName: imageName, horizontalAlignment: horizontalAlignment, isSmallView: isSmallView))
+              }
+            )
+          },
+          mediumView: {
+            LiveActivityMediumView(
+              contentState: contentState,
+              attributes: attributes,
+              imageContainerSize: $imageContainerSize,
+              alignedImage: { imageName, horizontalAlignment, isSmallView in
+                AnyView(alignedImage(imageName: imageName, horizontalAlignment: horizontalAlignment, isSmallView: isSmallView))
+              }
+            )
+          }
+        )
+      } else {
+        // iOS 17: missing activityFamily in environment -> default to medium
+        LiveActivityMediumView(
+          contentState: contentState,
+          attributes: attributes,
+          imageContainerSize: $imageContainerSize,
+          alignedImage: { imageName, horizontalAlignment, isSmallView in
+            AnyView(alignedImage(imageName: imageName, horizontalAlignment: horizontalAlignment, isSmallView: isSmallView))
+          }
+        )
+      }
+    }
+
+    private func alignedImage(imageName: String, horizontalAlignment: HorizontalAlignment, isSmallView: Bool = false) -> some View {
+      let defaultHeight: CGFloat = isSmallView ? 28 : 64
+      let defaultWidth: CGFloat = isSmallView ? 28 : 64
       let containerHeight = imageContainerSize?.height
       let containerWidth = imageContainerSize?.width
-      let hasWidthConstraint = (attributes.imageWidthPercent != nil) || (attributes.imageWidth != nil)
+
+      // For small view, check small-specific dimensions first, then fall back to global
+      let imageWidth = isSmallView ? (attributes.smallImageWidth ?? attributes.imageWidth) : attributes.imageWidth
+      let imageHeight = isSmallView ? (attributes.smallImageHeight ?? attributes.imageHeight) : attributes.imageHeight
+      let imageWidthPercent = isSmallView ? (attributes.smallImageWidthPercent ?? attributes.imageWidthPercent) : attributes.imageWidthPercent
+      let imageHeightPercent = isSmallView ? (attributes.smallImageHeightPercent ?? attributes.imageHeightPercent) : attributes.imageHeightPercent
+
+      let hasWidthConstraint = (imageWidthPercent != nil) || (imageWidth != nil)
 
       let computedHeight: CGFloat? = {
-        if let percent = attributes.imageHeightPercent {
+        if let percent = imageHeightPercent {
           let clamped = min(max(percent, 0), 100) / 100.0
           // Use the row height as a base. Fallback to default when row height is not measured yet.
           let base = (containerHeight ?? defaultHeight)
           return base * clamped
-        } else if let size = attributes.imageHeight {
+        } else if let size = imageHeight {
           return CGFloat(size)
         } else if hasWidthConstraint {
           // Mimic CSS: when only width is set, keep height automatic to preserve aspect ratio
           return nil
         } else {
           // Mimic CSS: this works against CSS but provides a better default behavior.
-          // When no width/height is set, use a default size (64pt)
+          // When no width/height is set, use a default size (64 / 28pt)
           // Width will adjust automatically base on aspect ratio
           return defaultHeight
         }
       }()
 
       let computedWidth: CGFloat? = {
-        if let percent = attributes.imageWidthPercent {
+        if let percent = imageWidthPercent {
           let clamped = min(max(percent, 0), 100) / 100.0
           let base = (containerWidth ?? defaultWidth)
           return base * clamped
-        } else if let size = attributes.imageWidth {
+        } else if let size = imageWidth {
           return CGFloat(size)
         } else {
           return nil // Keep aspect fit based on height
         }
       }()
 
+      let resolvedHeight = computedHeight ?? defaultHeight
+
+      let resolvedWidth: CGFloat? = {
+        if let w = computedWidth { return w }
+
+        if let uiImage = UIImage.dynamic(assetNameOrPath: imageName) {
+          let h = max(uiImage.size.height, 1)
+          let ratio = uiImage.size.width / h
+          return resolvedHeight * ratio
+        }
+
+        return nil
+      }()
+
       return ZStack(alignment: .center) {
         Group {
-          let fit = attributes.contentFit ?? "cover"
+          let fit = attributes.contentFit ?? "contain"
           switch fit {
           case "contain":
-            Image.dynamic(assetNameOrPath: imageName).resizable().scaledToFit().frame(width: computedWidth, height: computedHeight)
+            Image.dynamic(assetNameOrPath: imageName).resizable().scaledToFit().frame(width: resolvedWidth, height: resolvedHeight)
           case "fill":
             Image.dynamic(assetNameOrPath: imageName).resizable().frame(
-              width: computedWidth,
-              height: computedHeight
+              width: resolvedWidth,
+              height: resolvedHeight
             )
           case "none":
-            Image.dynamic(assetNameOrPath: imageName).renderingMode(.original).frame(width: computedWidth, height: computedHeight)
+            Image.dynamic(assetNameOrPath: imageName).renderingMode(.original).frame(width: resolvedWidth, height: resolvedHeight)
           case "scale-down":
             if let uiImage = UIImage.dynamic(assetNameOrPath: imageName) {
               // Determine the target box. When width/height are nil, we use image's intrinsic dimension for comparison.
-              let targetHeight = computedHeight ?? uiImage.size.height
-              let targetWidth = computedWidth ?? uiImage.size.width
+              let targetHeight = resolvedHeight
+              let targetWidth = resolvedWidth ?? uiImage.size.width
               let shouldScaleDown = uiImage.size.height > targetHeight || uiImage.size.width > targetWidth
 
               if shouldScaleDown {
                 Image(uiImage: uiImage)
                   .resizable()
                   .scaledToFit()
-                  .frame(width: computedWidth, height: computedHeight)
+                  .frame(width: resolvedWidth, height: resolvedHeight)
               } else {
                 Image(uiImage: uiImage)
                   .renderingMode(.original)
@@ -127,15 +222,19 @@ import WidgetKit
             }
           case "cover":
             Image.dynamic(assetNameOrPath: imageName).resizable().scaledToFill().frame(
-              width: computedWidth,
-              height: computedHeight
+              width: resolvedWidth,
+              height: resolvedHeight
             ).clipped()
           default:
             DebugLog("⚠️[ExpoLiveActivity] Unknown contentFit '\(fit)'")
           }
         }
       }
-      .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: imageAlignment)
+      .frame(
+        maxWidth: .infinity,
+        maxHeight: .infinity,
+        alignment: Alignment(horizontal: horizontalAlignment, vertical: imageVerticalAlignment)
+      )
       .background(
         GeometryReader { proxy in
           Color.clear
@@ -149,98 +248,28 @@ import WidgetKit
         }
       )
     }
+  }
 
-    var body: some View {
-      let defaultPadding = 24
-
-      let top = CGFloat(
-        attributes.paddingDetails?.top
-          ?? attributes.paddingDetails?.vertical
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      let bottom = CGFloat(
-        attributes.paddingDetails?.bottom
-          ?? attributes.paddingDetails?.vertical
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      let leading = CGFloat(
-        attributes.paddingDetails?.left
-          ?? attributes.paddingDetails?.horizontal
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      let trailing = CGFloat(
-        attributes.paddingDetails?.right
-          ?? attributes.paddingDetails?.horizontal
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      VStack(alignment: .leading) {
-        let position = attributes.imagePosition ?? "right"
-        let isStretch = position.contains("Stretch")
-        let isLeftImage = position.hasPrefix("left")
-        let hasImage = contentState.imageName != nil
-        let effectiveStretch = isStretch && hasImage
-
-        HStack(alignment: .center) {
-          if hasImage, isLeftImage {
-            if let imageName = contentState.imageName {
-              alignedImage(imageName: imageName)
-            }
-          }
-
-          VStack(alignment: .leading, spacing: 2) {
-            Text(contentState.title)
-              .font(.title2)
-              .fontWeight(.semibold)
-              .modifier(ConditionalForegroundViewModifier(color: attributes.titleColor))
+  @available(iOS 18.0, *)
+  private struct LiveActivityView_iOS18<Small: View, Medium: View>: View {
+    let contentState: LiveActivityAttributes.ContentState
+    let attributes: LiveActivityAttributes
+    @Binding var imageContainerSize: CGSize?
 
-            if let subtitle = contentState.subtitle {
-              Text(subtitle)
-                .font(.title3)
-                .modifier(ConditionalForegroundViewModifier(color: attributes.subtitleColor))
-            }
+    let smallView: () -> Small
+    let mediumView: () -> Medium
 
-            if effectiveStretch {
-              if let date = contentState.timerEndDateInMilliseconds {
-                ProgressView(timerInterval: Date.toTimerInterval(miliseconds: date))
-                  .tint(progressViewTint)
-                  .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-              } else if let progress = contentState.progress {
-                ProgressView(value: progress)
-                  .tint(progressViewTint)
-                  .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-              }
-            }
-          }.layoutPriority(1)
+    @Environment(\.activityFamily) private var activityFamily
 
-          if hasImage, !isLeftImage { // right side (default)
-            Spacer()
-            if let imageName = contentState.imageName {
-              alignedImage(imageName: imageName)
-            }
-          }
-        }
-
-        if !effectiveStretch {
-          if let date = contentState.timerEndDateInMilliseconds {
-            ProgressView(timerInterval: Date.toTimerInterval(miliseconds: date))
-              .tint(progressViewTint)
-              .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-          } else if let progress = contentState.progress {
-            ProgressView(value: progress)
-              .tint(progressViewTint)
-              .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-          }
-        }
+    var body: some View {
+      switch activityFamily {
+      case .small:
+        smallView()
+      case .medium:
+        mediumView()
+      @unknown default:
+        mediumView()
       }
-      .padding(EdgeInsets(top: top, leading: leading, bottom: bottom, trailing: trailing))
     }
   }
 

package/ios-files/LiveActivityWidget.swift

@@ -2,14 +2,42 @@ import ActivityKit
 import SwiftUI
 import WidgetKit
 
-struct LiveActivityAttributes: ActivityAttributes {
-  struct ContentState: Codable, Hashable {
+public struct LiveActivityAttributes: ActivityAttributes {
+  public struct ContentState: Codable, Hashable {
     var title: String
     var subtitle: String?
     var timerEndDateInMilliseconds: Double?
     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,
+      subtitle: String? = nil,
+      timerEndDateInMilliseconds: Double? = nil,
+      progress: Double? = nil,
+      imageName: String? = nil,
+      dynamicIslandImageName: String? = nil,
+      smallImageName: String? = nil,
+      elapsedTimerStartDateInMilliseconds: Double? = nil,
+      currentStep: Int? = nil,
+      totalSteps: Int? = nil
+    ) {
+      self.title = title
+      self.subtitle = subtitle
+      self.timerEndDateInMilliseconds = timerEndDateInMilliseconds
+      self.progress = progress
+      self.imageName = imageName
+      self.dynamicIslandImageName = dynamicIslandImageName
+      self.smallImageName = smallImageName
+      self.elapsedTimerStartDateInMilliseconds = elapsedTimerStartDateInMilliseconds
+      self.currentStep = currentStep
+      self.totalSteps = totalSteps
+    }
   }
 
   var name: String
@@ -27,27 +55,100 @@ 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?
 
-  enum DynamicIslandTimerType: String, Codable {
+  public init(
+    name: String,
+    backgroundColor: String? = nil,
+    titleColor: String? = nil,
+    subtitleColor: String? = nil,
+    progressViewTint: String? = nil,
+    progressViewLabelColor: String? = nil,
+    deepLinkUrl: String? = nil,
+    timerType: DynamicIslandTimerType? = nil,
+    padding: Int? = nil,
+    paddingDetails: PaddingDetails? = nil,
+    imagePosition: String? = nil,
+    imageWidth: Int? = nil,
+    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,
+    progressSegmentActiveColor: String? = nil,
+    progressSegmentInactiveColor: String? = nil
+  ) {
+    self.name = name
+    self.backgroundColor = backgroundColor
+    self.titleColor = titleColor
+    self.subtitleColor = subtitleColor
+    self.progressViewTint = progressViewTint
+    self.progressViewLabelColor = progressViewLabelColor
+    self.deepLinkUrl = deepLinkUrl
+    self.timerType = timerType
+    self.padding = padding
+    self.paddingDetails = paddingDetails
+    self.imagePosition = imagePosition
+    self.imageWidth = imageWidth
+    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 {
     case circular
     case digital
   }
 
-  struct PaddingDetails: Codable, Hashable {
+  public struct PaddingDetails: Codable, Hashable {
     var top: Int?
     var bottom: Int?
     var left: Int?
     var right: Int?
     var vertical: Int?
     var horizontal: Int?
+
+    public init(
+      top: Int? = nil,
+      bottom: Int? = nil,
+      left: Int? = nil,
+      right: Int? = nil,
+      vertical: Int? = nil,
+      horizontal: Int? = nil
+    ) {
+      self.top = top
+      self.bottom = bottom
+      self.left = left
+      self.right = right
+      self.vertical = vertical
+      self.horizontal = horizontal
+    }
   }
 }
 
-struct LiveActivityWidget: Widget {
-  var body: some WidgetConfiguration {
-    ActivityConfiguration(for: LiveActivityAttributes.self) { context in
+@available(iOS 16.1, *)
+public struct LiveActivityWidget: Widget {
+  public var body: some WidgetConfiguration {
+    let baseConfiguration = ActivityConfiguration(for: LiveActivityAttributes.self) { context in
       LiveActivityView(contentState: context.state, attributes: context.attributes)
         .activityBackgroundTint(
           context.attributes.backgroundColor.map { Color(hex: $0) }
@@ -70,12 +171,28 @@ 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
             )
             .padding(.horizontal, 5)
             .applyWidgetURL(from: context.attributes.deepLinkUrl)
+          } else if let progress = context.state.progress {
+            dynamicIslandExpandedBottomProgress(
+              progress: progress, progressViewTint: context.attributes.progressViewTint
+            )
+            .padding(.horizontal, 5)
+            .applyWidgetURL(from: context.attributes.deepLinkUrl)
           }
         }
       } compactLeading: {
@@ -85,25 +202,62 @@ 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,
             progressViewTint: context.attributes.progressViewTint
           ).applyWidgetURL(from: context.attributes.deepLinkUrl)
+        } else if let progress = context.state.progress {
+          compactProgress(
+            progress: progress,
+            progressViewTint: context.attributes.progressViewTint
+          ).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,
             progressViewTint: context.attributes.progressViewTint
           ).applyWidgetURL(from: context.attributes.deepLinkUrl)
+        } else if let progress = context.state.progress {
+          compactProgress(
+            progress: progress,
+            progressViewTint: context.attributes.progressViewTint
+          ).applyWidgetURL(from: context.attributes.deepLinkUrl)
         }
       }
     }
+
+    if #available(iOS 18.0, *) {
+      return baseConfiguration.supplementalActivityFamilies([.small])
+    } else {
+      return baseConfiguration
+    }
   }
 
+  public init() {}
+
   @ViewBuilder
   private func compactTimer(
     endDate: Double,
@@ -166,4 +320,44 @@ struct LiveActivityWidget: Widget {
     )
     .progressViewStyle(.circular)
   }
+
+  private func compactProgress(
+    progress: Double,
+    progressViewTint: String?
+  ) -> some View {
+    ProgressView(value: progress)
+      .progressViewStyle(.circular)
+      .tint(progressViewTint.map { Color(hex: $0) })
+  }
+
+  private func dynamicIslandExpandedBottomProgress(progress: Double, progressViewTint: String?) -> some View {
+    ProgressView(value: progress)
+      .foregroundStyle(.white)
+      .tint(progressViewTint.map { Color(hex: $0) })
+      .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?) {