Why isn't .edgesIgnoringSafeArea working?

[gustaf]

Why isn’t the image ignoring the safe area as it should?

import SwiftUI

struct Tab1: View {
    // MARK: - PROPERTIES
    
    var headers: [Header] = headersData
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: .center/ spacing: 20) {
                // MARK: - HEADER
                ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(headers) { item in
                        HeaderView(header: item)
                    }
                }
            }
                // MARK: - FOOTER
                
            
                VStack(alignment: .center, spacing: 20) {
                    Text("NEWS")
                    .font(.system(.title, design: .serif))
                    .fontWeight(.bold)
                        .padding(8)
                    Text("UNDER WORK")
                        .font(.system(.body, design: .serif))
                        .multilineTextAlignment(.center)
                        .foregroundColor(Color.gray)
                }
                .frame(maxWidth: 640)
                .padding()
                .padding(.bottom, 8)
                
            }
        }
        .edgesIgnoringSafeArea(.all)
        .padding(0)
    }
}

struct Tab1_Previews: PreviewProvider {
    static var previews: some View {
        Tab1(headers: headersData)
    }
}

[Chris_Parker]

Show a screen shot of what your overall view looks like with respect to the code you have provided.

[gustaf]

Im sorry, you mean like this?

[Chris_Parker]

Rather than applying the modifier to the Tab, try adding the modifier to where you have specified your TabView { }

[gustaf]

@Chris_Parker

When i add the modifiers to these codings nothing is happening.

Maybe the TabBar is interrupting the edgesignoringsafearea?

[Chris_Parker]

It’s pretty hard to tell where the issue is from what you have posted above. What happens if you add the modifier to where I have placed the arrow in the image?

Better still, post your code as text rather than an image. Copy and paste your code in a reply.

Place 3 back-ticks ``` on the line above your code and 3 back-ticks ``` on the line below your code so that it is formatted nicely. The back-tick character is located on the same keyboard key as the tilde character ~ (below the Esc key).

This also makes it easier for anyone assisting as they can copy the code and carry out some testing.

(edit)
Take a look at this sample code using two Tabs. The Tabs themselves have the .edegesIgnoringSafeArea(.top) set on the Color in the Tab code. If you comment out the modifier you will see that the color pulls away from the top to the Safe Area.

struct ContentView: View {

    var body: some View {
        TabView {

            ViewOne()
            .tabItem {
                Image(systemName: "pencil")
                Text("Tab 1")
            }

            ViewTwo()
            .tabItem {
                Image(systemName: "star")
                Text("Tab 2")
            }
            
        }
    }
}

struct ViewOne: View {

    var body: some View {
        ZStack {
            Color(.systemRed)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Text("Tab 1")
                Text("Hello, world!")
                    .padding()
            }
        }
    }
}

struct ViewTwo: View {

    var body: some View {
        ZStack {
            Color(.systemYellow)
                .edgesIgnoringSafeArea(.top)
            VStack {
                Text("Tab 2")
                Text("Hello, world!")
                    .padding()
            }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

[gustaf]

This is for the Tab1 code

Import SwiftUI

struct Tab1: View {
    // MARK: - PROPERTIES
    
    var headers: [Header] = headersData
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20) {
                // MARK: - HEADER
                ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(headers) { item in
                        HeaderView(header: item)
                    }
                }
            }
                // MARK: - FOOTER
                
            
                VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20) {
                    Text("NYHETER")
                    .font(.system(.title, design: .serif))
                    .fontWeight(.bold)
                        .padding(8)
                    Text("UNDER ARBETE")
                        .font(.system(.body, design: .serif))
                        .multilineTextAlignment(.center)
                        .foregroundColor(Color.gray)
                }
                .frame(maxWidth: 640)
                .padding()
                .padding(.bottom, 8)
                
            }
        }
    }
}

struct Tab1_Previews: PreviewProvider {
    static var previews: some View {
        Tab1(headers: headersData)
    }
}

This is the tabview code:

struct ContentView: View {
  @State private var selection = 0
    var body: some View {
        VStack {
            TabView(selection: $selection) {
                    Tab1()
                    .tag(0)
                    Tab2()
                    .tag(1)
                    Tab3()
                    .tag(2)
                    Tab4()
                    .tag(3)
                    Tab5()
                    .tag(4)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            
            Divider()
            TabBarView(selection: $selection)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

and this is the code for the header itself

import SwiftUI

struct HeaderView: View {
    // MARK - Properies
    
    var header: Header
    
    @State private var showHeadline: Bool = false
    
    var slideInAnimation: Animation {
        Animation.spring(response: 1.5, dampingFraction: 0.5, blendDuration: 0.5)
            .speed(1)
            .delay(0.25)
    }
    
    var body: some View {
        ZStack{
            Image(header.image)
                .resizable()
                .aspectRatio(contentMode: .fill)
        
            HStack(alignment: .top, spacing: 0) {
                VStack(alignment: .leading, spacing: 6) {
                    Text(header.headline)
                        .font(.system(.title, design: .serif))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .shadow(radius: 3)
                    
                    Text(header.subheadline)
                        .font(.footnote)
                        .lineLimit(8)
                        .multilineTextAlignment(/*@START_MENU_TOKEN@*/.leading/*@END_MENU_TOKEN@*/)
                        .foregroundColor(.white)
                        .shadow(radius: 8)
        }
                .padding(.vertical, 0)
                .padding(.horizontal, 20)
                .frame(width: 281, height: 105)
                .background(Color("ColorBlackTransparentLight"))
            }
            .frame(width: 285, height: 105, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
            .offset(x:-150, y: showHeadline ? 110 : 220)
            .animation(slideInAnimation)
            .onAppear(perform: { self.showHeadline.toggle()
            })
                }
            .frame(width: 480, height: 320, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
  }
}

struct HeaderView_Previews: PreviewProvider {
    static var previews: some View {
        HeaderView(header: headersData[1])
            .previewLayout(.sizeThatFits)
            .environment(\.colorScheme, .dark)
    }
}

Unfortunately adding the modifier above the tabView style didn’t work. Even adding the modifier in the HeaderView don´t change anything about the safearea.

EDIT:

this is the code for the TabView itself:

import SwiftUI

struct TabBarView: View {
    @Binding var selection: Int
    @Namespace private var currentTab
    
    var body: some View {
        HStack(alignment: .bottom)  {
            ForEach(tabs.indices) { index in
                GeometryReader { geometry in
                   VStack(spacing: 4) {
                if selection == index {
                    Color(.label)
                        .frame(height: 2)
                        .offset(y: -8)
                        .matchedGeometryEffect(id: "currentTab", in: currentTab)
}
                    
                    if tabs[selection].label == "Inköpslista" && tabs[index].label == "Inköpslista" {
                        Image(systemName: tabs[index].image)
                            .frame(height: 20)
                            .rotationEffect(.degrees(15))
                    } else {
                        Image(systemName:tabs[index].image)
                            .frame(height: 20)
                    }
                    
                    Text(tabs[index].label)
                        .font(.caption2)
                        .fixedSize()
                }
                .fixedSize(horizontal: false, vertical: true)
                .frame(width: geometry.size.width / 2, height: 44, alignment: .bottom)
                   .padding(.horizontal)                .foregroundColor(selection == index ? Color(.label) : .secondary)
                   .onTapGesture {
                    withAnimation {
                        selection = index
                  }
               }
            }
                .frame(height: 44, alignment: .bottom)
         }
       }
    }
 }

struct TabBarView_Previews: PreviewProvider {
    static var previews: some View {
        TabBarView(selection: Binding.constant(0))
            .previewLayout(.sizeThatFits)
    }
}

struct Tab {
    let image: String
    let label: String
}

let tabs = [
    Tab(image: "house", label: "Hem"),
    Tab(image: "magnifyingglass", label: "Sök Recept"),
    Tab(image: "leaf", label: "Skafferiet"),
    Tab(image: "books.vertical.fill", label: "Mina Recept"),
    Tab(image: "scroll", label: "Inköpslista")
]

[Chris_Parker]

OK so what happens if you add the modifier to the bottom of the ScrollView in each of your Tabs (Tab1, Tab2, Tab3, etc) like this for example in Tab1?:

Import SwiftUI

struct Tab1: View {
    // MARK: - PROPERTIES
    
    var headers: [Header] = headersData
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20) {
                // MARK: - HEADER
                ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(headers) { item in
                        HeaderView(header: item)
                    }
                }
            }
                // MARK: - FOOTER
                
            
                VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20) {
                    Text("NYHETER")
                    .font(.system(.title, design: .serif))
                    .fontWeight(.bold)
                        .padding(8)
                    Text("UNDER ARBETE")
                        .font(.system(.body, design: .serif))
                        .multilineTextAlignment(.center)
                        .foregroundColor(Color.gray)
                }
                .frame(maxWidth: 640)
                .padding()
                .padding(.bottom, 8)
                
            }
        }
        .edgesIgnoringSafeArea(.top)
    }
}

struct Tab1_Previews: PreviewProvider {
    static var previews: some View {
        Tab1(headers: headersData)
    }
}

[gustaf]

This works for the preview, but not for the simulator. Both these show different result, which is weird cause I find that putting the modifier there should help me ignore the safe area but I won’t allow it.

[Chris_Parker]

@gustaf

If you are prepared to share your project I can take a look at it for you. If that’s OK I can private message you and we can discuss options to facilitate that.

There must be something simple but without seeing the entire project and the interactions of each View it’s a bit hard to determine what the problem could be.

[gustaf]

That’s totally fine by me, thank you!!