How to use AccessoryWidgetBackground with containerBackground API on iOS 17

Question

Jordan OP

Created Jul ’23

Replies 2

Boosts 1

Views 1.5k

Participants 3

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?

Boost

Answer 1

Palli_k OP

Jul ’23

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()

0

Answer 2

henrikfrommutlangen OP

Sep ’23

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..

0