Stack Hides Behind Tab Bar in SwiftUI

Question

I am new to SwiftUI and using a tab bar. Inside my tab bar there are 4 views, of which I made different class for each. Now I am using a VStack for the rectangles but these rectangles hide behind the tab bar. I am attaching screenshot for this:

and here is my code:


struct ReportIncidentView: View {
    var body: some View {
        
        ZStack(alignment: .bottom) {
            LinearGradient(gradient: Gradient(colors: [Color(ColorName.gradient1.rawValue), Color(ColorName.appBlue.rawValue)]), startPoint: .top, endPoint: .bottom)
         
            VStack(alignment: .leading) {
                
                Text("Start Questionairre")
                    .foregroundColor(.white)
                    .font(.custom(InterFont.semiBold.rawValue, size: 30))
                    .padding()
                
                VStack(spacing: -1) {
                    
                    NavigationLink(destination: HitandRunView()
                                    .navigationBarBackButtonHidden(true)
                                    .navigationBarHidden(true)
                    ){
                        reportIncidentsView(text1: "Car accident", text2: "Report accident here", corners: [.topRight])
                    }
                    
                    Rectangle()
                        .frame(height: 2)
                        .foregroundColor(Color(ColorName.emailColor.rawValue))
                    
                    NavigationLink(destination: HitandRunView()
                                    .navigationBarBackButtonHidden(true)
                                    .navigationBarHidden(true)
                    ) {
                        reportIncidentsView(text1: "Crime incidenct", text2: "Report crime here", corners: [])
                    }
                }
            }
       
        }.ignoresSafeArea()
    }
}

Can someone tell what thing has to be done so that it can come up the tab bar?

score 4 · Accepted Answer · answered Apr 19 '22 at 11:07

4

Try not ignoring all safe areas, only the top one:

.ignoresSafeArea(edges: .top) instead of .ignoresSafeArea()

answered Apr 19 '22 at 11:07

EmilioPelaez

18,758
6
46
50

score 0 · Answer 2 · answered Apr 19 '22 at 11:35

0

You should only ignore safe area on top, not on bottom. If you ignore all safe areas, your content will be aligning to the bottom edge of your screen, ignoring the tab bar.

answered Apr 19 '22 at 11:35

Marta Paniti

152
6

Stack Hides Behind Tab Bar in SwiftUI

2 Answers2