SwiftUI TabView brightness views vertical location

Question

I'm trying to change the brightness of a TabView in SwiftUI, but whenever the brightness toggles, the sub-views change their vertical position. This is highly mysterious to me, as it seems strange for brightness to have any influence at all on the position of views.

If you've been following my past few questions, you might recognize that I want to change the brightness because I want to dim the background view as a new view slides up (on the press of a button). That's why, in the sample code, we must include the Z-Stack.

Sample Code:

struct ContentView: View {
    @State var press: Bool = Bool()
    
    var body: some View {
        ZStack {
            TabView {
                NavigationView {
                    Button(action: { press.toggle() }) {
                        Text("Toggle")
                    }
                }
                .tabItem {
                    Image(systemName: "square.stack").font(.title)
                    Text("View One")
                }
                
                NavigationView {
                    Button(action: { press.toggle() }) {
                        Text("Toggle")
                    }
                }
                .tabItem {
                    Image(systemName: "checkmark.square")
                    Text("View Two")
                }
            }
            .brightness(press ? -0.1: 0)
        }
    }
}

Janicejanicki

Answer 1

The issue is with the multiple NavigationViews that are inside the TabView You really are supposed to have only 1 NavigationView at the root of the view hierarchy. Using multiple NavigationViews is discouraged and can lead to unexpected results, like this. Therefore, the inside of the body should be:

NavigationView {
    ZStack {
        TabView {
            Button(action: { press.toggle() }) {
                Text("Toggle")
            }
            .tabItem {
                Image(systemName: "square.stack")
                Text("View One")
            }
            
            Button(action: { press.toggle() }) {
                Text("Toggle")
            }
            .tabItem {
                Image(systemName: "checkmark.square")
                Text("View Two")
            }
        }
        .brightness(press ? -0.1: 0)
    }
}

Bendy