Customize navigation bar background

SwiftUI has some new APIs for iOS 16 to customize toolbars, including visibility and background. To set custom background on toolbars we can use toolbarBackground() modifier. To set a background on a navigation bar that shows when content scrolls behind the bar, we should specify a ShapeStyle, such as a color, material or gradient and navigationBar placement in the modifier.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(1...20, id: \.self) {
                Text("\($0)")
            }
            .listStyle(.plain)
            .navigationTitle("My List")
            
            .toolbarBackground(.indigo, in: .navigationBar)
        }
    }
}

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