NavigationView bar material invisible on iOS 15

user_9607863 0
Viewed 2763

On iOS 15, an app with a NavigationView with .inline mode no longer shows the blurry material color you would see for the navigation bar.

Example code:

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red.ignoresSafeArea()
                
                Text("Content")
            }
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Comparison:

iOS 14.4 iOS 15
iOS 14.4 result iOS 15 result

How can I fix this to keep the iOS 14 behaviour?

swiftui-navigationview swiftui swift
2 Answers

Although it is not perfect, there is a way to solve this by using SwiftUI-Introspect.

It still has a problem that for the first render the change has not had an effect yet.

The solution I found was partially discovered from here.

With Introspect, I added the following code:

NavigationView {
    /* ... */
}
.introspectNavigationController { navController in
    navController.navigationBar.scrollEdgeAppearance = navController.navigationBar.standardAppearance
    navController.navigationBar.isTranslucent = true
}

It now works, but would be nicer if there was a 100% SwiftUI solution.

user_96078630

one workaround is this:

 struct ContentView: View {
    
    var body: some View {
        NavigationView {
            ZStack {
                // choose your color here
                Color(red: 1, green: 0.8, blue: 0.8).ignoresSafeArea()
                Color.red.edgesIgnoringSafeArea(.bottom)
                Text("Content")
            }.navigationBarTitleDisplayMode(.inline)
        }
    }
}
user_119698170
Related