Toolbar disappears when StackNavigationViewStyle on iPad | SwiftUI iOS 15

326 Views Asked by At

I have this TabView:

ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)){
        TabView(selection: $mainViewProperties.currentView) {
            
           ...
            
            //HOME
            NavigationView{
                HomeView(
                    
                )
                    .navigationBarTitleDisplayMode(.inline)
            }
            .tag(MainViewProperties.Views.HOME)
            
            ...
        }
        
        //My Custom NavBar
        CustomBottomNav(selectedTab: $mainViewProperties.currentView)
            .padding()
         
    }

And the HomeView's body is this:

    List{
        ForEach((0...30), id: \.self){ i in
            HStack{
                Spacer()
                Text("New \(i)")
                Spacer()
            }
                .padding()
                .background(Color.backgroundOver)
                .cornerRadius(.lotoUpCornerRadius)
                .lotoUpShadow() // <- CUSTOM EXTENSION
            
            //Bottom padding
            if i == 30 {
                VStack{
                    
                }
                .frame(height: .paddingForBottomNav) // <- CUSTOM EXTENSION
            }
        }
        .listRowSeparator(.hidden)
        .listRowBackground(Color.background)
    }
    .listStyle(PlainListStyle())
    .background(
        Color.background
    )
    .toolbar {
        ToolbarItem(placement: .principal){
            
            Text(String.R.home_title)
                .font(getLotoUpFont(size: 20))
                .bold()
                .foregroundWithPrimaryGradient() // <- CUSTOM EXTENSION
        }
    }

That look like this:

enter image description here

I don't want the side bar navigation on the iPad, so I added StackNavigationViewStyle to the NavigationView like this:

            //HOME
            NavigationView{
                HomeView(
                    
                )
                    .navigationBarTitleDisplayMode(.inline)
            }
            .navigationViewStyle(.stack) //<- HERE
            .tag(MainViewProperties.Views.HOME)

But then the Toolbar's background was not displayed anymore:

enter image description here

How can I get the Stack Navigation and the Toolbar's background get along together?

PD: I also tried this on HomeView:

    .toolbar {
        ToolbarItem(placement: .principal){
            HStack{
                Spacer()
                Text(String.R.home_title)
                    .font(getLotoUpFont(size: 20))
                    .bold()
                    .foregroundWithPrimaryGradient()
                Spacer()
            }
            .background(
                Color.red
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .edgesIgnoringSafeArea(.all)
            )
        }
    }

But it lets spaces that I don't want:

enter image description here

EDIT: I tested this on a real device (iPhone 8 Plus) and worked fine, the NavigationBar was there, but on the simulated iPhone 8 plus the NavigationBar background was translucent. So now I'm suspecting on the simulator. I don't have an iPad to test this out though.

1

There are 1 best solutions below

0
On BEST ANSWER

It seems to be a bug on simulator with iOS 15. On iOS 15.2 it works just fine.