Quick Tip Icon
Quick Tip

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

UPDATED FOR iOS 17!

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