Quick Tip Icon
Quick Tip

Using compositing group for unifying shapes within buttons in SwiftUI

We are adding some in-app purchase buttons in our next update in Exsto and we noticed a visual glitch in button pressed state. Since our buttons have a complex hierarchy with a tag and a border, the transparent layers weren't blending correctly by default. The border and tag each became semi transparent and blended into each other.

Two screenshots showing buttons with and without compositingGroup() applied.

We could fix the visual glitch by applying the compositingGroup() modifier to the ZStack containing both shapes.

Button {
    // button action
} label: {
        .background {
            ZStack {
Integrating SwiftUI into UIKit Apps by Natalia Panferova book coverIntegrating SwiftUI into UIKit Apps by Natalia Panferova book cover

Check out our book!

Integrating SwiftUI into UIKit Apps

Integrating SwiftUI intoUIKit Apps


A detailed guide on gradually adopting SwiftUI in UIKit projects.

  • Discover various ways to add SwiftUI views to existing UIKit projects
  • Use Xcode previews when designing and building UI
  • Update your UIKit apps with new features such as Swift Charts and Lock Screen widgets
  • Migrate larger parts of your apps to SwiftUI while reusing views and controllers built in UIKit