SwiftUI: Malfunctioning NavigationBar and TabBar in iOS 15

Question

Created Oct ’21

Replies 3

Boosts 0

Views 1.7k

Participants 5

In SwiftUI, I would like to use a background color for my view while also setting navigationViewStyle to .stack, to force a single-column stack navigation Plus-sized devices.

 var body: some View {
    TabView {
        NavigationView {
            ScrollView {
                ForEach(0..<100) { _ in
                    Text("Bubble")
                        .padding()
                }
                .frame(maxWidth: .infinity)
            }
            .navigationTitle("Foam")
//            .background(Color.yellow) // I can do this …
        }
//        .navigationViewStyle(.stack) // … or this, but not both!
        .tabItem {
            Label("Beer", systemImage: "swift")
        }
    }
}

However, when I do both, the navigation bar won't collapse when I scroll down. Also both the navigation bar and tab bar appear without background.

Simulator Screen Shot - iPhone 13 Pro Max - 2021-10-01 at 16.27.00.png

When I only set the background, but leave out the line that sets the navigationViewStyle, everything looks fine in portrait mode, or smaller devices. But on a Plus-size device in landscape, it looks like this:

Simulator Screen Shot - iPhone 13 Pro Max - 2021-10-01 at 16.26.22.png

So I guess I really can't do this without setting the navigationViewStyle.

What can I do to fix this? Is this a bug that should be fixed by Apple? All help is greatly appreciated.

Boost

Answer 1

n-tornado OP

Oct ’21

I'm running into the same issue and I haven't found a good workaround — other than removing the NavigationView, which requires a lot of additional work...

0

Answer 2

tbone88 OP

Nov ’21

I'm facing this exact same issue as well. Whenever adding a background to the view inside a NavigationView inside a TabView, the collapsing behavior of the navigation bar no longer works. Have you found a workaround for it yet?

0

Answer 3

thegayngler OP

Jan ’22

I am running into the same issue myself.

0

	var body: some View {
	TabView {
	NavigationView {
	ScrollView {
	ForEach(0..<100) { _ in
	Text("Bubble")
	.padding()
	}
	.frame(maxWidth: .infinity)
	}
	.navigationTitle("Foam")
	// .background(Color.yellow) // I can do this …
	}
	// .navigationViewStyle(.stack) // … or this, but not both!
	.tabItem {
	Label("Beer", systemImage: "swift")
	}
	}
	}