How to use AccessoryWidgetBackground with containerBackground API on iOS 17

Question

I have an accessoryCircular Lock Screen widget built for iOS 16:

ZStack {
    AccessoryWidgetBackground()
    VStack {
        Text("MON")
            .font(.caption)
        Text("6")
            .font(.title)
    }
}

When run on iOS 17 it renders an error “Please adopt containerBackground API”. So I changed it to:

VStack {
    Text("MON")
        .font(.caption)
    Text("6")
        .font(.title)
}
.containerBackground(for: .widget) {
    AccessoryWidgetBackground()
}

This causes the error to go away but the circular background is no longer visible (tested with iPadOS 17b2). What’s the right way to implement this?

1.4k

Posted by

Jordan

Reply

Add a Comment

Answer 1

I made it working using:

AccessoryWidgetBackground()
  .containerBackground(for: .widget) {
    EmptyView()
  }

If you plan to support older versions prior to iOS 17 I'm using this custom modifier:

extension View {

    func widgetBackground(_ backgroundView: some View) -> some View {
        if #available(iOSApplicationExtension 17.0, *) {
            return containerBackground(for: .widget) {
                backgroundView
            }
        } else {
            return background(backgroundView)
        }
    }
}

and using it instead of .containerBackground()

Posted by

Palli_k

Add a Comment

Answer 2

Thanks @Palli_k, I don't know if there's any better/correct way of doing it but using:

ZStack {
  AccessoryWidgetBackground()
  [...]
}
.widgetBackground(backgroundView: EmptyView())

At least seems to get rid of the error. While keeping the functionality and UI the same..

I have no idea what Apple was thinking.. even their own API is still wrong, 1w after the public iOS 17 release: https://developer.apple.com/documentation/widgetkit/accessorywidgetbackground

If there's any good resource about how .containerBackground is actually supposed to work, please lmk..

Posted by

henrikfrommutlangen

Add a Comment

How to use AccessoryWidgetBackground with containerBackground API on iOS 17

Replies