NavigationView bar material invisible on iOS 15

Question

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

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

I think it's a new design thing. It's the same with `TabView` - when the background doesn't scroll, there is no line. If you put the `ZStack` in a `ScrollView` you get the old behavior back, kind of. — aheze, Jun 23 '21 at 21:12
@aheze I heard something on Twitter that this is part of the "What's new in UIKit" so I may have a watch of that WWDC session and then change the behaviour with [Introspect](https://github.com/siteline/SwiftUI-Introspect)... but I wish there is a nicer solution. — George, Jun 23 '21 at 21:30

George · Answer 1 · 2021-06-23T23:25:00.993

0

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.

edited Jun 23 '21 at 23:25

answered Jun 23 '21 at 22:54

George

25,988
10
79
133

1

This works well for me when the navigation bar is always inline, but on pages where there's a large nav title it shows the gray background and line at the bottom of the title - any idea how you could restore the normal transparent appearance for the large title? – sia Jul 06 '21 at 00:20
1

@sia I'm not sure, I gave up with this and just accepted the change. However if you search around for a UIKit solution, then that's what you need. The single-frame flash was a deal-breaker for me, which is why I decided not to use this code. – George Jul 06 '21 at 01:36

workingdog support Ukraine · Answer 2 · 2021-06-24T00:05:33.990

0

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

edited Jun 24 '21 at 00:05

answered Jun 23 '21 at 23:49

workingdog support Ukraine

26,280
4
27
37

NavigationView bar material invisible on iOS 15

2 Answers2

Linked