Text view with .timer style expands too much in Live Activity

I'm implementing a Timer in my app and I want the countdown to show up as a Live Activity. It works, but I get a very weird expanding effect on the Text view. The screenshots below show the issue, I can't tell if it's a bug or if I'm doing something wrong.

My goal is to shrink the live activity black area so that it's a smaller, more reasonable size. There's no reason for it to be as large as it is on the trailing side.

The Live Activity code (very basic):



  } dynamicIsland: { context in
       } compactTrailing: {

           // Important bit is here
           Text(Date(), style: .timer)

       } 
   }

Which renders like this, with a lot of space after the timer:

Adding a background color shows the view is expanding:

Text(Date(), style: .timer)
    .background(.red)

And if I replace the timer with a standard text view, then no issue:

Text("Hello")
       .background(.red)

Getting out of live activities and showing a standard timer view, there is no expansion issue:

struct TestView: View {
    var body: some View {
        Text(Date(), style: .timer)
            .background(.red)
    }
}

So... I'm stumped. Any advice is appreciated.

  • I've also run into this problem. Any solutions?

Add a Comment

Replies

Have you found any solution to this problem? I have an important need for a timer in live activity yet I can't seem to find any fix for this...

Same, also having this issue. Any fix for this?

  • It does not change the initial problem of the width, but at least the timer is aligned at the end.

    .multilineTextAlignment(.trailing)

Add a Comment

Here's a workaround I use.

  1. Give the Text a fixed width according to the end date.

  2. Use minimumScaleFactor to prevent the given width truncating the text.

The downside of this approach is that the width won't update as the timer counts down to less digits.

Example code and ref: https://stackoverflow.com/a/76861806/11153088

Also looking for a solution to this. This bug goes against Apple's own guidelines for dynamic island. Also if you notice, it expands on both sides :(