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.

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

Button {
    // button action
} label: {
    MainContent()
        .background {
            ZStack {
                ButtonOutline()
                SavingsTag()
            }
            .compositingGroup()
        }
} 

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 iOS 16 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